Grow your CSS skills. Land your dream job.

Navigation Menu – Making Drop Down Links Invisible & Visible On Mouseover?

  • MBM
    # July 14, 2012 at 9:23 pm

    I’ve modified a navigation menu and added links for the drop down. How do I hide them and make them visible on mouseover?

    #navigation {
    width: 100%;
    margin-left:-10px;
    height: 30px;
    position: relative;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    background-color: #2864c4;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    }

    #navigation ul {
    padding: 0;
    list-style: none;
    }

    #navigation li {
    list-style: none;
    display: block;
    float: left;
    width: 160px;
    height: 28px;
    padding-top:3px;
    text-align: center;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }

    #navigation li:first-child {
    border-left: 2px solid #ffffff;
    margin-left: 25%;
    }

    #navigation li:last-child {
    border-right: 2px solid #ffffff;
    margin-right:-30%;
    }

    #navigation li a {
    color: #fff;
    text-decoration: none;
    display:block;
    width:160px;
    margin-top:-1px;
    }

    /*hide drop down links?*/
    #navigation li ul {
    visibility: hidden;
    position: absolute;
    }

    #navigation li a:hover {
    background-color:#000000;
    border: 0;
    visibility: visible;/*display drop down links?*/
    }

    #navigation li .active {
    color: #066;
    }
    # July 14, 2012 at 9:42 pm

    Technically, what you’re doing is almost OK, except that you shouldn’t make them invisible by default and then visible on hover. Any item set to invisible still takes up space on the page, and can be interacted with — it just can’t be seen. When you set it to display:none, it will not be part of the page. It’s not there, and it can’t be interacted with (even though it’s still in the code).

    Give the #menu li ul the property display:none; by default and then give it display:block when you hover over the LI that contains it. So, in essence:

    #menu li ul {
    display:none;
    }

    #menu li:hover ul {
    display:block;
    }

    Of course there's a lot more to it, but that's basically the idea.

    Instead of display:none; and display:block;, some people position the submenu UL absolutely -- about -99999px by default (so it's off-screen) and then at 0 on hover.

    MBM
    # July 14, 2012 at 9:51 pm

    Thanks. I initially pasted code from the wrong menu. I’ve make the changes you suggested but the drop down items are still visible.

    #navigation {
    width: 100%;
    margin-left:-10px;
    height: 30px;
    position: relative;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    background-color: #2864c4;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    }

    #navigation ul {
    padding: 0;
    list-style: none;
    }

    #navigation li {
    list-style: none;
    display: block;
    float: left;
    width: 160px;
    height: 28px;
    padding-top:3px;
    text-align: center;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }

    #navigation li:first-child {
    border-left: 2px solid #ffffff;
    margin-left: 25%;
    }

    #navigation li:last-child {
    border-right: 2px solid #ffffff;
    margin-right:-30%;
    }

    #navigation li a {
    color: #fff;
    text-decoration: none;
    display:block;
    width:160px;
    margin-top:-1px;
    }

    /*hide drop down links?*/
    #navigation li ul {
    display:none;
    position: absolute;
    }

    #navigation li a:hover {
    background-color:#000000;
    border: 0;
    }

    #menu li:hover ul {
    display:block;
    }

    #navigation li .active {
    color: #066;
    }
    # July 14, 2012 at 9:59 pm

    Would need to see the HTML code of the menu as well. You’re using this structure, it should be fine:

    Make sure that the submenu UL is wrapped within the LI (closing the LI before the submenu starts is a common mistake).

    MBM
    # July 14, 2012 at 10:22 pm

    http://mbmitservices.co.uk/MMA/index.html



    I had the wrong name in the tag :


    #menu li:hover ul {

    Should be :


    #navigation li:hover ul {

    It’s working now but the styling is a mess.


    /*drop down styling*/
    #navigation li:hover ul {
    display:block;
    background-color: #2864c4;
    width:160px;
    margin-left:0px;
    padding:0px;
    float:left;
    }

    Any idea why the first link in the drop down isn’t in line with the other links? How do I position the links? Adjusting the margins isn’t working.

    # July 14, 2012 at 10:35 pm

    That’s because of there’s a left margin of 25% on #navigation li:first-child.

    Easy to override that for your submenu with:

    #navigation li ul li:first-child {
    margin-left: 0;
    }
    # July 14, 2012 at 10:41 pm

    That will fix it.


    #navigation li ul li:first-child {
    margin-left: 0px;
    }

    lol, damn lag. What @Senff said!

    # July 14, 2012 at 10:41 pm

    crap, accident.

    MBM
    # July 14, 2012 at 11:16 pm

    The problem is I’m using a full width menu. I added margin-left: 25% to position the links in line with the header. If I remove margin-left 25% the links float to the left. When I add a bottom border to the last child element the border bleeds over to the next link (contact), it’s 2 pixels instead of 1. I also want a 2 pixel left and right border on all drop down links. I’ve uploaded the code so you can see for yourself. I’m getting coding dyslexia!

    http://mbmitservices.co.uk/MMA/index.html

    /*Navigation styling */
    #navigation {
    width: 100%;
    margin-left:-10px;
    height: 30px;
    position: relative;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    background-color: #2864c4;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    }

    #navigation ul {
    padding: 0;
    list-style: none;
    }

    #navigation li {
    list-style: none;
    display: block;
    float: left;
    width: 160px;
    height: 28px;
    padding-top:3px;
    text-align: center;
    background-color: #2864c4;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }

    #navigation li:first-child {
    margin-top:3px;
    /*margin-left: 25%;*/
    }


    #navigation li:last-child {
    border-bottom:2px solid #ffffff;
    padding-bottom:3px;
    }

    #navigation li a {
    color: #fff;
    text-decoration: none;
    display:block;
    width:160px;
    margin-top:-1px;
    }

    /*hide drop down links*/
    #navigation li ul {
    display:none;
    position: absolute;
    }

    #navigation li a:hover {
    background-color:#000000;
    border: 0;
    }

    /*drop down styling*/
    #navigation li:hover ul {
    position:aboslute;
    display:block;
    width:160px;
    margin-left:-1px;
    padding-top:5px;
    float:left;
    text-align:left;
    border:0;
    }
    # July 14, 2012 at 11:38 pm

    You need to wrap your ul#navigation with a container element…that way, you can center the ul#navigation without worry…E.G.



    Then you can set your CSS on your #navWrap and center your ul#navigation:


    #navWrap {
    background-color:#2864C4;
    border-top:2px solid white;
    border-bottom:2px solid white;
    text-align:center;
    }
    #navigation {
    margin: 0 auto;
    }
    MBM
    # July 15, 2012 at 3:08 pm

    #navwrap created all sorts of problems but I managed to resolve the full width positioning issue via :

    http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html


    #navigation {
    display:table;/* Webkit Fix */
    width:100%;/* set width to stop FF from wrapping li's*/
    text-align:center; /* center list items*/
    word-spacing:-0.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    margin-left:-10px;
    list-style:none;
    background:#2864c4;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    }

    #navigation li {
    list-style: none;
    width: 160px;
    height: 28px;
    padding-top:3px;
    text-align: center;
    background-color: #2864c4;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    display:-moz-inline-box; /* FF2 and K-Meleon */
    display:inline-block;
    word-spacing:0; /* reset from parent ul*/
    }

    I have one minor issue. I have 7 drop down links. When the slider scrolls to the 3rd slide, a youtube video, the 7th link isn’t visible even thought I have set the z index to 2.


    #navigation li:hover ul {
    position:aboslute;
    display:block;
    width:160px;
    margin-left:-1px;
    padding-top:3px;
    float:left;
    text-align:left;
    border-bottom:2px solid #ffffff;
    z-index:2;
    }
    # July 15, 2012 at 7:23 pm

    You need to set the z-index on your slider.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

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