Html 菜单列表项宽度拒绝更改？

我的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>

---

这是它应该改变的地方。作为测试，我将其设置为100px，而不是父母的91。高度变化很好，但宽度变化不大。请帮忙，我被难住了。/b

这将解决您的问题

#菜单ul li：悬停ul li a{
宽度：200px；
高度：40px；
溢出：隐藏；
}

您需要在子ul li上指定a。我希望这有帮助

编辑：您还需要向ul-li-ul添加一个宽度，如下所示

#菜单ul-li:hover-ul{
宽度：200px；
}

请给出一个更好的缩进。谢谢。请使用jsfiddle.net向我们展示这个问题。简单的复制粘贴，但不管怎样。你怎么能不理解这个问题？我明确地说了问题是什么。菜单的第二层（鼠标悬停在父菜单上时显示的内容）不会更改宽度。它保持其父对象的宽度。底部的代码应该指定第二层的宽度，但不会改变，高度参数工作得很好。这很有帮助，但是检查一下改进的JSFIDLE…它只扩展了几个像素？有新JSFIDLE的链接吗？我已经根据您的代码创建了一个快速JSFIDLE。我整理了HTML和CSS，让每个人都满意。您还需要为ul定义一个宽度。希望这能解决你的问题。有效吗？我已经编辑了上面的答案。它成功了，别忘了投弃权票。干杯

#menu ul li:hover ul li {
    width: 100px;
    height: 40px;
    overflow: hidden;
}