纯css下拉菜单

稿源：互联网 2022-06-17 02:30:00 点击： 32391 撤稿纠错

纯css下拉菜单，可自定义样式。

以下讨论的是和下拉菜单相关的纯css下拉菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>纯CSS下拉菜单，alixixi.com收集</title> 
<style type="text/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; 
    } 
</style> 
</head> 
<body> 
告诉你一个应有尽有的网页特效网址：<a href="http://js.alixixi.com">http://js.alixixi.com</a>
<hr />
<ul class="navigation"> 
    <li> 
     
        <dl> 
            <dt><a href="http://www.alixixi.com">阿里西西</a></dt> 
            <dd><a href="#">网站首页</a></dd> 
            <dd><a href="#">哦哦哦哦</a></dd> 
            <dd><a href="#">哦哦哦哦</a></dd> 
            <dd class="last"><a href="#">哦哦哦哦</a></dd> 
        </dl> 
     
    </li> 
    <li> 
     
        <dl> 
            <dt><a href="#">Photoshop</a></dt> 
            <dd><a href="#">疑难杂症</a></dd> 
            <dd class="last"><a href="#">实用范例</a></dd> 
        </dl> 
     </li> 
      
     <li> 
      
        <dl> 
            <dt><a href="#">css</a></dt> 
            <dd><a href="#">实用案例</a></dd> 
            <dd class="last"><a href="#">辅助工具</a></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>
</body> 
</html>

关于纯css下拉菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009111459023.shtml方便下次再访问哦。

·上一篇： 漂亮的烟花特效
·下一篇： 漂亮滑动门效果

纯css下拉菜单

文章分类LIST >>返回首页

最新游戏

最新新闻