I’m trying to style my wordpress sub-menu with CSS to show only when a user hovers the “Color” menu item but I haven’t succeed so I need some help please.
Here’s how my menu looks like at this state:
The sub-menu shows all the time and there is a weird space after the “Color” menu item. Also, the sub-menu items are displayed one after another and not one below other like a drop-down menu should be.
Could you please help me out?
I’m aware that there are some similar questions to this one but they were of no help.
EDIT: added current CSS menu code that I have in my style.css
nav.main { float: left; }
nav.main li { float: left; margin-right: 11px; }
nav.main li.last-child { margin-right: 0; }
nav.main li a {
color: #7A0018;
display: block;
font-size: 13px;
padding: 50px 7px 22px 7px;
text-decoration: none;
}
nav.main li a:hover { background: #fbf6dc; }
nav.main li.current-menu-item a { background: #fbf6dc; }
where is css for your child list items ? you haven’t use display property for those sub-menu which should be done none first then only on hovering them you have to change display property ‘block’.
You have given margin-right property 11px; where as ul on default also occupies some margin.
Can you also provide your html frame (code)?