0

I am having trouble with the dropdown I am working on. I'm trying to add the dropdown, and changed up all the code that I used for the original navigation. The problem is, the rollover state, which shows a background color, is doubled in height. My goal is to have the dropdown hover state background only be as wide as the text link, not all of them be one width. The problem can be seen at Click Here

This is my first time experimenting with a drop down menu using css, any pointers or help is greatly appreciated!

4
Contributors
4
Replies
5
Views
4 Years
Discussion Span
Last Post by JorgeM
0

Issue with drop down navigation background

I'm not familiar with CSS but can you provide the code?

Edited by LastMitch: grammer

1

Hello mgn2683.
First of all delete from #header the line height:

#header {
    background: none repeat scroll 0 0 #FBFBFB;
    color: #FBFBFB;
    height: 80px;
    *line-height: 80px;*
}

then give your ul some margin to come in the right place:

#nav {
    background: none repeat scroll 0 0 transparent;
    float: right;
    font-family: Geneva,Sans-Serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    list-style: none outside none;
    *margin-top: 50px;*
    padding-right: 20px;
}

and the last thing to do is delete the padding you gave on the over a:hover:

#nav a:hover {
    background-color: #3A3A3A;
    color: #62A2FF;
    *padding: 7px 15px;*
}
Votes + Comments
Nice CSS solution!
0

That's perfect! I was wondering if the code from the screen.css file for the banner was affecting it, which it was! Thanks!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.