CSS中的下拉菜单
我试图用纯CSS构建一个下拉式多级导航菜单栏。 下面是代码(我知道结果很难看):CSS中的下拉菜单,css,navigationbar,Css,Navigationbar,我试图用纯CSS构建一个下拉式多级导航菜单栏。 下面是代码(我知道结果很难看): 菜单 * { 保证金:0; 填充:0 } 保险商实验室{ 列表样式:无 } 李{ 浮动:左; 宽度:120px; 高度:20px; 背景:粉红色 } li>ul{ 显示:无 } 李:悬停>ul{ 显示:块; 位置:相对位置; 顶部:-20px; 左:120px; 背景:红色 } #导航>垂直:悬停>垂直{ 顶部:0px; 左:0px } 李:悬停{ 背景:红色 } 一, 1.1 1.1.1 1.1.1.1
菜单
* {
保证金:0;
填充:0
}
保险商实验室{
列表样式:无
}
李{
浮动:左;
宽度:120px;
高度:20px;
背景:粉红色
}
li>ul{
显示:无
}
李:悬停>ul{
显示:块;
位置:相对位置;
顶部:-20px;
左:120px;
背景:红色
}
#导航>垂直:悬停>垂直{
顶部:0px;
左:0px
}
李:悬停{
背景:红色
}
该代码在Firefox20下运行良好,但在IE10中,向上关闭1px,而在Chrome26中,向下关闭1px。我认为这是因为浏览器呈现列表布局的方式不同。任何帮助都将不胜感激
我建议从重置样式表开始,以便清除任何浏览器集样式。然后,每个浏览器将从一个公平的竞争环境开始。浏览器不会以不同方式呈现列表
有关重置样式表的更多信息,请参见谢谢您的回复。事实上,“线条高度”导致了这个问题。请看一看,以获得一些见解/灵感,…@lukeocom感谢您的回复。实际上,我做了一些与您提供的链接类似的事情。但是,它们只接受一层或两层子菜单。这一次,我试图为子菜单的任何层找到一个通用的解决方案,它可能没有那么漂亮,但对我来说很有挑战性:)是的,我也注意到了这一点。我使用一个站点生成了一个具有多个级别的css菜单。我将再次尝试查找该站点并将链接发布给您。生成的菜单并不像上面链接中的菜单看起来那么花哨,但是css确实如此。我想这就是它。。。我把结果菜单和反向工程的css,删除一切不需要的,并削减它,以具体的我的需要。它提供了一种非常干净的css方法。可能对你有用。
<!DOCTYPE HTML>
<html>
<head>
<title>Menu</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
li {
float: left;
width: 120px;
height: 20px;
background: pink
}
li > ul {
display: none
}
li:hover > ul {
display: block;
position: relative;
top: -20px;
left: 120px;
background: red
}
#nav > li:hover > ul {
top: 0px;
left: 0px
}
li:hover {
background: red
}
</style>
</head>
<body>
<ul id="nav">
<li>1
<ul>
<li>1.1
<ul>
<li>1.1.1
<ul>
<li>1.1.1.1</li>
<li>1.1.1.2</li>
<li>1.1.1.3</li>
<li>1.1.1.4</li>
</ul>
</li>
<li>1.1.2</li>
<li>1.1.3</li>
</ul>
</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
<li>1.5</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>