1
好吧我正在做一个导航栏的样本,除了嵌套的li徘徊后,背景并没有完全覆盖空间。我的HTML/CSS有什么问题?
我的HTML代码都为:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>NavBar</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">About</a></li><li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
我的CSS代码都为:
html, body {
margin: 100px;
padding:0px;
}
#nav {
margin: 0px;
padding: 0px;
background-color: #909090;
font-familY: Courier;
font-size: 19pt;
color: #afc0ff;
}
#nav ul ul {
display: none;
background-color: #909090;
}
#nav ul li:hover > ul{
margin: 0px;
padding:0px;
display:block;
position:absolute;
top: 100%;
left: 0px;
width: 100%;
}
#nav ul li:hover {
background: #808080;
}
#nav ul li {
margin: 0px;
padding: 10px 5px 10px;
list-style: none;
display: inline-table;
position: relative;
}
#nav ul li a {
text-decoration: none;
color: #260026;
}
我的问题是:
- 我不能够让我的嵌套li的背景颜色覆盖整个ar就像你可以在电子邮件中看到的那样,整个区域都不会徘徊!
我认为它是因为你的嵌套列表不显示为块。您需要将其更改为显示:block而不是inline-table。 – 2014-08-31 11:33:42
@volumeone我在#nav ul li中看到了那里:hover> ul! – 2014-08-31 11:35:18
我的意思是你的嵌套列表。列表中的列表。所以#nav ul li li li {display:block;} – 2014-08-31 11:36:52