CSS drop down menu hover effect

Question

i was trying to make a simple css drop down menu. I'm not able to achieve the drop down sub menu when you hover over a link. Below is my html and css rule, thanks.

    ul#menu li
    {
        position:relative;
        list-style-type:none;
        float: left;
        padding:0px;
        width: 125px;
        height: 25px;
    }
    ul#sub1 li
    {
        position:absolute;
        left:0;
        width:125px;
        visibility: hidden;
    }
    ul#menu li:hover #sub1
    {
        visibility:visible;
    }


    <ul id="menu">
        <li><a href="#">Hyperlink 1</a></li>
        <li><a href="#">Hyperlink 2</a>
            <ul id="sub1"> 
                <li><a href="#">Hyperlink 2.1</a></li>
                <li><a href="#">Hyperlink 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
    </ul>

possible duplicate of Create a menu using pure css and HTML

Mouagip
– Mouagip

2014-10-28 14:59:03 +00:00
Commented Oct 28, 2014 at 14:59 — Mouagip
– Mouagip, Commented Oct 28, 2014 at 14:59

PSL · Accepted Answer · 2013-09-18 03:26:04Z

Try this:

ul#sub1 {
    position:absolute;
    left:0;
    width:125px;
    visibility: hidden;
}
ul#menu li:hover #sub1 {
    visibility:visible;
}

Fiddle

issue is that your your menu ul is visible (always) but the li's inside them are invisible (always) due to the selector of the this rule ul#sub1 li.

Do remember that visibility:hidden hides the element but still occupies space in DOM, whereas display:none hides the element and takes it out of page element flow

Also you necessarily do not need to use ids in css selectors especially for a menu like this. You can achieve it without that, consider the situation with many level menus, by using ids you will have to write selectors indefinitely. Instead you can try something like this.

ul#menu ul {
    padding:0px;
}
ul#menu li {
    position:relative;
    list-style-type:none;
    float: left;
    width: 125px;
}
ul#menu li > ul {
    display: none;
}
ul#menu li:hover > ul {
    display:block;
}

Fiddle

Alex · Accepted Answer · 2013-09-18 04:56:54Z

don't use visibility property for such thing. Try the following code it will solve your problem:

Your CSS:

ul#menu li{
    float: left;
    list-style-type:none;
    width: 125px;
}
li#sub1 ul{
    display: none;
}
ul#menu li#sub1:hover ul{
    display: block;
}

Updated HTML: (apply id on li containing dropdown instead of ul)

<ul id="menu">
    <li><a href="#">Hyperlink 1</a></li>
    <li id="sub1"><a href="#">Hyperlink 2</a>
        <ul> 
            <li><a href="#">Hyperlink 2.1</a></li>
            <li><a href="#">Hyperlink 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
</ul>

Further you can check out this page to learn how display and visibility works - http://www.tutorialrepublic.com/css-tutorial/css-visibility.php

Kuncara Kurniawan · Accepted Answer · 2014-12-15 20:27:10Z

Here the full HTML+CSS script to solve your problem

<style>
ul#menu li
{
   position:relative;
   list-style-type:none;
   float: left;
   padding:0px;
   width: 125px;
   height: 25px;
}

ul#menu li ul#sub1
{
   background:red;
   display:none;
   padding:0px;
   margin:0px;
   border:0px;
   position:absolute;
   width:230px;
   z-index:200;
}

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

ul#menu li ul a:hover, ul#menu li ul li:hover a
{
   background:green;
   color:#ffffff;
   text-decoration:none;
}
</style>


<ul id="menu">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a>
        <ul id="sub1">
            <li><a href="#">Hyperlink 2.1</a></li>
            <li><a href="#">Hyperlink 2.2</a></li>
        </ul>
    </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
</ul>

You can try your self for any modification here: http://www.okeschool.com/code-editor/css/how-to-make-drop-down-menu-with-css-and-image.html

Bilal Ahmed · Accepted Answer · 2016-11-22 21:32:13Z

Apply this one....

<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
    ul li
    {
        position:relative;
        list-style-type:none;
       /* float: left;*/ /*dont use this for this kind of menu */
       display: inline-block;
        padding:0px;
        width: 125px;
        height: 25px;
        background: yellow;
    }
    #sub1
    {
        
        display: none;
        position:absolute;
    }
    ul li:hover ul#sub1
    {
       /* visibility:visible;*//*dont use this for this kind of menu  */
        display: block; /* use this*/
        right:0;
       
    }


    
</style>

<body>
    <ul>
        <li><a href="#">Hyperlink 1</a></li>
        <li><a href="#">Hyperlink 2</a>
            <ul id="sub1"> 
                <li><a href="#">Hyperlink 2.1</a></li>
                <li><a href="#">Hyperlink 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
    </ul>
</body>

apply This One..dont use extra classes or id's.

Collectives™ on Stack Overflow

CSS drop down menu hover effect

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related