Horizontal dropdown submenu problem

I am using this styling here to try get horizontal dropdown submenu to work.

via jsfiddle: http://jsfiddle.net/riddleme/q2c1b7yn/

As you can see at the contact link, as soon as you try to go to the links below, it disappears to oblivion, as in can’t click the link

See if this accomplishes what you wish. It positions the submenu elements offscreen instead of using display:none;

It’s a “working page”. Copy it to a file and try it.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/horizontal-dropdown-submenu-problem/205415
cssbonding
Oct 22, 2015, 7:10 PM
-->
    <style type="text/css">

#menu {
    list-style:none;
    display:inline-block;
    font-family:Arial, Verdana;
    font-size:14px;
    position:relative;
    padding:0;
    margin:0;
}
li ul {
    list-style:none;
    position:absolute;
    left:-9999px;
    padding:0;
    margin:0;
}
ul li {float:left;}
li a {
    display:block;
    text-decoration:none;
    color:#fff;
    border-top:1px solid #fff;
    padding:5px 15px 5px 15px;
    background:#1e7c9a;
    margin-left:1px;
    white-space:nowrap;
}
li a:hover {background:#bbb;}
li:hover ul {left:0px;}
/* right aligns Contact submenu */
#menu > li:last-child:hover ul {
    left:auto;
    right:0;
    width:auto;
}
/* prevents Products submenu from wrapping.  Delete if wrap is OK. */
#menu > li:nth-child(3):hover ul {margin-right:-60%;}

li:hover a {background:#3b3b3b;}
li li {font-size:11px;}
li li a:hover {background:#ccc;}

ul:after {  /* contain floats*/
    content:"";
    clear:both;
    display:block;
    height:0;
    visibility:hidden;
}
    </style>
</head>
<body>

<div>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">The Team</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Vision</a></li>
            </ul>
        </li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Cozy Couch</a></li>
                <li><a href="#">Great Table</a></li>
                <li><a href="#">Small Chair</a></li>
                <li><a href="#">Shiny Shelf</a></li>
                <li><a href="#">Invisible Nothing</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">Happy Stuff</a></li>
                <li><a href="#">Nonsensical rubbish</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
1 Like

Thanks it works, albeit, I almost got something I wanted to by changing

li:hover ul {
display: block;
position: absolute; 
left:0px;

}

to

li:hover ul {
display: block;
position: relative; 
left:0px;

}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.