Question

我有一个导航栏，子菜单的顺序如下：

nav＆gt; ul＆gt; li + div＆gt; ul＆gt; li>一个

每个导航＆gt; ul＆gt; li下面有一个div用于隐藏的子菜单用户将鼠标悬停在导航＆gt; ul＆gt; 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);
}

Answer 1

问题在于overflow:hidden css规则中的nav,nav > ul > li + div ul > li > a。删除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;
}

固定定位中断导航菜单

1 个答案: