CSS实现下拉菜单

来源：互联网发布：标准日本语知乎编辑：程序博客网时间：2024/04/28 23:09

1.CSS实现下拉菜单重点在于用一个无序列表嵌套一个无序列表，父列表的position属性设置为relative，子列表的position设置成absolute。先将子列表隐藏起来display:none;当鼠标移到到父列表项上时，显示子列表display:block;

2.代码示例：

<!DOCTYPE html><html lang="zh-CN">  <head>  <title>css下拉菜单</title>  <meta charset="utf-8"/>  <style>  *{  margin:0;  padding:0;}  .nav{  background:#eee;  height:45px;}  ul{  list-style:none;}  ul li{  float:left;  line-height:45px;  text-align:center;  position:relative;}  a{  text-decoration:none;  color:#000;  display:block;  padding:0 20px;}  a:hover{  background:#CCC;  color:#00ffff;}  ul li ul{  position:absolute;  left:0;  top:45px;  display:none;}  ul li ul li{  float:none;  background:#eee;}  ul li:hover ul{  display:block;}  </style>  </head>    <body>  <div class="nav">  <ul>  <li><a href="#">首页</li></a>  <li><a href="#">下拉    <ul>      <li><a href="#">Javascript</li></a>      <li><a href="#">Jquery</li></a>      <li><a href="#">Css</li></a>    </ul>  </li></a>  </ul>  </div>  </body></html>

0 0