在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序

导读：
　　今天终于写完了一个 可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.
　　这个程序需要用到三个文件,一个是h.css,用作水平下拉菜单的样式文件,另一个是v.css,用作垂直下拉菜单的样式文件,最后一个就是包含下拉菜单内容的网页文档test.html.
　　test.html文件内容:
　　 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
　　
　　
　　
　　function startlist()
　　{
　　if(document.all)
　　{
　　var navRoot = document.getElementById("nav");
　　for(var i=0;i
　　
　　
　　
　　java培训
　　
　　java基础提高

　　java就业实战

　　java高手精华

　　
　　

　　.net培训
　　
　　.net基础提高

　　.net就业实战

　　.net高手精华

　　
　　

　　切换样式

　　
　　
　　内容区
　　
　　
　　
　　h.css文件内容:
　　#content {clear:both;}
　　ul {
　　list-style:none;
　　margin:0px;
　　padding:0px;
　　}
　　li{
　　margin:0px;
　　padding:0px;
　　float:left;
　　width:100px;
　　height: 20px;
　　border:1px solid #ddd;
　　position: relative;
　　}
　　li ul{
　　background-color:#eee;
　　display:none;
　　top:20px;
　　left:0px;
　　position:absolute;
　　}
　　li:hover,li.hover {background-color:#eee;}
　　li:hover,li.hover ul{
　　display:block;
　　}
　　v.css文件内容:
　　#nav {float:left;}
　　ul {
　　list-style:none;
　　margin:0px;
　　padding:0px;
　　}
　　li{
　　margin:0px;
　　padding:0px;
　　width:100px;
　　height: 20px;
　　border:1px solid #ddd;
　　position: relative;
　　}
　　li ul{
　　background-color:#eee;
　　display:none;
　　top:0px;
　　left:100px;
　　position:absolute;
　　}
　　li:hover,li.hover {background-color:#eee;}
　　li:hover,li.hover ul{
　　display:block;
　　}
　　Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1823994

本文转自
http://blog.csdn.net/zhangxiaoxiang/archive/2007/10/14/1823994.aspx