0

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: absolute，因为如果我可以使用 float:left，我可以让它们宽度为 192px，然后将所有元素向左浮动，这将迫使它们进入新的“线”。

嗯，任何帮助都会很棒。

4

5 回答 5

2

您应该将其添加到您的 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你的小提琴更新了

于 2013-11-01T11:09:47.527 回答
0

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

这是最重要的变化：

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

width:auto解除设置的宽度限制#myMenu li {。

于 2013-11-01T11:18:11.740 回答
0

使用这个我认为对你有用的。

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

}
于 2013-11-01T11:10:58.843 回答
0

试试这个代码。只需在 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;
}
于 2013-11-01T11:49:47.933 回答
0

我制作了新的 CSS。请检查一下。我希望它会起作用。

[DEMO](http://jsfiddle.net/z6QrC/)
于 2013-11-01T11:27:14.403 回答