Grow your CSS skills. Land your dream job.

Changing wordpress access from dropdown to dropline menu

  • # December 4, 2012 at 5:10 am

    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:

    # December 4, 2012 at 5:24 am

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

    # December 4, 2012 at 5:24 am

    You just need to change the styling on the UL and LI’s from displaying vertically to being inline/horizontal.

    # December 4, 2012 at 5:37 am

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

    # December 4, 2012 at 5:41 am

    @Ricods, good stuff :)

    # December 4, 2012 at 5:57 am

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

    # December 4, 2012 at 5:58 am

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

    # December 4, 2012 at 6:20 am

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

    # December 4, 2012 at 6:22 am

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

    # December 4, 2012 at 6:23 am

    on hover of course :)

    # December 4, 2012 at 6:27 am

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

    # December 4, 2012 at 6:35 am

    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

    # December 4, 2012 at 6:44 am

    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…

    # December 4, 2012 at 6:56 am

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

    # December 4, 2012 at 6:59 am

    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.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".