我試圖讓一些z-index的東西變得聰明。（父列表項重疊的孩子ul）但我認爲這是干擾我的subnav保持活動，一旦鼠標脫離父列表項。我有一個小提琴，演示了正在發生的事情。有任何想法嗎？CSS Subnav不會保持活動

（佔位符頁腳是有證明一切後，資產淨值可能應該有一個的z-index小於-1喜歡的內容區域。）

標記：

<!DOCTYPE html> 

<html> 
<head> 
    <title>Header Test</title> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 

<body> 
    <div id="global-header" class="header"> 
     <div id="secondary-nav" class="nav" role="toolbar" aria-label="User Tools"> 
      <div class="wrapper"> 
       <ul class="group"> 
        <li><a href="">Item 1</a></li> 

        <li><a href="">Item 2</a></li> 

        <li><a href="">Item 3</a></li> 

        <li><a href="">Item 4</a></li> 

        <li><a href="">Item 5</a></li> 

        <li><a href="">Item 6</a></li> 
       </ul> 
      </div><!-- /.wrapper --> 
     </div><!-- /#secondary-nav --> 

     <div id="page-top" class="group"> 
      <div class="wrapper"> 
       <hgroup id="branding" class="group"> 
        <h1 class="logo">Name!</h1> 

        <h2 class="slogan">Memorable slogan!</h2> 
       </hgroup><!-- /#branding --> 

       <div id="global-nav" class="nav" role="navigation" aria-label="Main Site Navigation"> 
        <ul> 
         <li class="1"><a href="">Item 1</a></li> 

         <li class="2"><a href="">Item 2</a></li> 

         <li class="3"><a href="">Item 3</a></li> 

         <li class="4"><a href="">Item 4</a></li> 

         <li class="5"><a href="">Item 5</a></li> 

         <li class="expand user"> 
          <a href="">Hi, <span class="user-name">John</span></a><a class="message-count">3</a> 

          <ul class="user-menu sub-nav" role="menu" aria-label="User Menu"> 
           <li><a href="">Item 1</a></li> 

           <li><a href="">Item 2</a></li> 

           <li><a href="">Item 3</a></li> 

           <li><a href="">Item 4</a></li> 

           <li><a href="">Item 5</a></li> 

           <li><a href="">Item 6</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div><!-- /#global-nav --> 
      </div><!--- /.wrapper --> 
     </div><!-- /#page-top --> 
    </div><!-- /#global-header --> 

    <div id="content"> 
     <p>Hello, World!</p> 
    </div> 

    <div id="footer"> 
     <p>I'm a footer, lol!</p> 
    </div> 
</body> 
</html>

樣式：

* { 
    box-sizing:border-box; 
} 

html { 
    font-size:100%; 
} 

body { 
    margin:0 auto; 
    font:1em/1 Helvetica,Arial,sans-serif; 
    width:100%; 
} 

#global-header { 
    width:100%; 
} 

.wrapper { 
    margin:0 auto; 
    max-width:960px; 
} 

.nav ul { 
    list-style:none; 
} 

.nav ul > li { 
    display:block; 
    float:left; 
} 

.nav li a { 
    display:block; 
} 

[role=toolbar] { 
    display:block; 
    margin:0 auto; 
    width:100%; 
    background:url(grey_diagnol.png) repeat; 
    overflow:hidden; 
} 

[role=toolbar] ul { 
    display:block; 
    margin:0 auto; 
    font-size:.625em; 
    float:right; 
} 

[role=toolbar] li { 
    margin:.5em 0; 
} 

[role=toolbar] li:not(:last-child) { 
    border-right:1px solid #436394; 
} 

[role=toolbar] ul li > a { 
    color:#436394; 
    text-decoration:none; 
    padding:.25em .72em; 
} 

[role=toolbar] a:hover { 
    color:#a1c336; 
} 

#page-top { 
    border-top:2px solid #32568F; 
    background-color:#172842; 
    color:#fff; 
    width:100%; 
    overflow:visible; 

} 

#branding { 
    display:inline; 
    float:left; 
    line-height:2em; 
    vertical-align:middle; 
    padding-top:.9em; 
} 

#branding h1.logo { 
    display:inline-block; 
    margin:0; 
    padding:0; 
    float:left; 
    text-indent:100%; 
    overflow:hidden; 
    background:url(logo.png) no-repeat left top; 
    width:124px; 
    height:27px; 
    vertical-align:bottom; 
    margin-right:.4em; 
} 

#branding h2 { 
    display:inline-block; 
    font-size:.625em; 
    font-style:oblique; 
    font-weight:400; 
    float:left; 
    margin:0; 
    padding:0; 
} 

