Question

你好，当你悬停产品时，下拉菜单链接到菜单有问题，下拉菜单很奇怪，我很难帮你吗？谢谢

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;}
}

Answer 1

从height: 40px;移除.nav li并将position: relative;添加到.nav ul，效果很好。

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

点击此处查看更新后的Fiddle。

Answer 2

根据问题中有限的信息进行纯粹猜测...试试这个CSS：

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

CSS下拉菜单[帮助]

2 个答案: