Wed, 2014-08-20 22:37
It never ends... I'm working on another Wordpress theme and I have the submenus styled exactly how I want them. However, they disappear upon hover. I have set all of my margin-tops to zero as stated on Stack previously but they still don't work properly. Here's the link to the site: tinyurl.com/ku6mlx7. Dropdowns can be seen under Artists.
My CSS is the following:
.top-nav { background-color: #444; min-height: 40px; } .top-nav ul { margin-bottom: 0; } .top-nav li { margin: 0 20px 0 0; padding: 0; float: left; display: inline-block; position: relative; } .top-nav li a { color: #aaa; font-size: 12px; line-height: 40px; } .top-nav li a:hover, .top-nav li.current-menu-item a { color: #fff; background-color: #444; } .top-nav ul li ul.sub-menu { display: none; margin-top:0px;} .top-nav ul li:hover > .sub-menu { display: block; position: absolute; height: 0px; margin-top:-5px; overflow: visible; margin-left:0px;} .top-nav li.menu-item ul li { display: block; position:relative; width: 100%; float: left; margin:0px; padding:5px 0 5px 10px; background-color:#444!important; border-bottom: 1px solid #faf3bf;} .top-nav ul li.menu-item ul li a { width: inherit; padding: 0;}
Wed, 2014-08-20 23:46
#1
Had to add: z-index: 1; to
Had to add:
z-index: 1; to .top-nav li.menu-item ul li
The H3 of the title was covering the dropdown. Hope this helps someone else.