[role=navigation] ul { 
    display:block; 
    margin:0; 
    padding:0; 
    float:right; 
} 

[role=navigation] li { 
    display:block; 
    position:relative; 
    margin-bottom:-5px; 
    font-family:'MuseoSlab500',Georgia,'Times New Roman',serif; 
    font-weight:700; 
    font-size:1.2em; 
    text-transform:lowercase; 
} 

[role=navigation] li:hover { 
    background:#b4df5b; 
    background:-moz-linear-gradient(top,#a1c336 0%,#88a13d 100%); 
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a1c336),color-stop(100%,#88a13d)); 
    background:-webkit-linear-gradient(top,#a1c336 0%,#88a13d 100%); 
    background:-o-linear-gradient(top,#a1c336 0%,#88a13d 100%); 
    background:-ms-linear-gradient(top,#a1c336 0%,#88a13d 100%); 
    background:linear-gradient(to bottom,#a1c336 0%,#88a13d 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1c336',endColorstr='#88a13d',GradientType=0); 
    box-shadow:0 1px 4px #000; 
    text-shadow:1px 1px 1px #3D4427; 
    color:#fff; 
} 

[role=navigation] a { 
    color:#fff; 
    text-decoration:none; 
    padding:1em; 
} 

[role=navigation] .user-name { 
    position: relative; 
    text-transform:uppercase; 
    font:.64em Helvetica,Arial,sans-serif; 
    color:#a2bf39; 
    text-shadow:none; 
    /* max-width: 5em; 
    overflow: hidden; 
    text-overflow: clip; 
    display: inline-block; */ 
} 

[role=navigation] li:hover .user-name { 
    color:#172842; 
} 

a.message-count { 
    display: block; 
    position: absolute; 
    top: -2px; 
    right: -2px; 
    box-shadow: 0px 1px 4px black; 
    border: 2px solid #fff; 
    border-radius: 50px; 
    padding: .25em .5em; 
    background-color: #d52424; 
    font: .75em Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    color: #fff; 
    cursor: pointer; 
} 
a.message-count:hover { 
    background-color: red; 
    box-shadow: 0px 1px 4px white; 
} 

[role=navigation] li ul.sub-nav { 
    display:none; 
    position:absolute; 
    top:2.5em; 
    left:-.75em; 
    z-index:-1; 
    box-shadow:0 1px 8px rgba(23,40,66,.5); 
    border-right:1px solid #172842; 
    border-bottom:1px solid #172842; 
    border-left:1px solid #172842; 
    padding-top:.5em; 
    background-color:#ededf4; 
} 

[role=navigation] li:hover ul.sub-nav { 
    display:block; 
} 

.sub-nav li { 
    float:none; 
    display:list-item; 
    font-size:14px; 
    font-size:.82rem; 
    font-family:Helvetica,Arial,sans-serif; 
    font-weight:400; 
    min-width:150px; 
    margin:0; 
    text-shadow:none; 
} 

.sub-nav li:hover { 
    background:#a1c336; 
    text-shadow:none; 
    box-shadow:none; 
} 

.sub-nav li a { 
    padding:.5em .75em; 
    color:#172842; 
} 

.sub-nav li a:hover { 
    color:#fff; 
} 

#content { 
    width: 100%; 
    background-color: red; 
    height: 100%; 
    z-index: -2; 
    position: relative; 
} 

#footer { 
    width: 100%; 
    background-color: blue; 
    height: 100%; 
} 


/* group */ 
.group:after { 
    content:"."; 
    display:block; 
    clear:both; 
    visibility:hidden; 
    line-height:0; 
    height:0; 
    overflow:hidden; 
    font-size:0; 
} 

.group { 
    display:inline-block; 
} 

html[xmlns] .group { 
    display:block; 
} 

* html .group { 
    height:1%; 
}

來源

2012-10-30 dv8withn8

化妝的z-index：1 in [role = navigation] li ul.sub-nav {

來源

2012-10-30 21:13:07 bob

是的，這將使它的工作，但是，然後我失去了父子li在subnav上的重疊效應。 – dv8withn8

我c你的意思，一秒 – bob

對不起，請刪除 z-index：-1; [角色=導航]李ul.sub-NAV

並測試它

也，你在哪裏從用戶菜單類得到這個。

來源

2012-10-30 21:45:05 bob

仍然會失去重疊subnav的父李的影響。查找父項目的綠色區域以保留在下拉菜單的頂部。用戶菜單類只是一個佔位符。 – dv8withn8

CSS Subnav不會保持活動

標記：

樣式：

回答

相關問題