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

最新推荐文章于 2023-03-13 15:59:48 发布

原创最新推荐文章于 2023-03-13 15:59:48 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

网页设计专栏收录该内容

6 篇文章

订阅专栏

这段代码实现了一个基于CSS的浮动菜单，当鼠标悬停在菜单项上时，子菜单会以飞出效果显示。菜单项包括'Starters'，其下拉菜单包含'Fish'，'Fruit'和'Soups'等选项。

<!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>