DD Blue Blocks Menu

Byecool

CSS Library

The CSS:

<style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    #ddblueblockmenu{
    border: 1px solid black;
    border-bottom-width: 0;
    width: 185px;
    }
    #ddblueblockmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }
    #ddblueblockmenu li a{
    display: block;
    padding: 3px 0;
    padding-left: 9px;
    width: 169px; /*185px minus all left/right paddings and margins*/
    text-decoration: none;
    color: white;
    background-color: #2175bc;
    border-bottom: 1px solid #90bade;
    border-left: 7px solid #1958b7;
    }
    * html #ddblueblockmenu li a{ /*IE only */
    width: 187px; /*IE 5*/
    w\idth: 169px; /*185px minus all left/right paddings and margins*/
    }
    #ddblueblockmenu li a:hover {
    background-color: #2586d7;
    border-left-color: #1c64d1;
    }
    #ddblueblockmenu div.menutitle{
    color: white;
    border-bottom: 1px solid black;
    padding: 1px 0;
    padding-left: 5px;
    background-color: black;
    font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }
    </style>

The HTML:

<div id="ddblueblockmenu">
    <div class="menutitle">Byecool</div>
    <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">What's New</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">What's Revised</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Help Forums</a></li>
    </ul>
    <div class="menutitle">CSS Library</div>
    <ul>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Horizontal CSS Menus</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Vertical CSS Menus</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Image Effects</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Form Effects</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com">Boxes & containers</a></li>
    <li><a href="http://www.byecool.com" _fcksavedurl="http://www.byecool.com" style="border-bottom-color: black">Links & Buttons</a></li>
    </ul>
    </div>

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

DD Blue Blocks Menu

热门菜单