1

我正在尝试进入 Web 开发，特别是现在的 CSS，我想做一些实用的事情：一个简单的菜单栏。但是，我在正确格式化子菜单的锚点时遇到问题，因为它们占用两行而不是一行。

这是HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
        <ul id="menu">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>  
                    <li><a href="#">Submenu 3</a></li>
                    <li><a href="#">Submenu 4</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
        </ul>
    </body>
</html>

和CSS代码：

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
    position: relative;
}
#menu li ul{
    position: absolute;
    list-style: none;
    right: 0;
    display: none;
}
#menu li li{
    float: none;
}
#menu li:hover ul{
    display: block;
}
4

3 回答 3

1

这里有几个选项...

将您的 CSS 更改为以下内容会在其他主菜单项下方提供整个子菜单

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
}
#menu li ul{
    list-style: none;
    right: 0;
    display: none;
    width: 100%;
    position: absolute;
}
#menu li li{
    float: none;
    width: 100%;
    display: block;
}
#menu li:hover ul{
    display: block;
}​

此选项会将顶部菜单项滑过，这可能并不理想，但嘿，这是一个选项...

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
}
#menu li ul{
    list-style: none;
    right: 0;
    display: none;
    position: relative;
    width: 100%;
}
#menu li li{
    float: none;
    width: 100%;
    display: block;
}
#menu li:hover ul{
    display: block;
}​
于 2012-07-26T23:34:36.793 回答
0

增加 的宽度，li使文本适合。

于 2012-07-26T23:32:25.087 回答
0

只需设置width.#menu li

#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
    position: relative;
    width: 80px;
}

尝试演示。

于 2012-07-26T23:33:43.887 回答