Question

我尝试定位菜单中的第一项以删除＆＃34; border-top＆＃34;这将使我在每个项目之间留下边界。这是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;}

但是从第一个子菜单项的弹出菜单中删除了所有边框... 有什么想法吗？

这里是小提琴：http://jsfiddle.net/Tone_Alone/aMbR2/

Answer 1

然后只使用直接子操作符>：

#nav ul > li > ul > li:first-child > a {border-top:none;}

以上内容仅适用于<a href="#">Menu Item 1</a>

Demo

Answer 2

您可以使用#nav ul li > ul li:first-child ~ li a {border-top: 1px dotted #999;}为所有项目设置边框，但首先是。

或第二个变体#nav ul li > ul li + li a {}

删除第一个子项目边框

2 个答案: