我正在创建一个带有子菜单的水平菜单(图 c)，但我所能得到的只是图 a，但我想要类似图 b 或图 c 的内容:
图 a 的 HTML 和 CSS 代码:
<html>
<head>
<style type="text/css">
ul li{
display:inline;
background-color:red;
}
ul li ul{
display:inline;
}
ul li li{
position:relative;
top:20px;
display:inline;
background-color:green;
}
li{
border:1px solid white;
}
li:hover{
border:1px solid blue;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<ul>
<li>overview</li>
<li>alarm
<ul>
<li>view</li>
<li>config</li>
</ul>
</li>
<li>log</li>
<li>config
<ul>
<li>tag</li>
<li>security</li>
</ul>
</li>
</ul>
</body>
</html>
问题是:如何创建类似图 b 或图 c 的输出？我希望子菜单显示在其父菜单的正下方，而父菜单不会被扩展太久。
最佳答案
@亚历克斯；检查此链接 http://jsfiddle.net/sandeep/9SH4S/可能对你有帮助。
CSS:
ul li{
display:inline;
background-color:red;
position:relative;
}
ul li ul{
display:inline;
position:absolute;
top:20px;
left:0;
white-space:nowrap;
}
ul li li{
display:inline;
background-color:green;
}
li{
border:1px solid white;
}
li:hover{
border:1px solid blue;
}
关于css - 使用嵌套列表创建水平菜单，其下有子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7256627/