纯CSS实现鼠标滑过显示子菜单的二级菜单效果

最新推荐文章于 2023-06-26 16:17:31 发布

wuling129

最新推荐文章于 2023-06-26 16:17:31 发布

阅读量1.4k

点赞数

分类专栏：网页设计文章标签： css

本文链接：https://blog.csdn.net/wuling129/article/details/121495463

版权

网页设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>
<title>CSS Flyout menus</title>
<style>
#nav, #nav ul { 
  padding: 0;
  margin: 0;
  list-style: none;
}
#nav li { 
  float: left;
  position: relative;
  width: 10em;
  border: 1px solid #B0C4DE;
  background-color: #E7EDF5;
  color: #2D486C;
  font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-right: 1em;
}
#nav a:link, #nav a:visited {
  display: block;
  text-decoration: none;
  padding-left: 1em;
  color: #2D486C;
}
#nav ul { 
  display: none;
  position: absolute;
  padding-top: 0.5em;
}
#nav ul li {
  float: none;
  border: 0 none transparent;
  border-bottom: 1px solid #E7EDF5;
  background-color: #F1F5F9;
  font-size: 100%;
  margin: 0;
  margin-bottom: 0.5em;
  padding: 0;
}
#nav li:hover ul {
  display: block;
}
</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">Starters</a>
    <ul>
      <li><a href="#">Fish</a></li>
      <li><a href="#">Fruit</a></li>
      <li><a href="#">Soups</a></li>
    </ul>
  </li>
  
</ul>
</body>
</html>

wuling129

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现鼠标滑过显示子菜单的二级菜单效果

<!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><title>CSS Flyout menus</title><style>#nav, .
复制链接

扫一扫