网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 很漂亮很有个性的CSS水平下拉菜单
范文
    代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.ynpxrz.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.ynpxrz.com/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Menu - Horizontal</title>
    <style type="text/css">
    <!--
    @import"dhtml-horiz.css";
    -->
    body {
    margin: 0;
    padding: 30px;
    background: #FFF;
    color: #666;
    }
    h1 {
    font: bold 16px Arial, Helvetica, sans-serif;
    }
    p {
    font: 11px Arial, Helvetica, sans-serif;
    }
    a {
    color: #900;
    text-decoration: none;
    }
    a:hover {
    background: #900;
    color: #FFF;
    }
    /*CSS Code for Menu Begin:*/
    /* Root = Horizontal, Secondary = Vertical */
    ul#navmenu {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 500px; /*For KHTML*/
    list-style: none;
    height: 24px;
    }
    ul#navmenu li {
    margin: 0;
    border: 0 none;
    padding: 0;
    float: left; /*For Gecko*/
    display: inline;
    list-style: none;
    position: relative;
    height: 24px;
    }
    ul#navmenu ul {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 160px;
    list-style: none;
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
    }
    ul#navmenu ul li {
    float: none; /*For Gecko*/
    display: block !important;
    display: inline; /*For IE*/
    }
    /* Root Menu */
    ul#navmenu a {
    border: 1px solid #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    padding: 0 6px;
    float: none !important; /*For Opera*/
    float: left; /*For IE*/
    display: block;
    background: #EEE;
    color: #666;
    font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: auto !important;
    height: 1%; /*For IE*/
    }
    /* Root Menu Hover Persistence */
    ul#navmenu a:hover,
    ul#navmenu li:hover a,
    ul#navmenu li.iehover a {
    background: #CCC;
    color: #FFF;
    }
    /* 2nd Menu */
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
    float: none;
    background: #EEE;
    color: #666;
    }
    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover,
    ul#navmenu li:hover li:hover a,
    ul#navmenu li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover a {
    background: #CCC;
    color: #FFF;
    }
    /* 3rd Menu */
    ul#navmenu li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li a {
    background: #EEE;
    color: #666;
    }
    /* 3rd Menu Hover Persistence */
    ul#navmenu li:hover li:hover li a:hover,
    ul#navmenu li:hover li:hover li:hover a,
    ul#navmenu li.iehover li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover a {
    background: #CCC;
    color: #FFF;
    }
    /* 4th Menu */
    ul#navmenu li:hover li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li.iehover li a {
    background: #EEE;
    color: #666;
    }
    /* 4th Menu Hover */
    ul#navmenu li:hover li:hover li:hover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover li a:hover {
    background: #CCC;
    color: #FFF;
    }
    ul#navmenu ul ul,
    ul#navmenu ul ul ul {
    display: none;
    position: absolute;
    top: 0;
    left: 160px;
    }
    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu li:hover ul ul,
    ul#navmenu li:hover ul ul ul,
    ul#navmenu li.iehover ul ul,
    ul#navmenu li.iehover ul ul ul {
    display: none;
    }
    ul#navmenu li:hover ul,
    ul#navmenu ul li:hover ul,
    ul#navmenu ul ul li:hover ul,
    ul#navmenu li.iehover ul,
    ul#navmenu ul li.iehover ul,
    ul#navmenu ul ul li.iehover ul {
    display: block;
    }
    </style>
    <script type="text/JavaScript">
    navHover = function() {
    var lis = document.getElementById("navmenu").getElementsByTagName("LI");
    for (var i=0; i<lis.length; i++) {
    lis[i].onmouseover=function() {
    this.className+=" iehover";
    }
    lis[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", navHover);
    </script>
    </head>
    <body>
    <h1>CSS Menu - Horizontal</h1>
    <hr />
    <ul id="navmenu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">Work +</a>
    <ul>
    <li><a href="#">Websites +</a>
    <ul>
    <li><a href="#">qrayg</a></li>
    <li><a href="#">qArcade</a></li>
    <li><a href="#">qLoM</a></li>
    <li><a href="#">qDT</a></li>
    </ul>
    </li>
    <li><a href="#">Pen and Ink</a></li>
    <li><a href="#">Free Interfaces</a></li>
    </ul>
    </li>
    <li><a href="#">Learn +</a>
    <ul>
    <li><a href="#">Fireworks +</a>
    <ul>
    <li><a href="#">aquaButton</a></li>
    <li><a href="#">aquaButton2</a></li>
    <li><a href="#">waterDrop</a></li>
    <li><a href="#">lightFX</a></li>
    <li><a href="#">lightFX2</a></li>
    </ul>
    </li>
    <li><a href="#">CSS +</a>
    <ul>
    <li><a href="#">footerStick</a></li>
    <li><a href="#">spriteNav</a></li>
    <li><a href="#">@import</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </body>
    </html>
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 11:06:10