zoukankan      html  css  js  c++  java
  • CSS打造三级下拉菜单

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
    <meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
    <title>CSS制作的三级菜单,sky整理收集。</title>
    <style type="text/css">
    <!--
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #menu {
    background-color: #FEF0E5;
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');
    }
    #nav, #nav ul {
    float:left; /* 菜单总体水平位置 */
    clear:right;
    list-style:none;
    /*line-height:22px; 一级菜单高 */
    /*background: #eee; 所有菜单移出色 */
    /*font-weight: bold;8*/
    padding:0px;
    margin:0px;
    /*border:1px solid #ccc;
    border-right: 0px;*/
    }
    #nav ul ul{
    /*border:1px solid #ccc;*/
    border-top:0px;
    border-right:0px;
    }
    #nav a {
    120px;
    display:block;
    color:#333;
    text-decoration:none;
    text-align:left;
    /*border-right:1px solid #CCC;*/
    padding: 3px 4px 3px 7px;
    }
    #nav a:hover{
    color:#000;
    border:1px solid #CCC;
    margin: 0px;
    padding: 3px 5px 3px 6px;
    background-color: #f1f1f1;
    text-decoration: none;
    } /* 所有 a:hover 字体样式 */
    #nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
    #nav li {
    float:none;
    clear:right;
    height:22px;
    120px;
    }
    #nav li ul li{
    float:none;
    clear:right;
    height:22px;
    120px;
    }
    #nav li ul { /* 二级弹出位 */
    position:absolute;
    margin:-22px 0px 0px 119px;
    padding:0;
    left:-9999em;
    120px;
    font-weight:normal;
    display:block;
    border:1px solid #CCCCCC;
    background:#fff;
    }
    /* 二级菜单宽 */
    #nav li ul a {
    120px; /* 二级菜单宽 */
    /*line-height:24px; 二级菜单高
    border:1px solid #CCC;*/
    height:22px;
    text-align:left;
    margin: 0px;
    }
    #nav li ul ul {
    margin:-22px 0px 0px 120px;
    border:1px solid #CCC;
    } /* 三级弹出位 */
    #nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
    #nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
    left:auto;
    height:22px;
    } /* 所有弹出菜单自动左边距 */
    #nav li:hover, #nav li.sfhover {
    background:#f1f1f1;
    height:22px;
    }
    /* 所有悬浮样式 */
    -->
    </style>
    <script type="text/javascript"><!--//--><![CDATA[/><!--
    img1=new Image();//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    img1.src="flyout_arrow.gif";
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\b"), "");
    }
    }
    }
    window.onload=sfHover;
    //--><!]]></script>
    </head>
    <body>
    <a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
    <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
    <table width="120" border="0" cellspacing="0" cellpadding="0" >
    <tr>
    <td valign="top" id="menu">
    <ul id="nav">
    <li><a href="http://www.zzjs.net" target="_blank"> <span style="font-size: 9pt">首页</span></a></li>
    <li><a href="http://zzjs.net/" target="_blank" class="selected"><span style="font-size: 9pt">站长特效网</span></a><span style="font-size: 9pt">
    </span>
    <ul>
    <li ><a href="http://zzjs.net/?cat=1" class="selected"><span style="font-size: 9pt">站长特效</span> </a>
    <ul>
    <li><a href="http://zzjs.net/?cat=1"> <span style="font-size: 9pt">站长特效</span> </a>
    <li><a href="http://zzjs.net/?cat=1"> <span style="font-size: 9pt">整站项目</span></a></li>
    <li><a href="http://zzjs.net/?cat=1"> <span style="font-size: 9pt">网站分析策划</span></a></li>
    <li><a href="http://zzjs.net/?cat=2" target="_blank"> <span style="font-size: 9pt">网页设计制作</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">网站制作与开发</span></a></li>
    <li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">网站flash动画</span></a></li>
    <li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">网站服务器</span></a></li>
    </ul>
    </li>
    <li ><a href="http://zzjs.net/?cat=2" class="selected"><span style="font-size: 9pt">网页特效</span></a><span style="font-size: 9pt">
    </span>
    <ul>
    <li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">网站项目 </span> </a>
    <li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">平面设计</span></a></li>
    <li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">CAD工程图设计</span></a></li>
    <li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">3D建模与动画</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">Flash游戏动画</span></a></li>
    <li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">音效及音乐</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">游戏原画设定</span></a></li>
    </ul>
    </li>
    <li ><a href="http://zzjs.net/?cat=11" class="selected"><span style="font-size: 9pt">广告代码</span></a><span style="font-size: 9pt">
    </span>
    <ul>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">应用软件</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">游戏开发</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">驱动程序</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">嵌入式开发</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">手机开发</span></a></li>
    <li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">单片机</span></a></li>
    <li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">数据库设计</span></a></li>
    <li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">代码移植</span></a></li>
    </ul>
    </li>
    <li><a href="http://zzjs.net/"><span style="font-size: 9pt">rss订阅</span></a></li>
    </ul>
    </li>
    <li><a href="http://www.alixixi.com/" target="_blank" class="selected"><span style="font-size: 9pt">阿里西西</span></a><span style="font-size: 9pt">
    </span>
    <ul>
    <li><a class="selected" href="http://www.alixixi.com/"><span style="font-size: 9pt">阿里西西</span></a><span style="font-size: 9pt">
    </span>
    <ul>
    <li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">实用信息与工具 </span> </a></li>
    <li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">新闻动态</span></a></li>
    <li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">知识与技能</span></a></li>
    <li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">设计制作与欣赏</span></a></li>
    <li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">项目交易经验谈</span></a></li>
    <li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">下载</span></a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://zzjs.net/"><span style="font-size: 9pt">您自定义</span></a></li>
    <li><a href="http://zzjs.net/" target="_blank"><span style="font-size: 9pt">您自定义</span></a></li>
    <li><a href="http://zzjs.net/"><span style="font-size: 9pt">您自定义</span></a></li>
    </ul>
    </td>
    </tr>
    </table>
    </body>
    </html>

  • 相关阅读:
    NBUT 1120 Reimu's Teleport (线段树)
    NBUT 1119 Patchouli's Books (STL应用)
    NBUT 1118 Marisa's Affair (排序统计,水)
    NBUT 1117 Kotiya's Incantation(字符输入处理)
    NBUT 1115 Cirno's Trick (水)
    NBUT 1114 Alice's Puppets(排序统计,水)
    188 Best Time to Buy and Sell Stock IV 买卖股票的最佳时机 IV
    187 Repeated DNA Sequences 重复的DNA序列
    179 Largest Number 把数组排成最大的数
    174 Dungeon Game 地下城游戏
  • 原文地址:https://www.cnblogs.com/skyay/p/3826171.html
Copyright © 2011-2022 走看看