Penguination Project

Hello, we will create today great horizontal CSS menu used at Youtube Video Collector website.

You can use this CSS code to create your horizontal menu. It works great with any browser.

/** MAIN-MENU */

#main-menu {
margin: 0px 0px 10px 0px;
text-transform: uppercase;
height: 55px;

}

#main-menu ul {

margin: 0 auto;
padding: 11px 0px 0px 7px;
list-style: none;

}

#main-menu li {
display: inline;
position: relative;

}

#main-menu a {
padding: 11px 15px 14px 15px;
text-align:center;
text-decoration: none;

color: #FFFFFF;

}

#main-menu a:hover {
clear:both;
background:#d73030;
color: #ffffff;

}

#main-menu .first a {
background: none;
}

And html code used to insert horizontal css menu  into your webpage :

<div id=”main-menu”>
<ul>
<li><a href=”">first link</a></li>
<li><a href=”">second link</a></li>
</ul>
</div>

That’s it, this menu looks really good on youtube video collector website, it could be cool with your own website.

Good luck !