你现在所在的位置->首页->html/css->css下拉菜单

css下拉菜单

时间：[2006-11-21 16:46:24]　　　　　作者：作者不详

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> /*用于FF下显示*/
.menu {display:none;} /*隐藏菜单*/
.nonemenu {position:absolute;}
.holder {       /*用于显示的背景色ff下会显示*/
    color:#000;
    width:100px;
    height:20px;
    display:block;
    background-color:#33CCFF;
    border:1px solid #ACEBFF;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family:"宋体", Arial, Helvetica, sans-serif;
    font-size:9pt;
    line-height:20px;
    overflow:hidden; /*不显示超出部分*/
    }
.holder:hover { /*用于显示主类的时候鼠标悬停时的样式*/
    height:auto;
    cursor:pointer; /*定义鼠标的样式为手形*/
    color:#fff;
    background-color:red;
    }
a.one_1,a.one_1:visited { /*默认连接样式和.点击后的样式*/
    display:block;
    width:100px;
    border-bottom:1px solid #00CCFF;
    text-decoration:none;
    color:#000;
    background-color:#33CCFF;
    }
a.one_1:hover {background-color: #AAEAFF;} /*鼠标悬停时的样式*/
</style>

<style type="text/css">
/*<![CDATA[*/
.nonemenu {display:none;} /*隐藏nonemenu*/
.menu {display:block; position:absolute;}
a.one,a.one:visited { /*定义菜单的默认和访问后的样式*/
    color:#000;
    width:100px;
    height:20px;
    display:block;
    background-color:#33CCFF;
    border:1px solid #ACEBFF;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family:"宋体", Arial, Helvetica, sans-serif;
    font-size:9pt;
    line-height:20px;
    overflow:hidden; /*不显示超出部分*/
    }
a.one:hover {color:#fff; background-color:red; overflow:visible;}
a.one:hover table {display:block; background:#eee; border-collapse:collapse;}
a.one_1, a.one_1:visited { /*显示时默认连接样式和.点击后的样式*/
display:block;
width:96px;   /*少4PX用于显示对齐*/
height:20px;
line-height:20px;
text-decoration:none;
color:#000;
font-family:"宋体", Arial, Helvetica, sans-serif;
font-size:9pt;
text-align:center;
border-bottom:1px solid #3CF;
    }
a.one_1:hover {background-color: #AAEAFF;}/*显示时鼠标悬停时的样式*/
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<a class="one" href="#1">网页设计
<table><tr><td>
    <a class="one_1" href="#one_1">XHTML</a>
    <a class="one_1" href="#one_1">CSS</a>
    <a class="one_1" href="#one_1">ECMAScript</a>
    <a class="one_1" href="#one_1">ASP&SQL</a>
</td></tr></table>
</a>
</div>
<div class="nonemenu">
<a href="#"><div class="holder">网页设计<br /></a>
    <a class="one_1" href="#one_1">XHTML</a>
    <a class="one_1" href="#one_1">CSS</a>
    <a class="one_1" href="#one_1">ECMAScript</a>
    <a class="one_1" href="#one_1">ASP&SQL</a>
</div>
</div>
</body>
</html>

【声明】本站刊载的《css下拉菜单》一文如果有侵害你权益的情况，请联系我们。我们将及时采取措施。
QQ：44637339　Email:just6@163.com　Tel:13355163107 Lining studios