Html 下拉菜单赢得'；t型

HTML:

当您突出显示“Games”时，我希望我的第二个无序列表显示，与上面的列表元素的宽度相同，然后该列表中的所有元素只显示在另一个元素下面，但无论我做了什么更改，它们都保持在同一行上

我不太擅长使用position:absolute，因为如果我可以使用float:left，我可以让它们的宽度为192px，然后将所有元素向左浮动，这将迫使它们进入一条新的“线”

---

嗯，任何帮助都会很好

您应该将此添加到css中：
A

float：无（因此上一个浮动的效果将被重置）

使用
宽度：100%
将宽度设置为与
相同的宽度，将其添加到
#myMenu li:hover ul li{}


然后添加
左：-40px
（您可以调整这个）在
#myMenu li:悬停ul{}
直接在它下面

#myMenu {
    background-color: red;
    list-style-type:none;
    height:30px;
    width: 100%;
}
#myMenu li { 
    float:left; 
    text-align: center;
    width: 20%; 
}
#myMenu li a {
    padding:9px 20px;
    display:block;
    color: #fff;
    text-decoration:none;
}

#myMenu li:hover { 
    position:relative; 
    background-color: white
}

#myMenu li:hover a{ 
    color: red;
}

/* Submenu */
#myMenu ul {
    position: absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    color: white;

}

#myMenu li:hover ul {
    left: 0;
    top:30px;
    color: white;
}

#myMenu li:hover ul li a {
    padding:5px;
    display:block;
    text-indent:15px;
    background-color: black;
    color: white;

}
#myMenu li:hover ul li a:hover { 
color: #fff;

    }

并添加此新部件（带有
浮点：none；
）：

你的小提琴更新了
我认为这对你有用

#myMenu li:hover ul li{
    float:none;       
    width:100%;         
}

以下是CSS的更新版本：

这是最重要的变化：

#myMenu li:hover ul li a {
display:inline-block;

}

width:auto
释放了在
#myMenu li{
中设置的宽度限制。我已经制作了新的CSS。请查看它。我希望它能工作

#myMenu li ul li {
    clear:both;
    width:auto;
    display:block;
}

试试这段代码。只需在主ul中添加一个类

Html

您需要注意您的特殊性，尝试添加类或确保只对您想要的元素进行样式设置：。在您的示例中，您的子
li
由于您的顶级
li
样式而向左浮动。非常感谢，完美的解决方案没有问题，很乐意提供帮助！
#myMenu li:hover ul li a {
display:inline-block;

}

#myMenu li ul li {
    clear:both;
    width:auto;
    display:block;
}

[DEMO](http://jsfiddle.net/z6QrC/)

<ul id="myMenu">
    <li><a class = "link" href='#page1' Tooltip = "Home Page">Home</a>    </li>
    <li><a href='#page2'>Teams</a></li>
    <li><a href='#page3'>Games</a>
        <ul>
            <li><a href='#page3'>CLG</a></li>
            <li><a href='#page3'>TSM</a></li>
            <li><a href='#page3'>C9</a></li>
            <li><a href='#page3'>SKT T1</a></li>
        </ul>
    </li>
    <li><a href='#page4'>Venues</a></li>
    <li><a href='#page4'>Battle</a></li>
</ul>

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.dropdown {
    position: relative;
    z-index: 597;
    float: left;
}

ul.dropdown li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}

ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
}

ul.dropdown ul li {float: none;}

ul.dropdown ul ul {
    top: 1px;
    left: 99%;
}

ul.dropdown li:hover > ul {
    visibility: visible;
}

.dropdown li a {
    margin: 0 10px;
    text-decoration: none;
    float: left;
    width: 100%;
}
.dropdown li a:hover ul li {
    background: #000;
    opacity: 0.9;
}