Changing wordpress access from dropdown to dropline menu

[Ricods]

Hi,
I’m stuck with this problem. I need to change the wordpress access menu from a dropdown to dropline. Any ideas how to do that? Here is a link to the page:

[Watson90]

Could [this help](http://codepen.io/Watson90/full/KupHs “”) you?

[Ricods]

Thanks Watson90! The problem was that I had a position: relative; in the access li

[Watson90]

@Ricods, good stuff :)

[Ricods]

One more thing, how to give a diffrent hover to the sub menu?

[Ricods]

#access li:hover > a, #access ul ul :hover > a, #access a:focus {background: -moz-linear-gradient(#d12229, #be0f16); background: -o-linear-gradient(#d12229, #be0f16);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d12229), to(#be0f16)); /* Older webkit syntax */ background: -webkit-linear-gradient(#d12229, #be0f16); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d12229′, endColorstr=’#be0f16′); color:#fff; border-top-left-radius:5px; border-top-right-radius:5px;}

[Watson90]

Haven’t you already done that? It showing up as red for me…

[Ricods]

yes, but the sub-menu gets a gradient that I don’t want there. The gradient is for the parent

[Ricods]

on hover of course :)

[Watson90]

Try this?

#access li:hover a, #access ul ul :hover > a, #access a:focus {background: -moz-linear-gradient(#d12229, #be0f16); background: -o-linear-gradient(#d12229, #be0f16);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d12229), to(#be0f16)); /* Older webkit syntax */ background: -webkit-linear-gradient(#d12229, #be0f16); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d12229′, endColorstr=’#be0f16′); color:#fff; border-top-left-radius:5px; border-top-right-radius:5px;}

[Ricods]

It’s almost what I’m looking for. What I want to do is:
– parent menu on hover with gradient and rounded top corners
– sub menu when shown: background color:# be0f16; wit no rounded corners. And on hover a text-decoration:underline;
I just don’t know how to divide those two menus from each other

[Watson90]

I had to throw in a few !important tags but this got it working for me.

#access {background:#fff; border-bottom:1px solid #e8e8e8; border-top:1px solid #e8e8e8; clear:both; display:block; float:left; margin:0 60px 10px 60px; width:821px;}
#access ul {font-size:14px; list-style:none; margin:0;}
#access li {float:left;}
#access a {color: #525252; display:block; line-height: 3.333em; padding: 0 1.2125em; text-decoration: none;}
#access ul ul {display:none; float:left;}
#access ul ul a {display:inline; width:100%; float:left; background:#be0f16; color:#525252; height:auto; color:#fff;}
#access li:hover a {background: -moz-linear-gradient(#d12229, #be0f16); background: -o-linear-gradient(#d12229, #be0f16);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d12229), to(#be0f16)); /* Older webkit syntax */ background: -webkit-linear-gradient(#d12229, #be0f16); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d12229′, endColorstr=’#be0f16′); color:#fff; border-top-left-radius:5px; border-top-right-radius:5px;}
#access ul li:hover > ul {display:inline; position: absolute;}
.sub-menu a { background: #be0f16!important; border-radius: 0!important; }
.sub-menu a:hover { text-decoration: underline!important; }

Your dropdown menu has a class of ‘sub-menu’ – so you can just target that…

[Ricods]

Thank you so much ! :) This would take me a lot of time to figure this out

[Watson90]

You’re welcome @Ricods.

Although it’s working. I would highly recommend that you try and make your navigation bar CSS a bit more simplified as it’s never a good thing to use the !important tags.

[Watson90]

In addition, you seem to have a weird problem when hovering over the last item in your hover menu. I think it’s because you have set a width of 100%, so replace it with this and it looks a lot neater.

#access ul ul a {
display: inline;
float: left;
background: #BE0F16;
color: white;
}

[Author]

Posts