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下拉菜单[帮助]

回答

相关问题