Home/ Questions/Q 6987267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:54:53+00:00

I am trying to do a menu in CSS with a Unordered List UL,

  • 0

I am trying to do a menu in CSS with a Unordered List UL, I have it almost working correctly.

I am having a little trouble, if you run the code below or look at it on the JSFiddle link here http://jsfiddle.net/hgBDV/1/ You will see there is a Horizontal menu, when you hove the 2nd to last item labeled “More” there is a Sub-menu.

That sub-menu is what I need help with, right now when you hover the “Menu” list item, the sub-menu becomes visible on the screen however you are unable to hover of the sub-menu.

Please help me correct this issue

<div id="nav-wrapper">
    <ul>

        <li><a href="">Link</a></li>
        <li><a href="">Link 2</a></li>        
        <li><a href="">Link 3</a></li>

        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
        <li><a href="">More</a>
            <ul>
                <li><a href="">Sub Link 1</a></li>
                <li><a href="">Sub Link 2</a></li>
                <li><a href="">Sub Link 3</a></li>
                <li><a href="">Sub Link 4</a></li>
                <li><a href="">Sub Link 5</a></li>
            </ul>
        </li>
        <li><a href="">Link 7</a></li>

    </ul>
</div>

css

<style type="text/css">
#nav-wrapper ul {
    width: 700px;
    float: right;
    margin: 0;
    list-style-type: none;
}
#nav-wrapper ul li {
    vertical-align: middle;
    display: inline;
    margin: 0;
    color: black;
    list-style-type: none;
}
#nav-wrapper ul li a {
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    font-size: 13px;
    color: #666;
    padding: 5px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav-wrapper ul li a:hover {
    color: #fff;
    background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
    color: #666;
}

/* Hide Sub-menus */
#nav-wrapper ul ul,
#nav-wrapper ul li:hover ul ul,
#nav-wrapper ul ul li:hover ul ul{
    display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul,
#nav-wrapper ul ul li:hover ul,
#nav-wrapper ul ul ul li:hover ul{
    display: block;
    margin:0;
    padding:0px 2px 2px 0px;
    border-color:#AAAAAA;
    border:1px;
    border-style:solid;
}
</style>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/hgBDV/2/

    You are having trouble because the line-height is 45px but your text-size is 13px. The sub-menu shows up when you hover over the ‘more’ link, but when you move your mouse outside of the bounds of the ‘more’ link, the sub-menu is no longer displayed. While you have set the margin to 0px, the line-height is allowing for a 20px gap. In my ‘fix’, i have set the line height to 0px. Google “css suckerfish” for an already invented wheel.

    • 0