利用 CSS 实现悬停下拉菜单
1 效果鼠标移到搜索引擎, 自动弹出其下拉菜单, 在下拉菜单里移动, 光条随之移动
2 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8"/>
- <title > 悬停下拉菜单演示 </title>
- <style type="text/css">
- a {
- text-decoration: none;
- color: black;
- }
- .nav {
- background-color: steelblue;
- height: 40px;
- width: 80%;
- border: 1px solid #f0ad4e;
- border-radius: 5px;
- margin: 0 auto;
- padding-top: 1px;
- padding-bottom: 3px;
- box-shadow: 1px 1px 0 0 gray;
- }
- .dropdown {
- list-style: none;
- float: left;
- margin-right: 5px;
- display: block;
- width: 80px;
- }
- .dropdown:hover {
- background-color: white;
- border-radius: 5px 5px 0 0;
- padding-top: 5px;
- }
- .menubar {
- color: white;
- }
- .dropdown:hover .menubar{
- color: black;
- }
- .dropdown:hover .dropdown-menu {
- border: 1px solid #f7ecb5;
- border-radius: 5px;
- padding: 5px;
- width: 100px;
- margin-top: 8px;
- }
- .dropdown:hover .dropdown-menu li {
- list-style: none;
- line-height: 30px;
- display: block;
- }
- .dropdown-menu li {
- display: none;
- background-color: transparent;
- }
- .dropdown-menu > li:hover {
- background-color: steelblue;
- }
- .dropdown-menu > li:hover a {
- color: white;
- font-weight: bold;
- }
- </style>
- </head>
- <body>
- <p class="nav">
- <ul>
- <li class="dropdown">
- <a href="#" class="menubar"> 搜索引擎 </a>
- <ul class="dropdown-menu">
- <li><a href="#"> 百度 </a></li>
- <li><a href="#"> 搜狗 </a></li>
- <li><a href="#">360 搜索 </a></li>
- <li><a href="#"> 必应 </a></li>
- <li><a href="#"> 谷歌 </a></li>
- <li><a href="#"> 好搜 </a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="menubar"> 英语学习 </a>
- <ul class="dropdown-menu">
- <li><a href="#"> 美国之音 </a></li>
- <li><a href="#"> 中国日报 </a></li>
- <li><a href="#"> 沪江英语 </a></li>
- <li><a href="#"> 托福词汇 </a></li>
- <li><a href="#"> 雅思写作 </a></li>
- <li><a href="#"> 四级实战 </a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="menubar"> 大学数学 </a>
- <ul class="dropdown-menu">
- <li><a href="#"> 数学分析 </a></li>
- <li><a href="#"> 高等代数 </a></li>
- <li><a href="#"> 解析几何 </a></li>
- <li><a href="#"> 实变函数 </a></li>
- <li><a href="#"> 复变函数 </a></li>
- <li><a href="#"> 微分几何 </a></li>
- </ul>
- </li>
- </ul>
- </p>
- </body>
- </html>
来源: https://www.2cto.com/kf/201802/723136.html