jeudi 23 juin 2016
HTML CSS hover dropdown menu unexpected behavior
here is my code
<! DOCTYPE html PUBLIC â-//W3C//DTD HTML 4.01 Transitional//ENâ âhttp://www.w3.org/TR/html4/loose.dtdâ>
<html>
<head>
<title>No Name Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #B3000000;//f1f1f1;
position: absolute;
right: 0;
top: 80px;
cursor:pointer;
}
li a{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
position: relative;
}
/* Change the link color on hover */
ul li a:hover {
background-color: #000;
color: white;
}
ul li ul.dropdown{
width: 200px;
background-color: #B3000000;//f1f1f1;
display:none;
position: relative;
right: 0;
top: 0%;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
</style>
</head>
<body overflow:hidden>
<ul >
<div class="dropdown" >
<li><a href="#about" >About ▾</a>
<ul class="dropdown">
<li><a href="#">Staff</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#Contact">Contact</a>
<ul class="dropdown">
<li><a href="#">Employee Contacts</a></li>
<li><a href="#">Corporate Contacts</a></li>
<li><a href="#">Join Our Team</a></li>
</ul>
</li>
</div>
</ul>
</body>
</html>
it is supposed to realize the hover dropdown effect only using CSS. However, the transition between two list in the menu is not fluent at all. The menu jumps from one sub menu to a main one.
I was wondering if there's any solution to this "jumping" effect.
Thank you very much.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire