Html 向CSS水平下拉菜单中的子菜单项添加填充
我如何添加一些填充:5px;到我的所有子菜单项。如何修改下面的CSS编码来达到这个目的Html 向CSS水平下拉菜单中的子菜单项添加填充,html,css,Html,Css,我如何添加一些填充:5px;到我的所有子菜单项。如何修改下面的CSS编码来达到这个目的 /*HORIZONTAL DROP-DOWN MENU */ #menu{ padding:0; margin:0; position: fixed; top: 30px; left: 0px; font-size: 8pt; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style:
/*HORIZONTAL DROP-DOWN MENU */
#menu{
padding:0;
margin:0;
position: fixed;
top: 30px;
left: 0px;
font-size: 8pt;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:120px;
height: 20px;
display: block;
text-decoration:none;
line-height: 20px;
background-color: #A9BBD3;
color: #FFF;
}
#menu li a:hover{
background-color: #446087;
}
#menu ul ul{
position: absolute;
top: 20px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu > ul > li > a{
text-align:center;
}
<div id="menu">
<ul>
<li><a href="#nogo">File</a>
<ul>
<li><a href="#nogo">Save</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<li><a href="#nogo">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo">Edit</a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">View</a>
<ul>
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
</ul>
<ul>
</div>
/*水平下拉菜单*/
#菜单{
填充:0;
保证金:0;
位置:固定;
顶部:30px;
左:0px;
字号:8pt;
}
#菜单ul{
填充:0;
保证金:0;
}
#菜单里{
位置:相对位置;
浮动:左;
列表样式:无;
保证金:0;
填充:0;
}
#菜单李a{
宽度:120px;
高度:20px;
显示:块;
文字装饰:无;
线高:20px;
背景色:#A9BBD3;
颜色:#FFF;
}
#菜单a:悬停{
背景色:#446087;
}
#菜单{
位置:绝对位置;
顶部:20px;
可见性:隐藏;
}
#菜单ul li:悬停ul{
能见度:可见;
}
#菜单>保险单>保险单>保险单>保险单{
文本对齐:居中;
}
-
-
-
这就是你要找的吗
jsfiddle.net/MP5km/2/
刚刚添加了这个css:
#menu li li a { padding-left: 5px; width:115px; }
您可以将以下内容添加到CSS中:
#menu ul ul li a {
width: 115px;
padding-left: 5px;
}
请参阅。效果非常好!我想在css=\的世界里,给猫剥皮的方法比给猫剥皮的方法更多。非常感谢!工作也很好。再次感谢大家的帮助。我喜欢你们在这里。谢谢你的知识和时间。