1

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

4

1 回答 1

2

这将解决您#menu ul li:hover ul li a { width: 200px; height: 40px; overflow: hidden; }需要在 sub ul li 上指定 a 的问题。我希望这有帮助。

编辑：您还需要像这样向 ul li ul 添加宽度#menu ul li:hover ul { width: 200px; }

于 2012-05-03T09:55:13.950 回答