Jump to content


Photo
- - - - -

Customizing Drop Down Menus with CSS

drop down menu customizing drop down menu] custom ccs

Best Answer catrina , 11 March 2013 - 04:06 PM

The submenu items in the dropdown navigation use a different CSS selector for the <ul> list, so you'll need to use that selector to create a separate style for the submenu. When I inspect the dropdown with Firebug, I see that the <ul> list has the class submenu.

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 justinn

justinn

    Advanced Member

  • Members
  • 42 posts

Posted 11 March 2013 - 12:53 PM

Hi All,

 

Just working on a site for a client and it's almost done, but I can't for the life of me find where and how to change the look of the drop-down menus. 

 

I'm using NavClassic and removed most of the styling by setting the background color of the menu to transparent and then setting up a background image for each menu item.

 

My problem is now, the edits I made to the main menu bar have now also automatically been applied to the dropdown menus underneath.

 

The URL I'm working on is here: 

Please Login or Register to see this Hidden Content

If you mouse over the "About" menu, you'll see what I mean.

 

I managed to change the background for the first menu item to black, just as a test to see if I'd located the correct css selector, but it only seems to have changed the first menu item and ignored the rest, so that can't be right. As always, it's probably so simple, but I can't see it, and my client is on my back to get it live (Aren't they always).

 

Any help would be greatly appreciated! All I need to achieve is a grey background behind the dropdown options, possibly with a little transparency, and to remove the background image that it's carried over from my main menu from each of the submenu items. (It's the blue line to the left of each menu item.)

 

Here's my custom css so far:

 

Please Login or Register to see this Hidden Content

 

Many thanks in advance!

 

Justin



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 March 2013 - 04:06 PM   Best Answer

The submenu items in the dropdown navigation use a different CSS selector for the <ul> list, so you'll need to use that selector to create a separate style for the submenu. When I inspect the dropdown with Firebug, I see that the <ul> list has the class submenu.



#3 justinn

justinn

    Advanced Member

  • Members
  • 42 posts

Posted 11 March 2013 - 05:28 PM

Thanks Catrina :)

Got it working now :) just had to and an "li" to the code I was already trying to use.

 

Thanks

 

Justin







Also tagged with one or more of these keywords: drop down menu customizing, drop down, menu], custom, ccs