我是CSS的新手,正在测试一些东西。我创建了一个下拉菜单,但这不能正常工作。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link href = "üben_css.css" rel = "stylesheet" type="text/css">
<title> xx</title>
</head>
<body>
<div id="nav">
<ul>
<li> Home </li>
<li> xx
<ul>
<li> Hc </li>
<li> Scc </li>
</ul>
<li>Zubehör </li>
<li> Service </li>
<li> Forum </li>
</ul>
</div>
</body>
</html>
CSS代码:
body{
margin:0;
padding:0;
}
#nav{
background-color:silver;
position:relative;
}
#nav ul li{
display:inline;
}
#nav ul ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul li{
display:block;
}
问题是导航栏以行内显示,但是当我将鼠标悬停在“ xx”元素上时,导航栏的其余部分会显示在下拉列表下方。我怎样才能解决这个问题?
http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句