Member Avatar for mgn2683

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
  • 195 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for LastMitch

Issue with drop down navigation background

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

Edited by LastMitch because: grammer
Member Avatar for johny_mplayer

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;*
}
commented: Nice CSS solution! +5
Member Avatar for mgn2683

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.