Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #38915
    MBM
    Participant

    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;
    }
    #106107
    Senff
    Participant

    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.

    #106109
    MBM
    Participant

    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;
    }
    #106112
    Senff
    Participant

    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).

    #106114
    MBM
    Participant

    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.

    #106116
    Senff
    Participant

    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;
    }
    #106120
    MBM
    Participant

    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;
    }
    #106153
    MBM
    Participant

    #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;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.