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
2 answers
solution1
1 2015-06-07 07:20:32
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>
solution2
0 2015-06-07 07:25:54
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 " > " . eg: #id1:hover > #id2
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.