首页 > 代码库 > HTML/CSS方法实现下拉菜单

HTML/CSS方法实现下拉菜单

2024-11-15 00:34:02   202人阅读

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{margin:0px;padding:0px}#anv{background-color:#6CF;width:600px;height:40px;margin:0 auto;}ul{list-style:none;}ul li{float:left;line-height:40px;width:120px;text-align:center;position:relative}a{text-decoration:none;color:#000;padding:0 10px;display:block;height:40px}a:hover{color:#FF0;background-color:#390}ul li ul li{float:none;background-color:#EEE;margin-bottom:1px;}ul li ul{position:absolute;left:0px;top:40px;display:none}ul li ul li a:hover{background-color:#F90}ul li:hover ul{display:block}</style></head><body><div id="anv"><ul><li><a href="http://www.mamicode.com/#">首页</a></li><li><a href="http://www.mamicode.com/#">导航一</a>  <ul>    <li><a href="http://www.mamicode.com/#">PHP</a></li>    <li><a href="http://www.mamicode.com/#">JavaScript</a></li>    <li><a href="http://www.mamicode.com/#">CSS</a></li>    <li><a href="http://www.mamicode.com/#">HTML</a></li>  </ul>  </li><li><a href="http://www.mamicode.com/#">导航二</a>   <ul>    <li><a href="http://www.mamicode.com/#">PHP</a></li>    <li><a href="http://www.mamicode.com/#">JavaScript</a></li>    <li><a href="http://www.mamicode.com/#">CSS</a></li>    <li><a href="http://www.mamicode.com/#">HTML</a></li>  </ul></li><li><a href="http://www.mamicode.com/#">导航三</a> <ul>    <li><a href="http://www.mamicode.com/#">PHP</a></li>    <li><a href="http://www.mamicode.com/#">JavaScript</a></li>    <li><a href="http://www.mamicode.com/#">CSS</a></li>    <li><a href="http://www.mamicode.com/#">HTML</a></li>  </ul></li><li><a href="http://www.mamicode.com/#">导航四</a>  <ul>    <li><a href="http://www.mamicode.com/#">PHP</a></li>    <li><a href="http://www.mamicode.com/#">JavaScript</a></li>    <li><a href="http://www.mamicode.com/#">CSS</a></li>    <li><a href="http://www.mamicode.com/#">HTML</a></li>  </ul></li></ul></div></body></html>

　技术分享　

HTML/CSS方法实现下拉菜单


联系
我们