CODEWITHSUNDEEP
htmlcss
user2789880
user2789880

Reputation: 107

CSS drop down menu hover effect

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>

Upvotes: 6

Views: 57506

Answers (4)

Bilal Ahmed
Bilal Ahmed

Reputation: 1

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.

Upvotes: -1

Kuncara Kurniawan
Kuncara Kurniawan

Reputation: 121

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

Upvotes: 2

Alex
Alex

Reputation: 996

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

Upvotes: 3

PSL
PSL

Reputation: 123739

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

Upvotes: 7

Related Questions