先给效果看看
点击效果演示
分析代码
其实就是使用onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"
鼠标放上去和鼠标拿开后触发的事件。
看代码吧：
XML/HTML Code复制内容到剪贴板
- <!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=gb2312" />
- <title>不使用JS的下拉菜单写法</title>
- <link href="css/css.css" rel="stylesheet" type="text/css" />
- </head>
-
- <body>
- <div id="nav">
- <ul>
- <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页
- <div class="list">
- <a href="#">我爱CSS</a><br />
- <a href="#">我的首页</a><br />
- <a href="#">我的日志</a><br />
- <a href="#">我的日志</a><br />
- <a href="#">我的相册</a><br />
- <a href="#">我的收藏</a><br />
- </div>
- </li>
- <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
- <div class="list">
- <a href="#">我爱CSS</a><br />
- <a href="#">我的首页</a><br />
- <a href="#">我的日志</a><br />
- <a href="#">我的相册</a><br />
- <a href="#">我的收藏</a><br />
- </div>
- </li>
- <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
- <div class="list">
- <a href="#">我爱CSS</a><br />
- <a href="#">我的相册</a><br />
- <a href="#">我的收藏</a><br />
- </div>
- </li>
- <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
- <div class="list">
- <a href="#">我爱CSS</a><br />
- <a href="#">我的首页</a><br />
- <a href="#">我的日志</a><br />
- <a href="#">我的相册</a><br />
- <a href="#">我的收藏</a><br />
- <a href="#">我的日志</a><br />
- <a href="#">我的相册</a><br />
- <a href="#">我的收藏</a><br />
- </div>
- </li>
- </ul>
- </div>
- <div style="width:600px; height:200px; padding-left:5px; padding-top:5px; position:absolute; margin-top:33px; background-color:#99CC66">
- <p>最近一年多的时间，在网上经常看到有人询问“网页设计如何入门”、“如何设计网页”……之类的问题。笔者从接触网页到从事这行业虽然已有六年多，但是要回答这些问题，似乎不能一下子回答上来，因为我越来越感觉到设计网页是一个很困难的工作（也许是下水越久，陷得越深的道理吧），即使这样，笔者还是分享一些心得和经验给大家，愿大家都能在网页设计领域里步步高升。</p>
- <p>首先，要明确“网页设计”包含哪些工作，需要用到什么知识。说白了，网页设计无非包含两大部分：设计网页，制作网页。所以，只要初学者从这两方面着手即可。</p>
- </div>
- </body>
- </html>
CSS核心部分：
CSS Code复制内容到剪贴板
- .menu1{
- width:120px;
- height:auto;
- margin:6px 4px 0px 0px;
- border:1px solid #9CDD75;
- background-color:#F1FBEC;
- color:#336601;
- padding:6px 0px 0px 0px;
- cursor:hand;
- overflow-y:hidden;
- filter:Alpha(opacity=70);
- -moz-opacity:0.7;
- }
- .menu2{
- width:120px;
- height:18px;
- margin:6px 4px 0px 0px;
- background-color:#F5F5F5;
- color:#999999;
- border:1px solid #EEE8DD;
- padding:6px 0px 0px 0px;
- overflow-y:hidden;
- cursor:hand;
- }
DEMO下载：点击下载