1 reply [Last post]
efpeterson
efpeterson's picture
Offline
Regular
Last seen: 6 years 4 weeks ago
Timezone: GMT-4
Joined: 2012-12-27
Posts: 20
Points: 29

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;}

efpeterson
efpeterson's picture
Offline
Regular
Last seen: 6 years 4 weeks ago
Timezone: GMT-4
Joined: 2012-12-27
Posts: 20
Points: 29

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.