纯CSS下拉菜单:我有基本的功能,但如何让第二级li项以内联方式显示,而不是相互重叠?
我用这个:作为我的基本菜单,它在底部固定的菜单上工作得非常好。也就是说,我需要显示当您将鼠标悬停在菜单上方、居中和内联(在一行上)而不是在另一行上时显示的第二级列表项。你知道我需要修改什么才能让它工作吗?我为这件事非常生气纯CSS下拉菜单:我有基本的功能,但如何让第二级li项以内联方式显示,而不是相互重叠?,css,drop-down-menu,vertical-scrolling,Css,Drop Down Menu,Vertical Scrolling,我用这个:作为我的基本菜单,它在底部固定的菜单上工作得非常好。也就是说,我需要显示当您将鼠标悬停在菜单上方、居中和内联(在一行上)而不是在另一行上时显示的第二级列表项。你知道我需要修改什么才能让它工作吗?我为这件事非常生气 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Dro
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Dropup Demo</title>
<style type='text/css'>
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
</style>
</head>
<body>
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
下拉演示
#航行{
宽度:980px;
高度:38px;
边缘顶部:100px;
}
#导航李{
浮动:左;
位置:相对位置;
宽度:100px;
边框:1px纯红;
}#导航li:hover{背景:银色;}
#导航李a{
文本转换:大写;
颜色:白色;
填充:13px 33px;
线高:38px;
字体大小:11px;
}
#导航LIA:悬停{文本装饰:无;}
#导航LIUL{
位置:绝对位置;
显示:无;
z指数:1000;
最小宽度:100%;
左:-1px;
}
#导航li:悬停ul{
底部:20px;
显示:块;
背景:#eee;
}
#导航李宇莉{
背景:无;
宽度:100%;
}
#导航li ul li:悬停{
背景:无;
背景色:#2a51b5;
}
#导航li ul li a{
文本转换:大写;
颜色:白色;
填充:8px 10px;
线高:28px;
宽度:100%;
}
- 一,
- 二,
- 2.1
- 2.2
- 2.3
- 三,
- 四,
位置绝对
是它使ul位于该位置之上的原因
这是一个固定值。它不能是内联的,因为它的宽度=其父宽度的宽度,所以如果你想让它们成为内联的,你需要给出比其父宽度大的第二个ul宽度,那么它们的li可以在一行上 所以 当父对象是相对的,子对象是绝对的时,子对象的宽度不能大于其父对象的宽度,您需要手动将其放大
#navigation li ul {
/*position: absolute;*/
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation ul li ul{
width:400%; /* in this case it will be 4*100px */
}
#navigation ul li ul li{
display:inline-block
}