CSS下拉菜單[幫助]

-4

你好，我有菜單下拉菜單鏈接問題，當你懸停產品下拉菜單很奇怪，我很掙扎，請你幫忙？謝謝CSS下拉菜單[幫助]

的HTML：

<div class="nav"> 
    <ul> 
    <li class="home"><a href="index.html">Home</a></li> 
    <li class="faq"><a href="c">Products</a> 
     <ul> 
      <li><a href="#">TEST</a></li> 
      <li><a href="#">TEST</a></li> 
      <li><a href="#">TEST</a></li> 
     </ul> 
    </li> 
    <li class="service"><a href="price.html">Pricing</a></li> 
    <li class="contact"><a href="f">Contact</a></li> 
    <li class="logout"><a href="logout.php">Logout</a></li> 
    </ul> 
</div>

的CSS：

body {margin: 0; 
    padding: 0; 
    background: #ccc;} 
.nav ul {list-style: none; 
    background-color: #1dde1d; 
    text-align: center; 
    padding: 0; 
    margin: 0;} 
.nav li {font-family: 'Oswald', sans-serif; 
    font-size: 1.2em; 
    line-height: 40px; 
    height: 40px; 
    border-bottom: 1px solid #888;} 
.nav a {text-decoration: none; 
    color: #fff; 
    display: block; 
    transition: .3s background-color;} 
.nav a:hover {background-color: #23c823;} 
.nav ul li ul li {display: none;} 
.nav ul li:hover ul li{display: block;} 
@media screen and (min-width: 600px) { 
    .nav li {width: 120px; 
     border-bottom: none; 
     height: 50px; 
     line-height: 50px; 
     font-size: 1.4em;} 
    #container {min-height:100%; 
     position:relative;} 
    .footerWrap {width:100%; 
     position:fixed; 
     bottom: 0px;} 
    .footer {width:200px; 
     margin:auto;} 
    .footerContent {float:left; 
     width:100%; 
     background-color:#009900; 
     padding:1px 0;} 
    .footer p {float:left; 
     width:100%; 
     text-align:center;} 
    /* Option 1 - Display Inline */ 
    .nav li {display: inline-block; 
    margin-right: -4px;} 
}

來源

2015-11-05 iHxy

歡迎堆棧溢出！尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

即時通訊新對話 – iHxy

您需要下拉菜單嗎？ – ketan

從.nav li刪除height: 40px;並添加position: relative;到.nav ul它工作得很好。

.nav ul { 
    list-style: none; 
    background-color: #1dde1d; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    position: relative; //added position. 
}

檢查您的更新Fiddle在這裏。

來源

2015-11-05 11:42:25 ketan

在基於問題的有限信息純屬猜測......試試這個CSS：

.nav ul li {position:relative;} 
.nav ul li ul {position:absolute;top:100%;}

來源

2015-11-06 11:01:52

CSS下拉菜單[幫助]

回答

相關問題