Hi I cannot figure out how to change the size of the child item of the CSS menu (The parent has an image background, the child should have a background color). I tried something like:
ul > li > a:hover {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
but it is all mixed with other elements. Can you please help me figure it out?
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;
}
Thank you very much for your help in advance!
To add a background color to your child sub menu:
ul li ul li {
// rules
}
You can also add class to your list items to make it more manageable. For example, you can add a class to the ul of your child menu:
<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>
Then you can simplify the css to:
.sub-menu li {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
Hope following changes will work for you. Here is the fiddle link . Followings are your 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;
}
It is good to retain the same width so that you can avoid that weird movement.
Try this
ul li ul li a:hover {
display:block;
background:#000;
float:left;
width:178px;
height:25px;
}
I don't know how you want the result to look exactly but you could also use the + selector in your css like this:
ul > li > a:hover+ {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
The + selector as you see after a:hover means that the next element directly after the a:hover-tag will be selected and is this case it will be a ul
You can also specify the element with +ul if you want the ul to be a list and not a flat one like this:
ul > li > a:hover+ul {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
Like this you know that you will only affect the element next to the hovered one
Solution
ul > li:hover > li > a {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It can be as per requirement
ul > li:hover li a { }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.