CODEWITHSUNDEEP
htmlcssxhtml
Anthony Reyna
Anthony Reyna

Reputation: 3

CSS - getting background color to fill drop down menu

New to CSS. I have a nav menu bar and I am trying to fill the background color (blue) in the drop down menu under "portfolio" when you hover over it. Any ideas? I think its because of that absolute?

CSS:

#nav, #nav ul {
float: left;
list-style: none;
box-shadow: 0px 1px 7px #000000;
background-color: #F5F1DE;
border-radius: 5px 5px 0px 0px;
z-index: 100;
}

#nav li a {
display: block;
padding: 16px;
text-decoration: none;
font-weight: bold;
color: black;
border-left: 1px solid #ccc;
font-size: 1em;
}

#nav li a:hover {
color: black;
background-color: #bbecff;
}

#nav li {
float: left;
}

#nav li ul {
position: absolute;
width: 11em;
left: -999em;
border-radius: 1px;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto; 
}

HTML:

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Portfolio</a>
    <ul>
        <li><a href="#">Weddings</a></li>
        <li><a href="#">Special Events</a></li>
        <li><a href="#">Holidays</a></li>
        <li><a href="#">Fresh Flowers</a></li>
        <li><a href="#">Balloon Sculptures</a></li>
    </ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

Upvotes: 0

Views: 4700

Answers (5)

Atif Azad
Atif Azad

Reputation: 527

give background color to the following 

 #nav li:hover ul, #nav li.sfhover ul

Upvotes: 1

xCoder
xCoder

Reputation: 11

U may also try this, I hav given an id to respective li

 <li id=blueColor>
        <li><a href="#">Weddings</a></li>
        <li><a href="#">Special Events</a></li>
        <li><a href="#">Holidays</a></li>
        <li><a href="#">Fresh Flowers</a></li>
        <li><a href="#">Balloon Sculptures</a></li>
    </ul>

In CSS

#blueColor:hover{
backgroung-color:blue
}

Upvotes: 0

Harish Ambady
Harish Ambady

Reputation: 13121

Add float:left only for first child of ul.Update your following line of css:

#nav li {float: left;}

to

#nav > li {float: left;}

Here is the fiddle

Upvotes: 1

Naveen D Almeida
Naveen D Almeida

Reputation: 877

Try this, hope it will work for u

add the CSS

#nav li ul{
background:#0066CC;
}

Upvotes: 1

Linus Caldwell
Linus Caldwell

Reputation: 11058

#nav li:hover ul, #nav li.sfhover ul {
    background-color: #bbecff; 
}

But with that said: Why don't you apply the background-color to the submenu ul directly?

Upvotes: 0

Related Questions