我的css代码是......
.list {
position: relative;
width: 200px;
margin-left: 110px;
margin-right: auto;
}
#menucontainer {
position: relative;
z-index: 2;
background: #ffffff;
width: 1001px;
}
#menu {
position: relative;
color: #999999;
margin: 0px auto;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
z-index: 2;
float: left;
position: relative;
}
#menu ul li a {
background-color: #ffffff;
width: 91px;
height: 40px;
display: block;
text-align: center;
color: #999999;
text-decoration: none;
}
#menu ul li a:hover {
background: #12aeef;
color: #ffffff;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
position: absolute;
}
#menu ul li:hover ul li {
width: 100px;
height: 40px;
overflow: hidden;
}
#doubleline {
line-height: 20px;
}
#regularline {
line-height: 40px;
}
我菜单的html是......
<div id="menucontainer">
<div id="menu">
<ul>
<li id="regularline" ><a href=""><b>Home</b></a></li>
<li id="regularline" ><a href="#"><b>HTML</b></a>
<ul>
<li id="regularline" ><a href="#"><b>Introduction</b></a></li>
<li id="doubleline" ><a href="#"><font size="2"><b>Making an HTML File</b></font></a></li>
<li id="regularline" ><a href="#"><b>Hello World</b></a></li>
<li id="regularline" ><a href="#"><b>Body</b></a></li>
<li id="regularline" ><a href="#"><b>Font</b></a></li>
<li id="regularline" ><a href="#"><b>DIV</b></a></li>
<li id="regularline" ><a href="#"><b>Tables</b></a></li>
<li id="regularline" ><a href="#"><b>Links</a></li>
<li id="regularline" ><a href="#">Images</b></a></li>
<li id="doubleline" ><a href="#"><font size="2"><b>Bold, Ittalics, and Underline</b></font></a></li>
<li id="regularline" ><a href="#"><b>Positioning</b></a></li>
<li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li>
</ul>
</li>
<li id="regularline" ><a href="#"><b>PHP</b></a>
<ul>
<li id="regularline" ><a href="#"><b>Introduction</b></a></li>
<li id="regularline" ><a href="#"><font size="2"><b>Making a PHP file</b></font></a></li>
<li id="regularline" ><a href="#"><b>Hello World</b></a></li>
<li id="regularline" ><a href="#"><b>Echoing</b></a></li>
<li id="regularline" ><a href="#"><b>Variables</b></a></li>
<li id="regularline" ><a href="#"><b>If Statements</b></a></li>
<li id="regularline" ><a href="#"><b>Functions</b></a></li>
<li id="regularline" ><a href="#"><b>Forms</b></a></li>
<li id="regularline" ><a href="#"><b>MySQL</b></a></li>
<li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li>
</ul>
</li>
<li id="regularline" ><a href="#"><b>Java</b></a>
<ul>
<li id="regularline" ><a href="#"><b>Introduction</b></a></li>
<li id="regularline" ><a href="#"><b>Using Java</b></a></li>
<li id="regularline" ><a href="#"><b>Hello World</b></a></li>
<li id="regularline" ><a href="#"><b>Variables</b></a></li>
<li id="regularline" ><a href="#"><b>Functions</b></a></li>
<li id="regularline" ><a href="#"><b>Alerts</b></a></li>
<li id="regularline" ><a href="#"><font size="2"><b>Getting Elements</b></font></a></li>
<li id="regularline" ><a href="#"><b>Mouse Events</b></a></li>
<li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li>
</ul>
</li>
<li id="regularline" ><a href="#"><b>JQuery</b></a>
<ul>
<li id="regularline" ><a href="#"><b>Introduction</b></a></li>
<li id="regularline" ><a href="#"><b>Using JQuery</b></a></li>
<li id="regularline" ><a href="#"><b>Hello World</b></a></li>
<li id="regularline" ><a href="#"><b>Variables</b></a></li>
<li id="regularline" ><a href="#"><b>Functions</b></a></li>
<li id="regularline" ><a href="#"><b>Alerts</b></a></li>
<li id="regularline" ><a href="#"><font size="2"><b>Getting Elements</b></font></a></li>
<li id="regularline" ><a href="#"><b>Mouse Events</b></a></li>
<li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li>
</ul>
</li>
<li id="regularline" ><a href="#"><b>CSS</b></a>
<ul id="regularline" >
<li id="regularline" ><a href="#"><b>Introduction</b></a></li>
<li id="regularline" ><a href="#"><font size="2"><b>Making a CSS File</b></font></a></li>
<li id="regularline" ><a href="#"><b>Hello World</b></a></li>
<li id="regularline" ><a href="#"><b>Classes</b></a></li>
<li id="regularline" ><a href="#"><font size="2"><b>Getting Elements</b></font></a></li>
<li id="regularline" ><a href="#"><b>Hover</b></a></li>
<li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li>
</ul>
</li>
<li id="regularline" ><a href="../code_editor/"><b>Code Editor</b></a></li>
<li id="regularline" ><a href="sign_in/"><b>Sign In</b></a></li>
<li id="regularline" ><a href="register/"><b>Register</b></a></li>
<li id="regularline" ><a href="#"><b>Forums</b></a></li>
<li id="regularline" ><a href="#"><b>Contact Us</b></a></li>
</ul>
</div>
</div>
由于某种原因，我无法改变第二层的宽度。
#menu ul li:hover ul li {
width: 100px;
height: 40px;
overflow: hidden;
}
应该改变的地方。作为测试，我将其设置为100px而不是父母的91。高度变化很好，但宽度拒绝。请帮忙，我很难过./b
答案 0 :(得分：2)
这将解决您需要在子ul上指定a的问题#menu ul li:hover ul li a {
width: 200px;
height: 40px;
overflow: hidden;
}。我希望这会有所帮助。
编辑：您还需要为此类#menu ul li:hover ul {
width: 200px;
}