Glossy Vertical Menu

图片素材

The CSS:

<style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    .glossymenu{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    width: 170px;
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }
    .glossymenu li a{
    background: white url(/menupic/glossyback.gif) repeat-x bottom left;
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    * html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
    width: 160px;
    }
    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }
    .glossymenu li a:hover{
    background-image: url(/menupic/glossyback2.gif);
    }
    </style>

The HTML:

<ul class="glossymenu">
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com" >byecool</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com" >CSS Examples</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">JavaScript Reference</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">DOM Reference</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">CSS Drive</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com" style="border-bottom-width: 0">Coding Forums</a></li>
    </ul>

Copy Rights Reserved: 所有素材均来自互联网。仅提供为学习Div+CSS布局及分享创作经验，请勿作为它用，如出现版权纠纷，均与本站无关。

Glossy Vertical Menu

热门菜单