expanding.css

《JavaScript精粹》 源文件下载

/* structural styles and offsets */
ul.expanding, ul.expanding li, ul.expanding ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
}

ul.expanding {
    position: relative;
    cursor: default;
    width: 8.2em;
}

ul.expanding li {
    position: relative;
    text-align: left;
    cursor: pointer;
    cursor: hand;
    width: 8.2em;
    margin: -1px 0 0 0;
}

ul.expanding ul {
    cursor: default;
    width: 8.2em;
    padding: 2px 0;
    position: absolute;
    left: -100em;
}

ul.expanding ul li {
    width: 8.2em;
}


/* design styles */
ul.expanding a:link, ul.expanding a:visited {
    display: block;
    cursor: pointer;
    cursor: hand;
    background: #ffc;
    border: 1px solid #edbb85;
    padding: 5px 7px;
    font: bold 0.7em tahoma, verdana, sans-serif;
    color: #008000;
    text-decoration: none;
    letter-spacing: 1px;
}

ul.expanding a:hover, ul.expanding a:focus, ul.expanding a:active, 
ul.expanding a.rollover:link, ul.expanding a.rollover:visited {
    background: #ffefcf;
    color: #806020;
}


/* submenu indicator arrows */
ul.expanding li.hasmenu > a:link, ul.expanding li.hasmenu > a:visited {
    background: url(down-green.gif) #ffc no-repeat 95% 50%;
}

ul.expanding li.hasmenu > a:hover, 
ul.expanding li.hasmenu > a:focus, 
ul.expanding li.hasmenu > a:active, 
ul.expanding li.hasmenu > a.rollover:link, 
ul.expanding li.hasmenu > a.rollover:visited {
    background: url(down-red.gif) #ffefcf no-repeat 95% 50%;
}

* html ul.expanding li.hasmenu a:link,
* html ul.expanding li.hasmenu a:visited {
    background: expression(/hasmenu/.test(this.parentNode.className) 
        ? "url(down-green.gif) #ffc no-repeat 95% 50%" : "#ffc");
}

* html ul.expanding li.hasmenu a:hover, 
* html ul.expanding li.hasmenu a:active, 
* html ul.expanding li.hasmenu a.rollover:link, 
* html ul.expanding li.hasmenu a.rollover:visited {
    background: expression(/hasmenu/.test(this.parentNode.className) 
        ? "url(down-red.gif) #ffefcf no-repeat 95% 50%" : "#ffefcf");
}


/* browser hacks */
@media screen, projection {
    * html ul.expanding li {
        display: inline; 
        f\loat: left; 
        background: #fff; 
    }
}