None

None

by ddee

HTML

<div id="header_bar">
    <div id="gradient"></div>
    <div id="logo"></div>
    <ul id="menu">
        <li><a id="Home">Home</a>
        </li>
        <li><a id="Gallery">Gallary</a>
        </li>
        <li><a id="News">News</a>
        </li>
        <li><a id="About">About Us</a>
        </li>
        <li><a id="Contact">Contact</a>
        </li>
    </ul>
</div>

CSS

#header_bar {
    background:url('http://i48.fastpic.ru/big/2013/0422/c3/a90696886d7fa896130e0d778e0a89c3.png');
    width:615px;
    height:62px;
    position:relative;
    top:18px;
    left:333px;
}
#gradient {
    background: -moz-linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .9)75%);
    width:615px;
    height:62px;
    position:absolute;
    top:0;
    left:0;
}
#logo {
    background:url('http://i48.fastpic.ru/big/2013/0422/f9/33418f99409d36e941b402e54433d0f9.png') no-repeat;
    width:30%;
    height:100%;
    margin:5px 0 0 20px;
    float:left;
    position:absolute;
}
#menu {
    margin:0;
    padding-left:225px;
    position:absolute;
}
li {
    display:inline-block;
    padding:10px 12px;
    margin:10px 0 0 0;
}
li:hover {
    display:inline-block;
    padding:10px 11px;
    background:#FEFEFD;
    border:1px solid #FEFEFD;
    border-radius:7px 7px 0 0;
    font: bold 13px Arial, sans-serif;
    color:#397C0F;
    box-shadow:4px -4px 5px -5px rgba(0, 0, 0, .5), -4px -4px 5px -5px rgba(0, 0, 0, .5);
}
#Home {
    font: bold 13px Arial, sans-serif;
    color:#6B6C6A;
    padding:5px;
}
#Home:hover {
    color:green;
}
#Gallery {
    font: bold 13px Arial, sans-serif;
    color:#6B6C6A;
    border:1px solid transparent;
}
#Gallery:hover {
    color:green;
}
#News {
    font: bold 13px Arial, sans-serif;
    color:#6B6C6A;
}
#News:hover {
    color:green;
}
#About {
    font: bold 13px Arial, sans-serif;
    color:#6B6C6A;
}
#About:hover {
    color:green;
}
#Contact {
    font: bold 13px Arial, sans-serif;
    color:#6B6C6A;
}
#Contact:hover {
    color:green;
}