纯CSS触碰式下拉菜单

时间：2022-07-02 14:56:59 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

纯CSS触碰式下拉菜单 
<title>纯CSS触碰式下拉菜单</title> 
<style type="text/<a href=" http: target="_blank">css"> 
/* 整体设置*/ 
.navigation { 
    margin:0; 
    padding:0; 
     
    list-style-type:none; 
    font:12px Arial; 
    } 
.navigation li { 
    float:left; 
    padding:0; 
    margin:0 10px 0 0; 
    _margin:0 2px 0 0; 
     
    } 
/* 设置选单区块*/ 
.navigation li dl { 
    /*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; 
     
    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; 
    } 
</style> 
 
 
<ul class="navigation"> 
    <li> 
     
        <dl> 
            <dt></dt> 
            <dd></dd> 
            <dd></dd> 
            <dd></dd> 
            <dd class="last"></dd> 
        </dl> 
     
    </li> 
    <li> 
     
        <dl> 
            <dt></dt> 
            <dd></dd> 
            <dd class="last"></dd> 
        </dl> 
     </li> 
      
     <li> 
      
        <dl> 
            <dt></dt> 
            <dd></dd> 
            <dd class="last"></dd> 
        </dl> 
         
    </li> 
</ul>
 <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
<br><br><br><br><br><br><br><br><br><br>
<div align="center">转载请注明:破洛洛 更多代码： https://www.1**1*1cn.net </div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

纯CSS触碰式下拉菜单

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程