我尝试定位菜单中的第一项以删除" border-top"这将使我在每个项目之间留下边界。这是css:
#nav-upper{padding-left:22px;text-align:center;font-family:Verdana,Helvetica,sans-serif;}
#nav li{margin-top:10px;line-height:2px;}
#nav a{text-align:left;}
#nav ul{display:inline-block;border-radius:5px;list-style:none;}
#nav ul:after{display:block;visibility:hidden;clear:both;content:'.';}
#nav ul li{position:relative;float:left;}
#nav ul li a{display:block;padding:14px 20px 15px;color:#222;text-decoration:none;text-transform:uppercase;letter-spacing:1.25px;font-size:12px;}
#nav ul li > ul{position:absolute;top:10px;left:50%;z-index:-9999;visibility:hidden;margin-left:-130px;padding-top:10px;width:240px;background:none;opacity:0;}
#nav ul li:hover > ul{top:95%;z-index:100;display:block;visibility:visible;opacity:1;}
#nav ul li > ul li:first-child{padding-top:3px;border-radius:4px 4px 0 0;}
#nav ul li > ul li:last-child{border-radius:0 0 4px 4px;}
#nav ul li > ul li{margin-top:0px;margin-bottom:-5px;padding:0 3px 3px;width:100%;background:#777;line-height:25px;}
#nav ul li > ul li a{display:block;padding:6px 9px;border-top:1px #999 dotted;border-radius:0px;background:#EEE;color:#222;font-size:12px;}
#nav ul li > ul li:hover > a{background:#c05006;color:#FFF;}
#nav ul li > ul li.active > a{background:#DDD;color:#FFF;}
/* SUB SUB MENU */
#nav ul li > ul li > ul{top:0;left:50%;visibility:hidden;margin-left:0px;padding:0;padding-left:13px;}
#nav ul li > ul li:hover > ul{top:0;left:100%;z-index:100;display:block;opacity:1;}
这是html,它是使用以下内容从CMS自动生成的:
<div id="nav">
<ul id="nav-sub">
<li class="here first"><a href="#">Menu</a>
<ul>
<li class="first"><a href="#">Menu Item 1</a>
<ul>
<li class="first"><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li class="last"><a href="#">Sub 3</a></li>
</ul>
</li>
<li class="last">
<a href="#">Menu Item 1</a>
<ul>
<li class="first"><a href="#">Sub 1</a></li>
<li><a href="V">Sub 2</a></li>
<li class="last"><a href="#">Sub 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
我最接近删除顶部边框的方法是:
#nav ul li > ul li:first-child a {border-top:none;}
但是从第一个子菜单项的弹出菜单中删除了所有边框... 有什么想法吗?
答案 0 :(得分:0)
然后只使用直接子操作符>
:
#nav ul > li > ul > li:first-child > a {border-top:none;}
以上内容仅适用于<a href="#">Menu Item 1</a>
答案 1 :(得分:0)
您可以使用#nav ul li > ul li:first-child ~ li a {border-top: 1px dotted #999;}
为所有项目设置边框,但首先是。
或第二个变体#nav ul li > ul li + li a {}