0

我在这里有一个小提琴： https ://jsfiddle.net/vjdz8kxr/

<div class="span-8 last" id="primary_nav_wrap">
    <ul>
        <li>
            <a href="http://example.com/" class="home">Home</a>
        </li>
       <li><a href="http://example.com/kb">Knowledge</a>
           <ul>
                <li><a href="http://example.com/kb1">kb1</a></li>
                <li><a href="http://example.com/kb2">kb2</a></li>
                <li><a href="http://example.com/kb3">kb3</a></li>
            </ul>
        </li>
       <li><a href="http://example.com/forums">Forums</a>
           <ul>
                <li><a href="http://example.com/forum1">forum1</a></li>
                <li><a href="http://example.com/forum2">forum2</a></li>
                <li><a href="http://example.com/forum3">forum3</a></li>
            </ul>
        </li>
       <li><a href="http://example.com/pure_groups">Groups</a>
           <ul>
                <li><a href="http://example.com/group1">group1</a></li>
                <li><a href="http://example.com/group2">group2</a></li>
                <li><a href="http://example.com/group3">group3</a></li>
            </ul>
        </li>
       <li><a href="http://example.com/blog">Blogs</a>
           <ul>
                <li><a href="http://example.com/blog1">blog1</a></li>
                <li><a href="http://example.com/blog2">blog2</a></li>
                <li><a href="http://example.com/blog3">blog3</a></li>
            </ul>
        </li>
    </ul>


#primary_nav_wrap { float:right; }
#primary_nav_wrap ul { list-style:none; margin:0; padding:0; text-transform: uppercase;  }
#primary_nav_wrap ul a { display:block; color:#666666; text-decoration:none; font-weight:600; font-size:14px; line-height:30px; padding:0 15px; font-family:proxima-nova,sans-serif;}
#primary_nav_wrap ul li { float:left; padding:2px; }
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:2px solid #ee6129; position:relative; z-index:5; }
#primary_nav_wrap #home ul li:hover {border:2px solid #efefef; border-bottom:2px solid #efefef;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:0; z-index:-1;}
#primary_nav_wrap ul li:nth-last-child(1) ul  { left:-101px;} /* Right Most Menu will pop to left so it doesn't bleed off page*/
#primary_nav_wrap ul ul li {float:none; width:220px; text-align:left;}
#primary_nav_wrap ul ul li:hover {background: #ee6129; text-align:left; border:none; padding:2px; }
#primary_nav_wrap ul ul a {  line-height:120%; padding: 5px;}
#primary_nav_wrap ul ul ul { top:0; left:100% }
#primary_nav_wrap ul li:hover > ul { display:block}

基本上，我试图在下拉菜单周围创建一个边框，减去主菜单标题下存在的边框部分。在这种情况下，我将那条线设为橙色，因此很明显这是否有效。

我所期待的是橙色线将显示在灰色的顶部，并且我已经有了 z-index。我还假设因为元素有一个位置（绝对或相对），所以这应该起作用。

谁能看到我在这里做错了什么？

4

1 回答 1

0

这是一个假设颜色基本保持不变的解决方案。

  • 删除主菜单上的边框底部（橙色） li:hover (border-bottom:none)

  • 还从该 CSS 规则中删除 5 的 z-index

  • 为选择器添加白色背景。

  • 为您的孩子添加负边距顶部（子菜单）。您添加了负左边距，但没有负顶部。

或者只是按照这个：https ://jsfiddle.net/vjdz8kxr/6/

#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:none; position:relative; background:white;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:-2px; z-index:-1;}

编辑：

添加一点解释：如果您有一个父级，您希望父级出现在子级之后，则父级根本不能有 z-index 声明。即使它是负面的。这是一些证据：http ://codepen.io/tylerism/pen/NGNxWR

于 2015-09-16T21:43:15.827 回答