Question

我遇到一个问题，当我向列表项“关于我们”添加填充时，在我向列表项添加填充时，它会添加一行背景颜色。这很难解释，但如果你将代码复制并粘贴到一个html文档中并在浏览器中打开它会更有意义。我对这些论坛太新了，因为它让我发布一张图片。

我道歉，但我刚刚开始编码，所以我正在苦苦挣扎。

谢谢！

<!--Begin HTML-->
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <header>
    <img src="Bend-oregon-dentist.jpg">
    <ul id="nav">
        <li>Home</li>
        <li>About Us
        <ul>
                <li>Our Services</li>
                <li>Our Office</li>
            </ul>
       </li>
   </ul>            
    </header>

</body>
</html>
<!--End HTML-->

/*BEGIN CSS*/
body {
margin: 0;
}
header  {
background: rgba(8,118,71,1.00);
    height: 175px;
}
#nav {

     list-style: none;
     text-align: center;
     padding-bottom: 0px;
     margin-bottom: 0px;

}
#nav li {
     margin-left: 10px;
     display: inline;
     color: white;
     font-family: verdana;
     background: rgba(3, 78, 3, 0.96);
     padding: 2px;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
}
#nav ul{
    list-style: none;
}
#nav ul li  {
    display: none;
}
#nav li:hover ul    {
    height: 20px;
}
#nav li:hover ul li {
    margin-left: 899px;
display: block;
background: rgba(174,175,185,0.9);
    width: 79px;
    border: 2px solid black;
    border-bottom: 1px solid black;
    text-align: left;
    color: black;
    font-size: 12px;
}
  /*END CSS*/

Answer 1

修改

您的菜单需要很多字符。见this updated Fiddle

#nav { list-style: none; text-align: center; padding-bottom: 0px; margin-bottom: 0px; } #nav li { margin-left: 10px; display: block; color: white; font-family: verdana; background: rgba(3, 78, 3, 0.96); padding: 10px; border-top-left-radius: 15px; border-top-right-radius: 15px; } #nav ul { list-style: none; } #nav li { position:relative; float:left; } #nav li > ul { position:absolute; top: 38px; left: -50px; width:200px; display: none; } #nav li:hover > ul { display: block; text-align: left; color: black; font-size: 12px; height:auto; }

使用填充时，如何摆脱列表项下面的这一行？

1 个答案: