Shade Image Tabs Menu

The CSS:

<style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    .shadetabs{
    border-bottom: 1px solid gray;
    /* width: 90%; width of menu. Uncomment to change to a specific width */
    margin-bottom: 1em;
    }
    .shadetabs ul{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }
    .shadetabs li{
    display: inline;
    margin: 0;
    }
    .shadetabs li a{
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background: white url(/menupic/shade.gif) top left repeat-x;
    }
    .shadetabs li a:visited{
    color: #2d2b2b;
    }
    .shadetabs li a:hover{
    text-decoration: underline;
    color: #2d2b2b;
    }
    .shadetabs li.selected{
    position: relative;
    top: 1px;
    }
    .shadetabs li.selected a{ /*selected main tab style */
    background-image: url(/menupic/shadeactive.gif);
    border-bottom-color: white;
    }
    .shadetabs li.selected a:hover{ /*selected main tab style */
    text-decoration: none;
    }</style>

The HTML:

<div class="shadetabs">
    <ul>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Home</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">DHTML</a></li>
    <li class="selected"><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">CSS</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Forums</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Gif Optimizer</a></li>
    </ul>
    </div>

所需图片：

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

Shade Image Tabs Menu

热门菜单