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:
#access li:hover > a, #access ul ul :hover > a, #access a:focus {background: -moz-linear-gradient(#d12229, #be0f16); background: -o-linear-gradient(#d12229, #be0f16);
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
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.
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;
}
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:
Could this help you?
You just need to change the styling on the UL and LI's from displaying vertically to being inline/horizontal.
Thanks Watson90! The problem was that I had a position: relative; in the access li
@Ricods, good stuff :)
One more thing, how to give a diffrent hover to the sub menu?
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;}
Haven't you already done that? It showing up as red for me...
yes, but the sub-menu gets a gradient that I don't want there. The gradient is for the parent
on hover of course :)
Try this?
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
I had to throw in a few !important tags but this got it working for me.
Your dropdown menu has a class of 'sub-menu' - so you can just target that...
Thank you so much ! :) This would take me a lot of time to figure this out
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.
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.
ok, I added the code. Thank you:)
Looks much nicer, good luck.