HTML CSS下拉菜单 - 想要添加垂直线

Question

我只是想添加一个垂直线在我的类别之间，我不知道如何。

任何想法？

下面是标记：

<style type="text/css">@import url(http://fonts.googleapis.com 

/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:transparent repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ||ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:transparent repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 15px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:capitalize;text-shadow:0 -1px 0 #9e3825;text-shadow:0 -1px 0 rgba(116,37,2,0.7);line-height:0px}#cssmenu > ul > li:hover > a{background:url(http://1.bp.blogspot.com/-efkMXp2H1cU/UjqSzHrMVFI/AAAAAAAABdI/TbVQZkLhC4I/s1600/hover.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:0px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(http://1.bp.blogspot.com/-hKJMJ6tutvA/UjqSigUJTSI/AAAAAAAABdA/EicRvUY_mlw/s1600/active.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(http://3.bp.blogspot.com/-V2tGyRV9wIY/UjqTVGOrmXI/AAAAAAAABdQ/XYS2v7U8DUI/s1600/highlight-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:50px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:10px 23px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:capitalize;width:150px;border-left:4px solid transparent;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 1.35s ease-in-out;text-shadow:0 1px 0 white}#cssmenu > ul ul li a:hover{border-left:4px solid #de553b;background:url(http://1.bp.blogspot.com/-efkMXp2H1cU/UjqSzHrMVFI/AAAAAAAABdI/TbVQZkLhC4I/s1600/hover.png) repeat;color:white;text-shadow:0 1px 0 black}#cssmenu > ul ul li a:active{background:url(http://1.bp.blogspot.com/-fPLR6IIW7dU/UjqTVZksJTI/AAAAAAAABdU/EadZ1JqTCX8/s1600/menu-bg.png) repeat}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work --> 





<!-- customize your menus Links --> 


<div id="cssmenu"> 
<ul> 
<li class="active"><a href="index.html"><span>Αρχική</span></a></li> 
<li class="has-sub"><a href="#"><span>Η Εταιρία</span></a> 
<ul> 
<li><a href="#"><span>Όραμα</span></a></li> 

<li><a href="#"><span>Σημεία Συνεργασίας</span></a></li> 
<li class="last"><a href="#"><span>Υποδομή</span> 
</a></li> 
<li><a href="#"><span>Δραστηριότητες</span></a></li> 
<li><a href="#"><span>Σχετικά με εμένα</span></a></li> 
</ul> 
</li> 
<li class="has-sub"><a href="#"><span>Ασφαλιστικά προϊόντα</span></a> 
<ul> 
<li><a href="#"><span>ΚΑΤΗΓΟΡΙΑ #1</span></a></li> 
<li class="last"><a href="#"><span>ΚΑΤΗΓΟΡΙΑ #2</span></a></li> 
</ul> 
</li> 
<li class="last"><a href="#"><span>Οι πελάτες μας</span></a></li> 

<li class="last"><a href="#"><span>Καριέρα </span></a></li> 
<li class="last"><a href="#"><span>Άρθρα</span></a></li> 
<li class="last"><a href="#"><span>Φωτογραφίες</span></a></li> 
<li class="last"><a href="#"><span>Επικοινωνία</span></a></li> 
<li class="last"><a href="#"><span>Web Tv</span></a></li> 

</ul> 
</div> 

这里是工作的代码我试图做

http://lykourezoslawoffices.gr/

Answer 1

这里一个例子：

li { 
 
    float: left; 
 
    list-style-type: none; 
 
    border-left: 2px solid blue; 
 
    padding: 0 10px; 
 
}

<ul> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
</ul>

演示：

https://jsfiddle.net/no5t2d9y/2/

Answer 2

添加边框右风格的类别，这里的样本工作代码

#cssmenu > ul > li { 
    border-right:2px solid #000; 
} 

#cssmenu > ul > li:last-child { 
    border-right:0px solid #000; 
} 

Answer 3

试试这个在CSS

.LIST李{背景：#CCC;位置：相对;列表样式：无; border-left：＃666 solid 1px;填充：10px的; }