我正在设计一个网站，我在顶部菜单中有下拉菜单，当我将鼠标悬停在链接上时，下拉菜单会出现，但当我离开链接时，下拉菜单会消失，我不想在 jquery 中这样做，我只想这样做在 CSS 中，请帮帮我。 这是 html。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Cusit</title>
</head>
<body>
<!-- starting of Navbar menu -->
<nav id="navigation">
<!-- starting of social navigation icons -->
<div id="social_navigation">
<a href="www.facebook.com"><img src="images/facebook.png" alt="facbook"></a>
<a href="www.facebook.com"><img src="images/twitter.png" alt="facbook"></a>
<a href="www.facebook.com"><img src="images/linkedin.png" alt="facbook"></a>
</div>
<!-- end of social navigation icons -->
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact us</a>
<a href="#" id="submenu">Cusit</a>
<ul id="drop">
<li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
<li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
<li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
<li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
<li><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
</ul>
<a href="#">Welcome</a>
<a href="#">cutec</a>
</div>
<div id="searchform">
<input type="text" class="inp">
</div>
<div id="searchformlogo">
<img src="images/search.png">
</div>
</nav>
<!-- End of Navbar menu -->
这是CSS。
/* starting of navigation bar */
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #000;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 0px 0px #000000;
-moz-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
/* Adds the transparent background */
background-color:#f0eeef;
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: #000;
text-decoration: none;
-webkit-transition: all .50s ease;
-moz-transition: all .50s ease;
-ms-transition: all .50s ease;
-o-transition: all .50s ease;
transition: all .50s ease;
}
#navigation a:hover {
color: red;
}
/* start of sub menu */
#navigation>#menu>a:nth-child(3):hover +#drop{display:block; -webkit-transition: all .50s ease;
-moz-transition: all .50s ease;
-ms-transition: all .50s ease;
-o-transition: all .50s ease;
transition: all .50s ease;
}
#drop{ display:none; width:10%; position:absolute; left:0; background:#FFFFFF; margin-left: 48em; list-style:none; margin-top:-3px;}
/* End of sub menu */
最佳答案
此代码有效，我已多次使用它，它是由 Tirumal 在 http://code-tricks.com/simple-css-drop-down-menu/ 编写的.
您可以更改 CSS 和 HTML 以满足您的要求，如果您需要帮助更改代码，请告诉我。
HTML
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
CSS3
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
关于html - 鼠标离开悬停链接时下拉菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25341883/