weaverthemes vision theme drop down menu colours

jaye

I'm working on my website with a modified vision theme, I've got an issue with the drop down menu. i want to modify the background color and the font color. anyone knows if that's possible?

Thanks!
Jaye

el mourabbi

on 1292409536:

I'm working on my website with a modified vision theme, I've got an issue with the drop down menu. i want to modify the background color and the font color. anyone knows if that's possible?

Thanks!
Jaye

Hi Jaye,

This should work:

#navigation ul li ul li a{
color: red;
background: lime;
}

#navigation ul li ul li a:hover{
color: green;
background: orange;
text-decoration: none;
}

Replace the color names with html colors like #000FFF. I added the last line line to remove the underlining when hovering a submenu, delete it if you want to keep the underlining.

Hope this is what you're looking for!

Jeroen

jaye

thanks for trying to help out, i've been trying to work it out, but i think its a bit over my head,
i got a transparent background and a white hover, i think it looks best when they are both black.
could this problem be caused by the z-index of certain elements?

this is the actual code involved:

/* navigation */
#navigation { float:right; position:relative; z-index:10000;font-size:1.4em; }
#navigation li { float:left; list-style:none; position:relative; }
#navigation ul li a { color:#FFF; }
#navigation a { display:block; float:left; padding:10px; text-decoration:none; margin:0 1px; }
#navigation a:hover { text-decoration:underline; }
#navigation li a.current,#navigation a.currentAncestor { color:#000; }
#navigation ul li:first-child a { border:none; }

/* child - levels */
#navigation ul ul { display:none; left:0; position:absolute; top:13px; width:188px; z-index:-1; }
#navigation > ul ul{top: 16px;}
#navigation ul ul li a { border:1px solid #eee!important; border-bottom:none; color:#888; }
#navigation ul ul li a:hover { color:#555; background:#fff; }
#navigation ul ul li a.current{color: #333;}
#navigation ul li ul a { width:165px; height:auto; float:left; text-align:left; line-height:24px; padding:5px 10px; font-size:12px; min-height:24px; }
#navigation ul ul ul { top:auto; padding-top:0!important;background-image:none!important; }
#navigation ul li ul ul { left:187px; top:0; }
#navigation ul li:hover ul ul,#navigation ul li:hover ul ul ul,#navigation ul li:hover ul ul ul ul { display:none; }
#navigation ul li:hover ul,#navigation ul li li:hover ul,#navigation ul li li li:hover ul,#navigation ul li li li li:hover ul { display:block; }

/*

i'm really trying to understand this, but it seems quite complicated, hope you can help me out.
thanks,
Jaye

el mourabbi

Hi Jaye,

Let's take this step by step and forget about z-index

jaye

i got it to work this time.

what i did was: i added the "background" colour tag to what was already there and that did the trick.

this was really useful, i have a better understanding of the code structure and which pertains to what.

thanks for helping me out!