1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html下拉菜单触摸显示 CSS导航:纯CSS触碰式下拉菜单

html下拉菜单触摸显示 CSS导航:纯CSS触碰式下拉菜单

时间:2024-02-12 22:17:48

相关推荐

html下拉菜单触摸显示 CSS导航:纯CSS触碰式下拉菜单

【破洛洛教学网】 纯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下无效。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。