如何使下面

Question

臥式固定菜單，形象設計，我需要做的水平固定的菜單，如下圖：

menu i need to design

我儘量做到

但剩下的一些點修改與以上圖片相同

剩餘的分數（意思是我需要將這些分數加到小提琴上）

1 - add |字之間

2 - 也是黑色矩形的菜單不像上面的圖像相同的大小。

我的小提琴如下（我試試）

https://jsfiddle.net/ahmedsa/xkabohyw/

ul { 
     border-top: 4px solid red; 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     position: fixed; /* Set the navbar to fixed position */ 
     top: 0; /* Position the navbar at the top of the page */ 
     width: 100%; /* Full width */ 

    } 

    li { 
     float: right; 
    } 

    li a { 
     display: block; 
     color: white; 
     padding: 16px; 
     text-decoration: none; 
    } 
<ul> 
     <li><a href="#home">الرئيسيه</a></li> 
     <li><a href="#news">نبذه عن</a><i>|</i></li> 
     <li><a href="#contact">اتصل بنا</a></li> 
    </ul> 

使

如何添加這些點去撥弄如果可能的話嗎？

Answer 1

有很多方法可以做到這一點。您可以使用邊框或背景圖片。但是，這是用HTML和CSS here is update code

HTML

<ul> 
     <li><a href="#home">الرئيسيه</a></li> 
     <span class="divider"></span> 
     <li><a href="#news">نبذه عن</a><i>|</i></li> 
     <span class="divider"></span> 
     <li><a href="#contact">اتصل بنا</a></li> 
    </ul> 

CSS

ul { 
    border-top: 4px solid red; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    position: fixed; /* Set the navbar to fixed position */ 
    top: 0; /* Position the navbar at the top of the page */ 
    width: 100%; /* Full width */ 

} 

li { 
    float: right; 

    line-height:1px; 

} 
span { 
    display: inline-block; 
    width: 0; 
    height: 1em; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    margin-top:8px; 
    float: right; 
} 
li a { 
    display: block; 
    color: white; 
    padding: 16px; 
    text-decoration: none; 


}