下拉菜单的制作

最新推荐文章于 2024-02-17 09:55:51 发布

weixin_30783913

最新推荐文章于 2024-02-17 09:55:51 发布

阅读量61

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/dandantailang/archive/2011/10/10/2205613.html

版权

<!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">
#menu{
margin:0;
padding:0;
width:800px;
list-style-type:none;
font:"宋体" 14px;
}
#menu li{
float:left;
width:150px;
padding:0px;
margin:0 1px 0 0;
}
#menu li dl{
width:150px;
margin:0;
padding:0 0 10px 0;
background:#cd6 url(bottom.gif) no-repeat bottom left;
}
#menu table{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
#menu li dl dt{
margin:0;
padding:5px;
text-align:center;
border-bottom:1px solid red;
background:#ed8 url(top.gif) no-repeat top left;
}
#menu li dl dt.red{
   background-color:red;
   }
         #menu li dl dt.green{
   background-color:pink;
   }
   #menu li dl dt.yellow{
   background-color:pink;
   }
   #menu li dl dt.blue{
   background-color:pink;
   }
   #menu li dl dt.pink{
   background-color:pink;
   }
#menu dt a,#menu dt a:visited{
display:block;
color:#333;
text-decoration:none;
height:1em;
}
#menu li dl dd{
margin:0;
padding:0;
color:#fff;
background:#47a;

}
#menu li dl dd a,#menu li dl dd a:visited{
display:block;
color:#fff;
text-indent:10px;
text-decoration:none;
padding:4px 5px 4px 20px;
background:#47a url(arrw.gif) no-repeat 5px 0px;
background
}
#menu li dl dd.last{
border-bottom:1px red solid;
}
#menu li dd{
display:none;
}

#menu li:hover dd,#menu li a:hover dd{
display:block;
}
#menu li:hover ,#menu li a:hover{
border:0;
}
#menu li dl dd a:hover{
background:#147;
color:#9cf;}

</style>
</head>

<body>
<ul id="menu">
    <li>
    
        <dl>
<dt class="red"><a href="#">北京市的大学</a></dt>
    <dd><a href="#">清华大学</a></dd>
    <dd><a href="#">北京大学</a></dd>
    <dd class="list"><a href="#">人民大学</a></dd>
          </dl>
           
    </li>
    <li>
      
        <dl>
<dt class="green"><a href="#">徐州市的大学</a></dt>
    <dd><a href="#">矿业大学</a></dd>
    <dd><a href="#">师范大学</a></dd>
    <dd class="list"><a href="#">人民大学</a></dd>
           </dl>
           
    </li>
    <li>
      
          <dl>
<dt class="yellow"><a href="#">上海市的大学</a></dt>
    <dd><a href="#">复旦大学</a></dd>
    <dd><a href="#">交通大学</a></dd>
    <dd class="list"><a href="#">上海大学</a></dd>
          </dl>
          
    </li>
    <li>
       
         <dl>
<dt class="blue"><a href="#">南京市的大学</a></dt>
    <dd><a href="#">南京大学</a></dd>
    <dd><a href="#">理工大学</a></dd>
    <dd class="list"><a href="#">航天大学</a></dd>
          </dl>
           
    </li>
    <li>
      
          <dl>
<dt class="pink"><a href="#">武汉市的大学</a></dt>
    <dd><a href="#">武汉大学</a></dd>
    <dd><a href="#">师范大学</a></dd>
    <dd class="list"><a href="#">人民大学</a></dd>
            </dl>
             
    </li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/dandantailang/archive/2011/10/10/2205613.html

weixin_30783913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单的制作

<!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 htt...
复制链接

扫一扫