符合WEB标准的div+css导航下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
符合WEB标准的div+css导航下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<html?xmlns="http://www.w3.org/1999/xhtml"?lang="zh-CN">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>52css.com?-?css菜單演示</title>
<style?type="text/css">
<!--
*{}{margin:0;padding:0;border:0;}
body?{}{
font-family:?arial,?宋體,?serif;
font-size:12px;
}
#nav?{}{
line-height:?24px;?list-style-type:?none;?background:#666;
}
#nav?a?{}{
display:?block;?width:?80px;?text-align:center;
}
#nav?a:link?{}{
color:#666;?text-decoration:none;
}
#nav?a:visited?{}{
color:#666;text-decoration:none;
}
#nav?a:hover?{}{
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav?li?{}{
float:?left;?width:?80px;?background:#CCC;
}
#nav?li?a:hover{}{
background:#999;
}
#nav?li?ul?{}{
line-height:?27px;?list-style-type:?none;text-align:left;
left:?-999em;?width:?180px;?position:?absolute;
}
#nav?li?ul?li{}{
float:?left;?width:?180px;
background:?#F6F6F6;
}
#nav?li?ul?a{}{
display:?block;?width:?156px;text-align:left;padding-left:24px;
}
#nav?li?ul?a:link?{}{
color:#666;?text-decoration:none;
}
#nav?li?ul?a:visited?{}{
color:#666;text-decoration:none;
}
#nav?li?ul?a:hover?{}{
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav?li:hover?ul?{}{
left:?auto;
}
#nav?li.sfhover?ul?{}{
left:?auto;
}
#content?{}{
clear:?left;
}
-->
</style>
<script?type=text/javascript><!--//--><![CDATA[//><!--
function?menuFix()?{
var?sfEls?=?document.getElementById("nav").getElementsByTagName("li");
for?(var?i=0;?i<sfEls.length;?i++)?{
sfEls[i].onmouseover=function()?{
this.className+=(this.className.length>0??"?":?"")?+?"sfhover";
}
sfEls[i].onMouseDown=function()?{
this.className+=(this.className.length>0??"?":?"")?+?"sfhover";
}
sfEls[i].onMouseUp=function()?{
this.className+=(this.className.length>0??"?":?"")?+?"sfhover";
}
sfEls[i].onmouseout=function()?{
this.className=this.className.replace(new?RegExp("(??|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul?id="nav">
<li><a?href="http://www.52css.com">產品介紹</a>
<ul>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">服務介紹</a>
<ul>
<li><a?href="http://www.52css.com">服務二</a></li>
<li><a?href="http://www.52css.com">服務二</a></li>
<li><a?href="http://www.52css.com">服務二</a></li>
<li><a?href="http://www.52css.com">服務二服務二</a></li>
<li><a?href="http://www.52css.com">服務二服務二服務二</a></li>
<li><a?href="http://www.52css.com">服務二</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">成功案例</a>
<ul>
<li><a?href="http://www.52css.com">案例三</a></li>
<li><a?href="http://www.52css.com">案例</a></li>
<li><a?href="http://www.52css.com">案例三案例三</a></li>
<li><a?href="http://www.52css.com">案例三案例三案例三</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">關于我們</a>
<ul>
<li><a?href="http://www.52css.com">我們四</a></li>
<li><a?href="http://www.52css.com">我們四</a></li>
<li><a?href="http://www.52css.com">我們四</a></li>
<li><a?href="http://www.52css.com">我們四111</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">在線演示</a>
<ul>
<li><a?href="http://www.52css.com">演示</a></li>
<li><a?href="http://www.52css.com">演示</a></li>
<li><a?href="http://www.52css.com">演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">聯系我們</a>
<ul>
<li><a?href="http://www.52css.com">聯系聯系聯系聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系聯系</a></li>
</ul>
</li>
</ul>
</body>
</html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>52css.com?-?css菜單演示</title>
<style?type="text/css">
<!--
*{}{margin:0;padding:0;border:0;}
body?{}{
font-family:?arial,?宋體,?serif;
font-size:12px;
}
#nav?{}{
line-height:?24px;?list-style-type:?none;?background:#666;
}
#nav?a?{}{
display:?block;?width:?80px;?text-align:center;
}
#nav?a:link?{}{
color:#666;?text-decoration:none;
}
#nav?a:visited?{}{
color:#666;text-decoration:none;
}
#nav?a:hover?{}{
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav?li?{}{
float:?left;?width:?80px;?background:#CCC;
}
#nav?li?a:hover{}{
background:#999;
}
#nav?li?ul?{}{
line-height:?27px;?list-style-type:?none;text-align:left;
left:?-999em;?width:?180px;?position:?absolute;
}
#nav?li?ul?li{}{
float:?left;?width:?180px;
background:?#F6F6F6;
}
#nav?li?ul?a{}{
display:?block;?width:?156px;text-align:left;padding-left:24px;
}
#nav?li?ul?a:link?{}{
color:#666;?text-decoration:none;
}
#nav?li?ul?a:visited?{}{
color:#666;text-decoration:none;
}
#nav?li?ul?a:hover?{}{
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav?li:hover?ul?{}{
left:?auto;
}
#nav?li.sfhover?ul?{}{
left:?auto;
}
#content?{}{
clear:?left;
}
-->
</style>
<script?type=text/javascript><!--//--><![CDATA[//><!--
function?menuFix()?{
var?sfEls?=?document.getElementById("nav").getElementsByTagName("li");
for?(var?i=0;?i<sfEls.length;?i++)?{
sfEls[i].onmouseover=function()?{
this.className+=(this.className.length>0??"?":?"")?+?"sfhover";
}
sfEls[i].onMouseDown=function()?{
this.className+=(this.className.length>0??"?":?"")?+?"sfhover";
}
sfEls[i].onMouseUp=function()?{
this.className+=(this.className.length>0??"?":?"")?+?"sfhover";
}
sfEls[i].onmouseout=function()?{
this.className=this.className.replace(new?RegExp("(??|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul?id="nav">
<li><a?href="http://www.52css.com">產品介紹</a>
<ul>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
<li><a?href="http://www.52css.com">產品一</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">服務介紹</a>
<ul>
<li><a?href="http://www.52css.com">服務二</a></li>
<li><a?href="http://www.52css.com">服務二</a></li>
<li><a?href="http://www.52css.com">服務二</a></li>
<li><a?href="http://www.52css.com">服務二服務二</a></li>
<li><a?href="http://www.52css.com">服務二服務二服務二</a></li>
<li><a?href="http://www.52css.com">服務二</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">成功案例</a>
<ul>
<li><a?href="http://www.52css.com">案例三</a></li>
<li><a?href="http://www.52css.com">案例</a></li>
<li><a?href="http://www.52css.com">案例三案例三</a></li>
<li><a?href="http://www.52css.com">案例三案例三案例三</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">關于我們</a>
<ul>
<li><a?href="http://www.52css.com">我們四</a></li>
<li><a?href="http://www.52css.com">我們四</a></li>
<li><a?href="http://www.52css.com">我們四</a></li>
<li><a?href="http://www.52css.com">我們四111</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">在線演示</a>
<ul>
<li><a?href="http://www.52css.com">演示</a></li>
<li><a?href="http://www.52css.com">演示</a></li>
<li><a?href="http://www.52css.com">演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示</a></li>
<li><a?href="http://www.52css.com">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a?href="http://www.52css.com">聯系我們</a>
<ul>
<li><a?href="http://www.52css.com">聯系聯系聯系聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系聯系</a></li>
<li><a?href="http://www.52css.com">聯系聯系聯系</a></li>
</ul>
</li>
</ul>
</body>
</html>
轉載于:https://www.cnblogs.com/liuweitoo/archive/2007/10/11/920439.html
總結
以上是生活随笔為你收集整理的符合WEB标准的div+css导航下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 汉字点阵原理字模读取与显示
- 下一篇： 转自网络