CODEWITHSUNDEEP
htmlcss
BoneStarr
BoneStarr

Reputation: 195

Simple nav bar in css issues, probably a really easy answer

so im just trying to make a simple nav bar menu that has a 4px border under it when you hover over it. This in itself isn't hard to do, but im trying to style it so that the different menu elements are in different colours. this is what I have so far:

HTML

    <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About</a></li>
<li><a href="#" class="portfolio">Portfolio</a></li>

</ul>
</div>

CSS

/*Menu*/

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#navlist a:hover { color: #000; }

#navlist  li .home {
color: #d43f3f;
}

#navlist li .home a:hover
{
border-bottom: 4px solid #d43f3f;
padding-bottom: 2px;
background: transparent;
color: #d43f3f;
}
#navlist li .about {
color: #00ace9;
}

#navlist  li .about a:hover
{
border-bottom: 4px solid #00ace9;
padding-bottom: 2px;
background: transparent;
color: #00ace9;
}
#navlist li .portfolio {
color: #6a9a19;
}

#navlist li .portfolio a:hover
{
border-bottom: 4px solid #6a9a19;
padding-bottom: 2px;
background: transparent;
color: #6a9a19;
}

It shows the different colours but the hover feature isnt working with my 4px border... :(

Upvotes: 0

Views: 143

Answers (2)

Tom Jenkin
Tom Jenkin

Reputation: 2065

You have your selectors wrong

#navlist li .about should be #navlist li a.about for example

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13344

It was really simple. You have two declarations in your CSS.

#navlist li .portfolio a:hover {

.portfolio IS the a element. The declaration you've used implies: a which is child of .portfolio which is child of li which is child of #navlist. You've gone too deep.

This will work:

#navlist li a.portfolio:hover {

Working fiddle: http://jsfiddle.net/jnbBz/1/

Full corrected CSS:

/*Menu*/

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#navlist a:hover { color: #000; }

#navlist  li .home {
color: #d43f3f;
}

#navlist li .home:hover
{
border-bottom: 4px solid #d43f3f;
padding-bottom: 2px;
background: transparent;
color: #d43f3f;
}
#navlist li .about {
color: #00ace9;
}

#navlist  li .about:hover
{
border-bottom: 4px solid #00ace9;
padding-bottom: 2px;
background: transparent;
color: #00ace9;
}
#navlist li .portfolio {
color: #6a9a19;
}

#navlist li a.portfolio:hover
{
border-bottom: 4px solid #6a9a19;
padding-bottom: 2px;
background: transparent;
color: #6a9a19;
}

Upvotes: 1

Related Questions