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

请输入您要查询的范文：

　

标题 很漂亮很有个性的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>
    <!--
    @importdhtml-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/17 18:25:02