CODEWITHSUNDEEP
htmlcssmenuhover
user1640474
user1640474

Reputation:

Making drop-down style menus stay when not hovering over them

I found a guide to make drop-down menus, and it said that when you would stopped hovering on the main menu item, the drop-down menus would stay fixed. However, my menu just disappears, making it impossible to press the items!

As you can see, it's the Music menu bit that has the drop-down (or in this case, "drop-right") menu.

Fiddle here: http://jsfiddle.net/Gb2aS/

Code here:

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <title>Home</title>
</head>
<body>
    <div ID="menubox">
        <ul>
        <li><a href="http://folk.ntnu.no/arnstekl/" class="link">Home</a></li>
        <li><a href="#" class="link">Music</a>
            <ul>
                <li><a href="https://soundcloud.com/arnsteinkleven/" class="link">My music</a></li>
                <li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link">The Joao Gilberto project</a></li>
           </ul></li>
        <li><a href="https://www.github.com/arnstein" class="link">Github</a></li>

        <li><a href="http://www.flickr.com/photos/92472314@N03/" class="link">Pictures</a></li>

        </ul>

    </div>
    <div ID="circle">
        <p ID="title"> A <br> r <br> n <br> s <br> t <br> e <br> i <br> n </p>
    </div>
    </body>
</HTML>

CSS:

#menubox
{
    width: 8%;
    height: 30%;
    border: 10% solid #C7D93D;
    border-radius: 5%;
    position: fixed;
    margin-top: 12%;
    margin-left: 18%;
    font-family: Ubuntu, Lucida console, Futura;
    list-style: none;
    float: left;
}


#menubox ul li a
{
    text-align: left;
    font-size: 200%;
    color: #FFF0A5;
}

#menubox ul li
{
    color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
    float: left;
    margin-right: 10px;
    position: relative;
}

#menubox ul
{
    color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
}

#menubox ul ul
{
    position: absolute;
    left: -9999px;
    list-style: none;
}

#menubox ul ul li
{
    float: left;
    margin-left: 40%;
    position: relative;
    font-size: 60%;
    text-align: left;

}

#menubox ul ul a
{
    white-space: nowrap;
}

#menubox ul li:hover a
{
    text-decoration: none;
    color: #FFB03B;
} 

#menubox ul li:hover ul
{
    left: 0;
}

#menubox ul li:hover ul a
{
    text-decoration: none;
    color: #FFB03B;
}

#menubox ul li:hover ul li a:hover
{
    color: #FFB03B;
}


div p
{
    color: #FFF0A5;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin-top: 300px;
    line-height: 60px;
}


#circle
{
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background-color: #B64926;
    width: 500px;
    height: 500px;
    display: block;
    position: fixed;
    margin-top: 9%;
    margin-left: 52%;
    text-align: center;
}

#title
{
    text-color: #FFF0A5;
    font-size: 350%;
    display: inline;
    text-align: center;
}

body
{
    height: 100%;
    width: 100%;
    background-color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
}

.link
{
    text-color: #FFF0A5;
    text-decoration: none;
    text-align: left;
}

Upvotes: 4

Views: 3700

Answers (3)

relic
relic

Reputation: 1704

The problem is because your sub list is offset, so there is deadspace that the cursor has to pass through from the main menu item, and the submenu. This will fix your issue:

#menubox ul li:hover ul
{
    left: 0;
    top: 0;
    z-index:100;
}

As Daniel Gimenez was explaining above, the reason why the submenu stays visible is because it is a child of the main ul item, and so if you keep your cursor over the submenu the browser counts that as maintaining your cursor over the original menu item as well, and the :hover css persists.

It works pretty well for dropdown/popout menus because even if the child object is physically displayed outside of its parent, it is still "inside" the parent from a code-point-of-view. But if there is any physical gap between the two and the mouse crosses over that gap, the :hover rule is deactivated and the submenu disappears.

Upvotes: 2

echolocation
echolocation

Reputation: 1120

I've added some padding to the list that pops up, essentially creating a block around it. While your mouse is on that block, it won't dissapear.

http://jsfiddle.net/Gb2aS/5/

#menubox ul ul
{
    position: absolute;
    left: -9999px;
    padding: 100px;
    list-style: none;
}

there is however the issue of the drawn circle being placed overtop of the list, but I'll leave that to you.

I DO however like Daniel's solution better. Giving the links their own class is a much better way of dealing with it. You're better off to look at his solution and adapt it to what you want.

Upvotes: 1

Daniel Gimenez
Daniel Gimenez

Reputation: 20504

Your css was a lot to pour through. So I just boiled it down to the basics. I believe your issue has to do with a gap between your main link and submenu.

Explanation of CSS * Anchors are block inline-block type's and have the exact width of the parent li and ul. * Submenus are inside li's. So when li's are hovered over they are visible. The submenu is visible because it is a child of the li. * Because the anchors are 100% and stretch the li, the abut the submenu, so when moving the mouse over, there is no gap, and so the submenu remains visible.

jsFiddle

#menubox { 
    position: absolute;
    left: 100px;
    top: 100px;
}

#menubox ul {

    display:inline-block;
    padding-left:0;
}

#menubox > ul {
    width: 100px;
}

#menubox > ul ul {
    position:absolute;
    display: none;
    width: 200px;

}
#menubox li {
    list-style-type:none;
    display:block;
}

#menubox li:hover {
    background:red;
}

#menubox a {
    display:inline-block;
    width:100%;
}

#menubox ul li:hover ul {
    display: inline-block;
    background: orange;
}

Upvotes: 1

Related Questions