固定定位符導航菜單

我有一個子菜單導航欄排序，如：固定定位符導航菜單

NAV> ul>李+ DIV> ul> li>系統

每個NAV> ul>裏有下一個div它用於隱藏的子菜單，直到用戶將鼠標懸停在nav> ul> li上。當導航沒有定位這個作品，，但是當我設置位置：固定導航，子菜單停止出現。我已經嘗試了一切我知道要嘗試，我不知道爲什麼會發生這種情況。這不是瀏覽器的具體問題，這個問題仍然存在於Chrome瀏覽器，safari和firefox上。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" type="text/css" href="navbar.css"> 
    <link rel="stylesheet" type="text/css" href="header.css"> 
</head> 
<body> 
    <nav> 
    <ul>  
      <li><a class="top" href="TODO">Blog </a> </li> 
      <div> 
        <ul> 
          <li><a href="TODO">Blog1</a></li> 
          <li><a href="TODO">Blog2</a></li> 
          <li><a href="TODO">Blog3</a></li> 

        </ul> 
      </div> 
      <li><a href="TODO">Links </a></li> 
        <div> 
          <ul> 
            <li><a href="TODO">Link1</a></li> 
            <li><a href="TODO">Link2</a></li> 
            <li><a href="TODO">Link3</a></li> 
          </ul> 
        </div> 
      <li><a href="TODO">Projects</a> </li> 
      <div> 
        <ul> 
          <li><a href="TODO">Project1</a></li> 
          <li><a href="TODO">Project2</a></li> 

        </ul> 
      </div> 
      <li><a class="bottom" href="TODO">About</a> </li> 
      <div></div> 
    </ul> 
    </nav> 
    <header> 
      <p> My header </p> 
    </header> 
    <section> 
      <p> My section </p> 
    </section> 
    <footer> 
      <p> My footer </p> 
    </footer> 


</body> 
</html>

CSS：

body { 
    background-color: #EBE8E4; 
    color: #222; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",  Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
    font-size: 15px; 
} 
nav { 
    position:fixed; 
} 

nav,nav > ul > li + div ul > li > a { 
    background-color: #fff; 
    border: 1px solid #dedede; 
    border-radius: 4px; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
    color: #888; 
    text-decoration:none; 
    display: block; 
    margin: 8px 22px 8px 22px; 
    overflow: hidden; 
    width: 165px; 
} 
nav > ul > li + div ul > li > a { 
    margin:0px; 
    width:117px; 
    border:0px; 
    box-shadow: 0 0px 0px 0px; 
} 
    nav ul { 
    margin: 0; 
    padding: 0; 
    } 

    nav ul li { 
     display: block; 
     list-style-type: none; 
    } 


nav > ul > li > a { 
    color: #aaa; 
    display: block; 
    line-height: 56px; 
    padding: 0 24px; 
    text-decoration: none; 
} 

    nav > ul > li:hover { 
    background-color: rgb(40, 44, 47); 
    } 

    nav > ul > li:hover > a { 
    color: rgb(255, 255, 255); 
    } 

nav > ul > li + div { 
    background-color: rgb(40, 44, 47); 
    border-radius: 4px; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
    display: none; 
    margin: 0; 
    opacity: 0; 
    position: absolute; 
    width: 165px; 
    visibility: hidden; 

} 
nav > ul > li:hover + div, 
    nav > ul > li + div:hover { 
    display: block; 
    margin-left:165px; 
    margin-top:-56px; 
    opacity: 1; 
    visibility: visible; 
    background-color:rgb(255,255,255); 
    block-radius:4px; 
} 

nav > ul > li + div > ul > li:hover { 
    background-color: rgb(250,0,0); 
    border: 0px; 
    border-radius:4px; 
} 
nav > ul > li + div ul > li:hover > a { 
    background-color: rgb(40,44,47); 
    color: rgb(250 , 250 ,250); 
} 

nav > ul > li + div ul > li { 
    display: block; 
} 

nav > ul > li + div ul > li > a { 
    color: #aaa; 
    background-color:#fff; 
    display: block; 
    padding: 12px 24px; 
    text-decoration: none; 
} 

nav > ul > li > div ul > li:hover > a { 
    background-color: rgba(255, 255, 255, 0.1); 
}

來源

2014-12-04 yyttr3

你能設置任何形式的合作例子，像的jsfiddle或CodePen，所以大家可以更清楚地看到這是怎麼回事？此外，W3C僅將'li'元素定義爲'ul'的子元素，而不是'div'。 http://www.w3.org/TR/html5/grouping-content.html#the-ul-element所以這可能會導致定位問題。 – Felix 2014-12-04 03:31:03

的問題是在nav,nav > ul > li + div ul > li > a CSS規則的overflow:hidden。刪除overflow:hidden它會爲你工作。

演示：http://jsfiddle.net/lotusgodkk/2vjpkrzs/

CSS：

nav, nav > ul > li + div ul > li > a { 
    background-color: #fff; 
    border: 1px solid #dedede; 
    border-radius: 4px; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
    color: #888; 
    text-decoration:none; 
    display: block; 
    margin: 8px 22px 8px 22px; 
    width: 165px; 
}

來源

2014-12-04 05:56:25

固定定位符導航菜單

回答

相關問題