【破洛洛教学网】 纯CSS触碰式下拉菜单
/* 整体设置*/
.navigation {
margin:0;
padding:0;
width:610px;
list-style-type:none;
font:12px Arial;
float:left;
}
.navigation li {
float:left;
padding:0;
margin:0 10px 0 0;
_margin:0 2px 0 0;
width:150px;
}
/* 设置选单区块*/
.navigation li dl {
width:150px;/*ie6*/
margin:0;
padding:0;
background-color:#fff;
border:solid 2px #666;
}
.navigation li dt a , .navigation li dd a{ display:block;}
/* 设置主选单dt */
.navigation li dt {
margin:0;
padding: 5px;
text-align:center;
background-color:#fff;
font-size: 12px;
font-weight: bold;
height:15px;
overflow:hidden;
}
.navigation li dt a ,.navigation li dt a:visited {
display:block;
color:#333;
text-decoration:none;
}
/* 设置子选单dd */
.navigation li dd {
margin:0;
padding:0;
color: #333;
background-color:#efefef;
border-bottom:dotted 1px #666;
}
.navigation li dd.last {
border-bottom:0;
}
.navigation li dd a, .navigation li dd a:visited {
display:block;
color:#333;
text-decoration:none;
padding:4px 5px 4px 20px;
}
/*隐藏子选单*/
.navigation li dd { display:none;}
/* 滑鼠滑入显示子选单 */
.navigation li:hover dd, .navigation li a:hover dd { display:block;}
/*ie6 hack*/
.navigation li:hover,.navigation li a:hover { border:0;}
.navigation table { border-collapse:collapse;
padding:0;
text-align:left;
}
破洛洛教学网网页设计PS教程平面设计破洛洛Photoshop疑难杂症实用范例css实用案例辅助工具转载请注明:破洛洛 更多代码:破洛洛
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。