纯CSS标准型下拉菜单

2024-09-05 12:20:23

字体：大中小

来源：转载

供稿：网友

符合标准、样式标准的纯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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS标准型下拉菜单</title></head><style></style><body><div id="nav">    <ul>    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'" style="height:18px;">网站首页</li>    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">公司新闻    <div class="list">        我的日志<br />        我的日志<br />        我的收藏<br />    </div>    </li>    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">产品列表        <div class="list">        我的相册<br />        我的收藏<br />    </div>    </li>    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">品牌故事        <div class="list">        我的日志<br />        我的相册<br />        我的收藏<br />    </div>    </li>       <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">关于我们        <div class="list">        我的日志<br />        我的相册<br />        我的收藏<br />    </div>    </li>       <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">美容顾问        <div class="list">        我的日志<br />        我的相册<br />        我的收藏<br />    </div>    </li>       <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">市场营销        <div class="list">        我的收藏<br />        我的日志<br />        我的相册<br />        我的收藏<br />    </div>    </li>       <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">加盟我们        <div class="list">        我的首页<br />        我的日志<br />        我的相册<br />        我的收藏<br />    </div>    </li>       <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">客服中心        <div class="list">        我的日志<br />        我的相册<br />        我的收藏<br />    </div>    </li>    </ul></div></body></html>

上一篇：纯CSS制作双语导航条

下一篇：每一个菜单都能关闭的竖排导航