我有这个代码,它不起作用。 当我将鼠标悬停在主菜单上时,子菜单不会显示。 颜色变化似乎有效但第二个列表在悬停时不显示在主菜单下。 我找不到问题...... 请帮忙
<html>
<head>
<title>test</title>
<style type="text/css">
#navigationbar {
position: relative;
padding: 0;
margin: 0;
height: 30px;
width: 90%;
}
#navigationbar ul {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #eeeeee;
overflow: visible;
}
#navigationbar ul>li {
display: block;
float: left;
height: auto;
width: 130px;
}
#navigationbar li>a {
display: block;
height: 100%;
padding: 0 0 0 10px;
width: 115px;
border-right: 1px black solid;
font-size: 17px;
font-family: sans-serif;
background-color: #eeeeee;
color: #5d5636;
line-height: 30px;
text-decoration: none;
}
#navigationbar ul ul {
margin-top: 2px;
display: none;
width: 160px;
height: auto;
background-color: #dddddd;
position: static;
border: 1px #666666 solid;
}
#navigationbar ul ul li {
position: relative;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}
#navigationbar ul ul li>a {
height: 100%;
width: 96%;
padding: 0 0 0 4%;
line-height: 28px;
background-color: transparent;
border: none;
color: #000000;
font-size 12px;
font-style: normal;
}
#navigationbar li:hover > a {
color: #220000;
background-color: #eeeabe;
}
#navigationbar li:hover > ul {
display: block;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<nav id="navigationbar">
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/AAAtest.html">A</a></li>
<ul>
<li><a href=/a.html>aaaaa</a></li>
<li><a href=/b.html>bbbbb</a></li>
<li><a href=/c.html>ccccc</a></li>
</ul>
<li><a href="/BBBtest.html">B</a></li>
<ul>
<li><a href=/aa.html>AAAA</a></li>
<li><a href=/bb.html>BBBBB</a></li>
<li><a href=/cc.html>CCCCC</a></li>
</ul>
</ul>
</nav>
</body>
</html>
感谢。
答案 0 :(得分:1)
您在错误的地方有<div class="test">
</div>
的结束标记
li