CSS Help for my Nav Bar

Question

I have prepared a fiddle of my nav bar:

http://jsfiddle.net/88r9G/

At the moment, the hover bottom-border is narrower than the active state and I can't see how to fix it and was wondering if the gurus here could offer some help?

HTML

<!-- Forgive the messy markup - wordpress output -->
<div class="wpbook_header">
    <div id="underlinemenu" class="clearfix">
       <ul>
           <li class="page_item page-item-67 current_page_item"><a id="load-home-page" href="#">Home</a></li>
           <li class="page_item page-item-69"><a id="load-blog-list" href="#">The Blogs</a></li>
           <li class="page_item page-item-60"><a id="load-authors-page" href="#">Meet the Bloggers</a></li>
           <li class="page_item page-item-2"><a id="load-gallery" href="#">Gallery</a></li>
           <li class="page_item page-item-271"><a id="load-faqs" href="#">FAQs</a></li>
           <li class="page_item page-item-168"><a id="load-compform" href="#">Competition</a></li>                        
       </ul>
   </div>
</div>​

CSS

#underlinemenu {
    font-family: arial, helvetica;
    padding: 0;
    margin: 0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul {
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -1px 0 -30px 0;
}

#underlinemenu ul li {
    display: inline;
    float: left;
    color: white;
    padding: 21px 30px 0px 8px;
}

.current_page_item {
    color: white;
    padding: 21px 10px 15px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 5px solid white;
}

#underlinemenu ul li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

​

Also, if anyone can give advice on how to turn this into a lava-lamp style menu (where the bottom-border animates to be under the hovered element) then that would be amazing but if not, I can save it for a later question.

Answer 1

Simple answer using Css Selectors:

#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

Hope it helps!

Answer 2

You are currently applying the white line of the active item to the li, while you are applying the green line of the hover item to the a. Cause you have padding in your li, the a has not got the same with as his parent, nad therfore the bottom border is not as wide. There are a few solutions:

• apply the hover effect for the border bottom to the li. Note that you will have to apply the color of the text in a different selector, cause it will not be triggered by the hover of the li as a do not inhereit color from there parent.
• remove the padding left and right from your li, to make the nested a have the same width. Note that this is the best solution imo cause otherwise you will have a hover effect at the edges of the li, where clicking will not will not trigger the link. Also big links are better, definitly on tablets and stuff. Also you will have to set the active state border to the a as well. I updated your fiddle to demonstrate what i mean: http://jsfiddle.net/88r9G/8/

As for the effect, i do not really understand what you are after. Perhaps you can try to demonstrate something, or indeed post a new question with a detailed explanation...

Answer 3

I made li and a as block elements with green and blue background. The area every li element takes is equal to area which according a element takes. But when we hover then we change height of a element.

As variant (See DEMO: http://jsfiddle.net/88r9G/7/):

#underlinemenu {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#underlinemenu ul {
    width: 770px;
    height: 57px;
}

#underlinemenu ul li {
    display: block;
    float: left;
    height: 57px;
    background-color: #408261;
}

#underlinemenu .current_page_item {
    background-color: white;
}

#underlinemenu .current_page_item a {
    height: 52px;
}

#underlinemenu ul li a {
    display: block;
    height: 57px;
    padding: 0px 10px 0px 10px;
    color: white;
    background-color: #242129;

}

#underlinemenu ul li a:hover {
    height: 52px;
    color: #408261;
}
​

Answer 4

I've removed a lot of what I think is unnecessary styling - see an updated JSFiddle here. Of particular note:

• All of the padding/margins are now on one element.
• We're changing the border on the li element on hover, not the a element.

As for animations, I'd look into CSS3 animation and transforms if you're just developing for modern browsers, otherwise JavaScript animation is likely your best bet.