Having trouble creating hover drop down menu with HTML/CSS

Question

I am trying to created a drop down menu with HTML/CSS with hover effect.Below is my HTML code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
    <style>
        body {
            background-color:#181818;
            margin: 0px;
        }

     ul li {
        display: inline-block;
        font-size: 140%;
        color: orange;
        width: 150px;
        background-color: #505050;
        height: 50px;
        border-radius: 150px;
        position: relative;
        }

        p {
            margin-top: 10px;
            text-align: center;
            margin-bottom: 20px;
        }
        ul li:hover {
            color: #505050;
            background-color: orange;
        }
        /*ul li ul {
            visibility: hidden; 
        }*/

     #id2 {
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    #id1:hover #id2 {
        display: block; /* display the dropdown */
    }


    </style>
<body>

        <ul id="topMenu">
            <li><p>Home</p></li>
            <li><p id="id1">Projects</p></li>
            <ul id="id2">
                <li><p>Project 1</p></li>
                <li><p>Project 2</p></li>
                <li><p>Project 3</p></li>
            </ul>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

</body>
</html>

I am not sure what I am doing wrong in css code here. Can anyone please help me with the code and How I can implement the hover drop down menu correctly.?

Thanks, Bhavik

I would recommend learning more about basic HTML and CSS, for instance you're using paragraph tags inside of list items which isn't necessary. Here is a tutorial on how to create a drop down menu using HTML5 and CSS3 - inspirationalpixels.com/tutorials/… — Jordan
– Jordan, Commented Jun 7, 2015 at 7:11

Dmitriy · Accepted Answer · 2015-06-07 07:20:32Z

you wrong markup for a drop-down menu

instead

<ul id="topMenu">
            <li><p>Home</p></li>
            <li><p id="id1">Projects</p></li>
            <ul id="id2">
                <li><p>Project 1</p></li>
                <li><p>Project 2</p></li>
                <li><p>Project 3</p></li>
            </ul>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

to

<ul id="topMenu">
            <li><p>Home</p></li>
            <li><p>Projects</p>
               <ul>
                  <li><p>Project 1</p></li>
                  <li><p>Project 2</p></li>
                  <li><p>Project 3</p></li>
              </ul>
            </li>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

Example:

body {
    background-color:#181818;
    margin: 0px;
}
ul li {
    display: inline-block;
    font-size: 140%;
    color: orange;
    width: 150px;
    background-color: #505050;
    height: 50px;
    border-radius: 150px;
    position: relative;
}
p {
    margin-top: 10px;
    text-align: center;
    margin-bottom: 20px;
}
ul li:hover {
    color: #505050;
    background-color: orange;
}
ul li ul{
    display: none;
    padding-left: 0;
}
ul li:hover ul{
    display: block;
    position: absolute; top: 100%;  left: 0;
}

<ul id="topMenu">
    <li>
        <p>Home</p>
    </li>
    <li>
        <p id="id1">Projects</p>
        <ul id="id2">
        <li>
            <p>Project 1</p>
        </li>
        <li>
            <p>Project 2</p>
        </li>
        <li>
            <p>Project 3</p>
        </li>
    </ul>
    </li>
    
    <li>
        <p>About Us</p>
    </li>
    <li>
        <p>contact us</p>
    </li>
</ul>

Ckitakishi · Accepted Answer · 2015-06-07 07:25:54Z

0

look this: http://jsfiddle.net/412cosa7/

HTML:

the #id1 is not the ancestor of the #id2, so, first ,you can remove #id2 from <p> and add it to <li>, then put #id2's element in #id1's.

In fact,<p> in your source is not necessary.

CSS:

use parent selector ">" . e.g: #id1:hover > #id2

answered Jun 7, 2015 at 7:25

Ckitakishi

261 silver badge5 bronze badges

Collectives™ on Stack Overflow

Having trouble creating hover drop down menu with HTML/CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related