Question

我正在尝试进入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;
}

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

Answer 2

增加li的宽度，以便文字适合。

Answer 3

只需设置width的{{1}}。

#menu li

Try a demo

CSS格式化问题

3 个答案: