Question

HTML：

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

CSS：

#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;

    }

http://jsfiddle.net/hY2VF/1/

当您突出显示“游戏”时，我希望显示我的辅助无序列表，其宽度与其上方的列表元素相同，然后该列表中的所有元素只显示在另一个之下，但它们保持在同一行上无论我改变什么。

我在使用position时绝对不是很好，因为如果我可以使用float：left，我可以让它们宽度为192px，然后将所有元素浮动，这会强制它们进入一个新的'line'。

嗯，任何帮助都会很棒。

Answer 1

你应该把它添加到你的CSS中：
A float:none; （因此前一个浮动的效果将被重置）。
使用width:100%;将宽度设置为与<li>相同的宽度，将其添加到#myMenu li:hover ul li{}
而不是在left: -40px;上添加#myMenu li:hover ul{} （您可以对此进行调整），直接将其置于其下。

#myMenu li:hover ul {
    left: -40px;            /* add this line */
    top:30px;
    color: white;
    width:100%;             /* add this line */
}

并添加此新部分（使用float:none;）：

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

DEMO 您的小提琴已更新

Answer 2

使用这个我觉得对你有用。

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

}

Answer 3

以下是CSS的更新版本：http://jsfiddle.net/hY2VF/4/

这是最重要的变化：

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

width:auto会释放#myMenu li {中设置的宽度限制。

Answer 4

我已经制作了新的CSS.Just检查出来。我希望它能够正常工作。

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

Answer 5

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

HTML

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

的CSS

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;
}

下拉菜单不会样式

5 个答案: