Ну.. Это легко делается на чистом цсс. Загугли Меню на CSS. Как готовый пример
elinext.com
Меню там сделано списком:
<!--shcode--><pre><code class='html'> <ul id="hmenu">
<li><a href="/">Home</a> </li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/mobiledevelopment">Mobile applications</a></li>
<li><a href="/cloudcomputing">Cloud computing</a></li>
<li><a href="/webdevelopment">Web solutions</a></li>
<li><a href="/itinfrastructure">IT infrastructure management</a></li>
<li><a href="/rnd">R&D Services</a></li>
<!--<li><a href="#">Accelerated product development</a></li>-->
</ul>
</li>
<li><a href="/competencies">Competencies</a>
</li>
<li><a href="/resource">Resources</a>
<ul>
<li><a href="/casestudies">Case studies</a></li>
<li><a href="/articlesmain">Articles</a></li>
<li><a href="/presentation">Presentations</a></li>
<li><a href="/freesoftware">Free software</a></li>
<!--<li><a href="#">Free services</a></li>-->
<!--<li><a href="#">Press releases</a></li>-->
</ul>
</li>
<li><a href="/company">About Us</a>
<ul>
<li><a href="http://www.elinext.com/overview">Company Overview</a></li>
<li><a href="http://www.elinext.com/partnershipmodels">Working Models</a></li>
<li><a href="http://www.elinext.com/customers">Clients</a></li>
<li><a href="http://www.elinext.com/customertestimonials">Testimonials</a></li>
<li><a href="http://www.elinext.com/management">Management</a></li>
<li><a href="/socialnetworks">Media channel</a></li>
<li><a href="http://www.elinext.com/events">Events</a></li>
</ul>
</li>
<li><a href="/contact">Contacts</a> </li>
</ul>[/CODE]
<!--shcode--><pre><code class='css'>ul#hmenu {
float:left;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
height: 48px;
font: bold 12px/28px Tahoma;
line-height: 48px;
}
ul#hmenu li {
margin: 0;
border-width:1px;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
background-image:url('/images/menuBg.jpg');
}
ul#hmenu ul {
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
display: none;
position: absolute;
top: 49px;
left: 0;
z-index: 1;
}
ul#hmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#hmenu ul ul li a:hover
{
background-color: #808298 !important;
color: #F6F6F6 !important;
opacity: 1 !important;
border-left: #FFFFFF solid 1px;
}
ul#hmenu ul li a
{
padding-top: 0px;
font-size: 13px !important;
}
ul#hmenu ul ul li a
{
background-color: #FFFFFF !important;
color: #393939 !important;
opacity: 0.95!important;
filter: alpha(opacity=95)!important;
border-left: 1px;
border-left: #FFFFFF solid 1px;
}
ul#hmenu ul li {
width: 240px;
float: left;
display: block !important;
display: inline;
background-image:none;
}
/* Main Menu */
#menuShell
{
width:975px;
background-image:url('/images/menuBg.jpg');
}
ul#hmenu a {
border: 0px;
padding: 0 13px;
float: none !important;
float: left;
display: block;
background-image:url('/images/menuWhite.jpg');
background-repeat:no-repeat;
color: #393939;
font: bold 12px/28px Tahoma;
text-decoration: none;
height: auto !important;
height: 1%;
line-height: 48px;
padding-top: 2px;
}
/* Main Menu Hover */
ul#hmenu a:hover,
ul#hmenu li:hover a,
ul#hmenu li.iehover a {
background-image:url('/images/menuBgHover.jpg');
color: #393939;
background-repeat:repeat;
}
/* Second Menu */
ul#hmenu li:hover li a,
ul#hmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #F6F6F6;
color: #474747;
font-size: 8pt;
font-weight:normal;
line-height: 30px;
opacity: 0.95;
filter: alpha(opacity=95);
}
/* Second Menu Hover */
ul#hmenu li:hover li a:hover,
ul#hmenu li:hover li:hover a,
ul#hmenu li.iehover li a:hover,
ul#hmenu li.iehover li.iehover a {
border-top: 1px solid #FFFFFF;
background: #808298;
color: #FFFFFF;
opacity: 1;
}
ul#hmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 240px;
}
ul#hmenu li:hover ul ul,
ul#hmenu li.iehover ul ul {
display: none;
}
ul#hmenu li:hover ul,
ul#hmenu ul li:hover ul,
ul#hmenu li.iehover ul,
ul#hmenu ul li.iehover ul {
display: block;
}[/CODE]
Cамое оно в li:hover
