0
出现我做了这个页面下拉菜单不正确
* {
\t box-sizing: border-box;
}
/* Navbar */
nav {
\t background: #4D636F;
\t max-height: 51px;
\t margin: 0;
\t overflow: hidden;
\t padding: 0;
}
nav a {
\t text-decoration: none;
}
nav span.badge {
\t position: absolute;
\t font-size: 12px;
\t top: 5px;
\t right: 6;
\t background-color: #4CAF50;
\t padding: 1px 4px;
\t border-radius: 50%;
}
nav .logo {
\t background: #3A4B53;
\t float: left;
\t font-size: 18px;
\t padding: 12px 18px;
\t color: #fff;
\t cursor: pointer;
}
nav .logo i {
\t margin-right: 13px;
}
nav ul {
\t list-style-type: none;
\t margin: 0;
\t padding-top: 12px;
}
nav ul li {
\t display: inline;
}
nav ul li a {
\t color: #fff;
\t padding: 12px 18px;
\t font-size: 18px;
\t transition: all 0.2s ease;
}
nav ul li a:hover {
\t color: #444;
\t background-color: white;
}
nav .right {
\t float: right;
}
nav .right a img {
\t width: 25px;
\t height: 25px;
\t border-radius: 50%;
\t margin-bottom: 8px;
}
li.dropdown {
\t position: relative;
}
.dropdown-menu {
\t position: absolute;
\t background-color: #f9f9f9;
\t min-width: 160px;
\t padding: 0;
\t top: 20px;
\t z-index: 1;
\t left: 0;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-menu a {
\t color: #444;
text-align: left;
padding: 0;
display: block;
}
/* Navbar ends */<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="myNav">
\t <div class="logo">
\t \t <span><i class="fa fa-home" aria-hidden="true"></i>Logo</span>
\t </div>
\t <ul>
\t \t <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
\t \t <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
\t \t <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
\t \t <li class="dropdown">
\t \t \t <a href="#" style="position: relative;"><i class="fa fa-bell"></i>
\t \t \t \t <span class="badge">3</span>
\t \t \t </a>
\t \t \t <div class="dropdown-menu">
\t \t \t \t <a href="#">One</a>
\t \t \t \t <a href="#">One</a>
\t \t \t \t <a href="#">One</a>
\t \t \t </div>
\t \t </li>
\t \t <li class="right"><a href="#"><img src="images/profile.png" align="middle"></a></li>
\t </ul>
</nav>看去是下拉菜单显示不正确的问题。 我做了它绝对的，它具有的z-index：1 :(
我知道，我没能hoverable但我希望它出现，然后我将处理它
我不觉得有什么不对的代码，但输出否则说。
我做了什么错呢，我应该怎么做才能作出正确的？
问题在于CSS中'.nav'类的'overflow：hidden;'属性，这会导致导航边界溢出的任何内容被隐藏。 – Svenskunganka
看看这个http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar nav有溢出隐藏以及 –