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有溢出隱藏以及 –