CODEWITHSUNDEEP
htmlcss
user2860771
user2860771

Reputation: 1

Navbar hover drop down padding

I have a drop down nav menu that shows up when you hover over a specific nav item. Everything works correctly except for the "videos" drop down. The hover color change doesn't extend fully to the right. This is obviously because of the padding that is set. The problem is that I don't know how to fix this without messing with the "photography" item. I feel like an idiot, but I cannot for the life of me figure out how to get this to work. Fiddle

CSS:

* {
padding: 0;
margin: 0;
}

}
ul, ol, dl {
padding: 0;
margin: 0;
}
nav {
background-color: #bac9a9;
height: 35px;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
width: 460px;
margin: auto;
}
ul#menu:after {
content: "";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 30px;
}
ul#menu li {
float: left;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 5px 25px;
margin: 0px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
position: absolute;
background-color: #bac9a9;
z-index: 1;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: solid;
border-width: 2px;
border-color: #a6b396;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}

HTML:

<nav>
<ul id="menu">
    <li><a href="index.html" class="selected-page">about</a></li>
    <li id="sub"><a href="#">work</a>
        <ul>
            <li><a href="#">videos</a></li>
            <li><a href="#">photography</a></li>
        </ul>
    </li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
</ul>
</nav>

Upvotes: 0

Views: 990

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240968

Make it a block element, forcing it to fill the parent.:

ul#menu > li > ul > li > a {
    display: block;
}

jsFiddle here - it works.

Upvotes: 1

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

See this Demo

You just need to add hover bg color to the dropdown list.

ul#menu li#sub ul li:hover {
    background-color: #b2c1a2;
}

Upvotes: 1

Related Questions