Styling main-nav sub-menu

[christian_w 0]

On my page http://krimtheo.criminologia.de each sub-menu item beneath the heading "Kriminalit?¤tstheorien" displays a 15px wide border on the left side on mousehover.

#primary-nav .menu-item-110 a:hover{
			border-left: 15px solid #FF0000;}

I am quite happy with that result but if you take a close look you'll notice that a) the upper edge is not totally straight but a little chamfered and the text links indent quite a bit on mouseover. I'd very much appreciate suggestions how to prevent these issues.

[catrina 103]

What custom CSS did you use to make that look possible?

[christian_w 0]

Hey Catrina, I am using a different color for each menu-item. E.g.:

#primary-nav .menu-item-110 a:hover{
			border-left: 15px solid #FF0000;}
	#primary-nav .menu-item-111 a:hover{
			border-left: 15px solid #FF7400;}

That's it. There are no more modifications on that submenu.

[kastelic 6]

Try reducing the left padding on the hover stated anchor tags like this:

#primary-nav a:hover {padding-left:2px;}

As for the chamfered edge, I'm mystified. Perhaps someone else knows the answer?

[christian_w 0]

One of two problems solved. ... and again: Jimmy, thank you!

[peterluit 0]

Hi Christian, I just posted a question in this forum about integrating icons in the menubar, I see that you did it and even colored the submenus. Could you please explain to me how you did that? (You could also e-mail me at peter[at]luit[dot]nl) Thanks! Peter

[christian_w 0]

Hi Peter, just have a look at this posting: http://www.pagelines.com/forum/topic/7225

[kastelic 6]

#primary-nav .menu-item a{border-top:none;}

I think this is a common thing with thick borders meeting thin borders and it depends on how each browser draws their borders.

[christian_w 0]

You really deserve your Karma-points here! Thanks so much, Jimmy. The menu looks good now in Firefox, too.