remember me
Register | Forgot Login

Forums > Help > CSS class for dropdown links

Mel has a subpage on her profile under The Gypsy called Visuals. But when hovering over the first link, the box which pops up is completley white because the links in the header are white. If I put the mouse on the link itself it shows up from the hover color effect, but I'm having difficulties figuring out which class defines the background color of the dropdown link.

If someone knows, please let me know. :) I'm anxious to fix this.

The dropdowns are in an unordered list (ul) with a class of .nestedPages. For finer control, keep in mind that a list contains list items (li), and inside each list item is the actual link (a).

Here's the snippet of code used in the minimalist templates to color the dropdowns. You'll notice that this version will do the navigation drown down and the toolbar dropdown at once. Just swap in the colors you'd prefer. :)

Code:
#toolbar ul#toolbar-dropdown-nav a,#charheader ul.nestedPages a {color: #000;text-decoration: none;} ul#toolbar-dropdown-nav, #charheader ul.nestedPages {background-color: #ffffff;} ul#toolbar-dropdown-nav li, #charheader #alltabs ul.nestedPages li{padding:5px 20px;} #toolbar ul#toolbar-dropdown-nav .dropdown-hover,#charheader ul.nestedPages .dropdown-hover {background: #CCCCCC;} #toolbar ul#toolbar-dropdown-nav .dropdown-hover a,#charheader ul.nestedPages .dropdown-hover a {color: #ffffff;} .currentPage {font-weight: bold;} .currentPage li {font-weight: normal;}

Actually, since you appear to be building a modification of Minimalist purple, here's the snippet of code from the original Minimalist Purple:

Code:
#toolbar ul#toolbar-dropdown-nav a,#charheader ul.nestedPages a {color: #342152;text-decoration: none;} ul#toolbar-dropdown-nav, #charheader ul.nestedPages {background-color: #ffffff;} ul#toolbar-dropdown-nav li, #charheader #alltabs ul.nestedPages li{padding:5px 20px;} #toolbar ul#toolbar-dropdown-nav .dropdown-hover,#charheader ul.nestedPages .dropdown-hover {background: #64409F;} #toolbar ul#toolbar-dropdown-nav .dropdown-hover a,#charheader ul.nestedPages .dropdown-hover a {color: #ffffff;} .currentPage {font-weight: bold;} .currentPage li {font-weight: normal;}

Kim wrote:
Actually, since you appear to be building a modification of Minimalist purple, here's the snippet of code from the original Minimalist Purple:

Code:
#toolbar ul#toolbar-dropdown-nav a,#charheader ul.nestedPages a {color: #342152;text-decoration: none;} ul#toolbar-dropdown-nav, #charheader ul.nestedPages {background-color: #ffffff;} ul#toolbar-dropdown-nav li, #charheader #alltabs ul.nestedPages li{padding:5px 20px;} #toolbar ul#toolbar-dropdown-nav .dropdown-hover,#charheader ul.nestedPages .dropdown-hover {background: #64409F;} #toolbar ul#toolbar-dropdown-nav .dropdown-hover a,#charheader ul.nestedPages .dropdown-hover a {color: #ffffff;} .currentPage {font-weight: bold;} .currentPage li {font-weight: normal;}

That snippet actually fixed it! I modified the template before the dropdown menus were implemented, so that probably explains why I was missing that code. :) Thanks!!

I suspect you're right. :) Glad it's fixed now!

Moderators: Darth_Angelus, Ben, SeraphicStar, Copper_Dragon, Loki


Forums > Help > CSS class for dropdown links