就算是复制来的也没事啊，重要的是你能理解就可以了
html+css 多级的基本原理也就是嵌套
<ul> <li><a href=#>Lorem ipsum dolor.</a></li> <li><a href=#>At, minima reiciendis.</a></li> <li><a href=#>Repudiandae, necessitatibus rerum.</a> <ul> <li><a href=#>Lorem ipsum dolor sit.</a></li> <li><a href=#>Doloribus, porro dicta vero!</a></li> <li><a href=#>Magnam ipsum dolorem sequi.</a></li> <li><a href=#>Similique saepe, voluptatum repellat.</a></li> </ul> </li> <li><a href=#>Et, non voluptate?</a></li> </ul>
<!---
其实设计思路很简单，就是子栏目的CSS默认的display为none，不显示，鼠标经过父栏目的时候将子栏目的display设为block，鼠标经过事件的CSS伪类是:hover，例如：a:hover表示鼠标经过链接时，注意中间的冒号用英文。有问题可直接hi我。
->
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ><html xmlns=><head><meta http-equiv=Content-Type content=text/html; charset=gb2312 /><title>二级菜单</title><style type=text/css>/* 整体设置*/ #menu { margin:0; padding:0; width:610px; list-style-type:none; font:14px Arial; }#menu li { float:left; padding:0; margin:0 1px 0 0; width:150px; }/* 设置菜单项*/#menu li dl { width:150px;/*ie6*/ margin: 0; padding: 0 0 10px 0; background: #cb6 url(images/bottom.gif) no-repeat bottom left; }#menu li dt a,#menu li dd a{ display:block;}/* 设置菜单项的dt *//* 设置菜单项的dt */#menu li dt { margin:0; padding: 5px; text-align:center; border-bottom:1px solid #b00; background: }#menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;}#menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;}#menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;}#menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;}#menu li dt a ,#menu li dt a:visited { display:block; color:#333; text-decoration:none; } /* 设置菜单项的dd */#menu li dd { margin:0; padding:0; color: #fff; background: #47a; }#menu li dd.last { border-bottom:1px solid #b00; }#menu li dd a, #menu li dd a:visited {height:1em; display:block; color:#fff; text-decoration:none; padding:4px 5px 4px 20px; background: #47a url(images/arrow.gif) no-repeat 10px 10px; } /*关闭子菜单*/#menu li dd { display:none;}/* 设置鼠标响应 */#menu li:hover dd { display:block;}#menu li dd a:hover { background: #147; color:#9cf; }</style></head><body> <ul id=menu> <li> <dl> <dt class=orange><a href=#>Artech Studio</a></dt> <dd><a href=#>Web Dev</a></dd> <dd><a href=#>Web Design</a></dd> <dd><a href=#>Books</a></dd> <dd class=last><a href=#>Contact Us</a></dd> </dl> </li> <li> <dl> <dt class=yellow><a href=#>Artech Store</a></dt> <dd><a href=#>Books</a></dd> <dd><a href=#>DVDs</a></dd> <dd><a href=#>Movies</a></dd> <dd class=last><a href=#>Service</a></dd> </dl> </li> <li> <dl> <dt class=green><a href=#>Artech Achi</a></dt> <dd><a href=#>Landscape</a></dd> <dd><a href=#>Plan</a></dd> <dd><a href=#>Design</a></dd> <dd class=last><a href=#>Maps</a></dd> </dl> </li> <li> <dl> <dt class=blue><a href=#>Artech Science</a></dt> <dd><a href=#>Physics</a></dd> <dd><a href=#>Maths</a></dd> <dd><a href=#>Chemistry</a></dd> <dd class=last><a href=#>Courses</a></dd> </dl> </li> </ul></body></html>
- 上一篇： 开源程序怎么靠什么盈利
- 下一篇： 返回列表