CSS下拉菜单---实现主菜单项不同颜色
2011-10-25 17:54
253 查看
实现主菜单不同颜色的下拉菜单,效果如图所示:
一下是实现此下拉菜单的全代码:
<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:0px;
padding:0 0 10px 0;
background:#cb6 url(bottom.gif) no-repeat bottom left;
}
#menu table {
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
#menu li:hover dd{
display:block;
}
#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:#F33;
}
#menu li dl dt.blue{
background-color:#39C;
}
#menu li dl dt.green{
background-color:#393;
}
#menu li dl dt.yellow{
background-color:#FC9;
}
#menu li dl dt.sol{
background-color:#CC6;
}
#menu dt a,#menu dt a:visited{
display:block;
color:#333;
text-decoration:none;
}
#menu li dd{
margin:0;
padding:0;
color:#fff;
text-decoration:none;
text-align:center;
background:#47a;
}
#menu li dl dd a,#menu li dl dd a:visited{
display:block;
color:#fff;
padding:4px 5px 4px 5px;
}
#menu li dl dd.last{
border-bottom:1px solid red;
}
#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-color:#147;
color:#9cf;
}
</style>
</head>
<body>
<!--<dl>//充当整个导航
<dt>//充当水平菜单
<dd>//菜单的子菜单
</dd>
</dt>
</dl>-->
<ul id="menu">
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="red"><a href="#">北京市大学</a></dt>
<dd><a href="#">清华大学</a></dd>
<dd><a href="#">北京大学</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>
</dl>
</td></tr></table> </a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="blue"><a href="#">徐州市得大学</a></dt>
<dd><a href="#">矿业大学</a></dd>
<dd><a href="#">徐州师范</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>
</dl>
</td></tr></table></a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="green"><a href="#" class="green">上海市大学</a></dt>
<dd><a href="#">复旦大学</a></dd>
<dd><a href="#">交通大学</a></dd>
<dd class="last"><a href="#">上海大学</a></dd>
</dl>
</td></tr></table></a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="yellow"><a href="#">南京市得大学</a></dt>
<dd><a href="#">南理工大学</a></dd>
<dd><a href="#">南京大学</a></dd>
<dd class="last"><a href="#">南航大学</a></dd>
</dl>
</td></tr></table></a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="sol"><a href="#">武汉得大学</a></dt>
<dd><a href="#">武汉大学</a></dd>
<dd><a href="#">师范大学</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>
</dl>
</td></tr></table></a>
</li>
</ul>
</body>
这里也解决了IE6的兼容性。
一下是实现此下拉菜单的全代码:
<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:0px;
padding:0 0 10px 0;
background:#cb6 url(bottom.gif) no-repeat bottom left;
}
#menu table {
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
#menu li:hover dd{
display:block;
}
#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:#F33;
}
#menu li dl dt.blue{
background-color:#39C;
}
#menu li dl dt.green{
background-color:#393;
}
#menu li dl dt.yellow{
background-color:#FC9;
}
#menu li dl dt.sol{
background-color:#CC6;
}
#menu dt a,#menu dt a:visited{
display:block;
color:#333;
text-decoration:none;
}
#menu li dd{
margin:0;
padding:0;
color:#fff;
text-decoration:none;
text-align:center;
background:#47a;
}
#menu li dl dd a,#menu li dl dd a:visited{
display:block;
color:#fff;
padding:4px 5px 4px 5px;
}
#menu li dl dd.last{
border-bottom:1px solid red;
}
#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-color:#147;
color:#9cf;
}
</style>
</head>
<body>
<!--<dl>//充当整个导航
<dt>//充当水平菜单
<dd>//菜单的子菜单
</dd>
</dt>
</dl>-->
<ul id="menu">
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="red"><a href="#">北京市大学</a></dt>
<dd><a href="#">清华大学</a></dd>
<dd><a href="#">北京大学</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>
</dl>
</td></tr></table> </a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="blue"><a href="#">徐州市得大学</a></dt>
<dd><a href="#">矿业大学</a></dd>
<dd><a href="#">徐州师范</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>
</dl>
</td></tr></table></a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="green"><a href="#" class="green">上海市大学</a></dt>
<dd><a href="#">复旦大学</a></dd>
<dd><a href="#">交通大学</a></dd>
<dd class="last"><a href="#">上海大学</a></dd>
</dl>
</td></tr></table></a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="yellow"><a href="#">南京市得大学</a></dt>
<dd><a href="#">南理工大学</a></dd>
<dd><a href="#">南京大学</a></dd>
<dd class="last"><a href="#">南航大学</a></dd>
</dl>
</td></tr></table></a>
</li>
<li>
<a href="#"> <table><tr><td>
<dl>
<dt class="sol"><a href="#">武汉得大学</a></dt>
<dd><a href="#">武汉大学</a></dd>
<dd><a href="#">师范大学</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>
</dl>
</td></tr></table></a>
</li>
</ul>
</body>
这里也解决了IE6的兼容性。
相关文章推荐
- CSS在不同浏览器下实现颜色渐变效果
- 纯CSS table 表格奇偶行不同颜色实现
- css实现下划线与文字不同颜色
- CSS-相关练习1-表格实现奇数行和偶数行自行判断设置不同的背景颜色
- 纯CSS实现 table 表格奇偶行不同颜色
- js slideToggle 的另一种实现方式,根据不同的状态添加选中颜色
- iOS使用NSMutableAttributedString 实现富文本(不同颜色字体、下划线等)
- css实现对背景图片的定位,获得一张图片上不同位置的内容
- destoon实现不同会员组公司名称显示不同的颜色的方法
- Android TextView实现不同字体颜色并添加点击事件
- CSS实现的下拉菜单
- 实现log4j日志在eclipse console中的不同颜色
- jquery+css 实现即时变化颜色主题(通过input输入颜色值进行改变)
- CSS实现的灰色下拉菜单效果代码
- 两行 CSS 代码实现图片任意颜色赋色技术
- 用CSS来定义<p>标签,要求实现以下效果:字体颜色再IE6下为黑色,IE7下为红色,IE8下为绿色,其他浏览器下为黄色。
- 用CSS实现下拉菜单的多种方法
- echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
- CSS中链接的控制 同一网页中定义不同的文字连接颜色
- iOS使用NSMutableAttributedString 实现富文本(不同颜色字体、下划线等)