[英]CSS drop down <ul> <li> menu different sizes of each level
嗨,我無法弄清楚如何更改CSS菜單的子項的大小(父項具有圖像背景,子項應具有背景色)。 我嘗試了類似的東西:
ul > li > a:hover {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
但它們都與其他元素混合在一起。 你能幫我弄清楚嗎?
HTML:
<div id="menu">
<ul>
<li><a id="menu1" href="#">Parent1</a></li>
<li><a href="#">Parent2</a>
<ul>
<li><a href="#">Child1</a></li>
<li><a href="#">Child2</a></li>
<li><a href="#">Child3</a></li>
</ul>
</li>
<li><a href="#">Parent3</a></li>
<li><a href="#">Parent4</a></li>
<li><a href="#">Parent5</a></li>
</ul>
</div>
CSS:
#menu {
position:absolute;
top:133px;
left:0px;
width:900px;
height:50px;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
height:50px;
}
ul li a:hover {
background: #BBBBBB;
}
li:hover ul {
display: block;
position: absolute;
left:0px;
}
li:hover li {
float: left;
font-size: 11px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background: #CCC;
}
非常感謝您的提前幫助!
要將背景色添加到您的子菜單中:
ul li ul li {
// rules
}
您還可以將類添加到列表項中,以使其更易於管理。 例如,您可以將一個類添加到子菜單的ul中:
<li><a href="#">Parent2</a>
<ul class="sub-menu">
<li><a href="#">Child1</a></li>
<li><a href="#">Child2</a></li>
<li><a href="#">Child3</a></li>
</ul>
</li>
然后,您可以將CSS簡化為:
.sub-menu li {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
希望以下更改對您有用。 這是小提琴的鏈接 。 以下是您的CSS chagnes
#menu {
/*position:absolute;
top:0;
left:0px;*/
width:900px;
height:22px;
background-color:#000;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
line-height:22px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
ul li {
display: block;
float: left;
position:relative;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
line-height:22px;
}
ul li:hover a {
background: #BBBBBB;
}
ul li ul {
display: none;
widht:200px;
position:absolute;
left:0;
top:22px;
}
ul li ul li {
float: none;
font-size: 11px;
}
ul li ul li a {
background: #3b3b3b;
background-image:none!important;
}
ul li ul li a:hover {
background: #CCC;
}
ul li:hover ul {
display: block;
position: absolute;
left:0px;
}
最好保持相同的寬度,以免發生奇怪的移動。
嘗試這個
ul li ul li a:hover {
display:block;
background:#000;
float:left;
width:178px;
height:25px;
}
我不知道您希望結果如何看起來准確,但是您也可以在CSS中使用+選擇器,如下所示:
ul > li > a:hover+ {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
您在a:hover之后看到的+選擇器意味着將選擇緊接在a:hover-tag之后的下一個元素,在這種情況下,它將是ul
如果您希望ul是一個列表而不是像這樣的固定列表,則還可以使用+ ul來指定元素:
ul > li > a:hover+ul {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
這樣,您知道只會影響懸停的元素旁邊的元素
解
ul > li:hover > li > a {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
可以根據要求
ul > li:hover li a { }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.