Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

HTML разметка

Структура самого меню довольно навороченная из-за его внешнего вида. Но в основе лежит обычный неупорядоченный список.

                <!-- Start Menu -->
                <div id="menu">                       
                    <div class="active" id="nav">   
                        <ul>
                            <li class="active">
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Главная
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Форум
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Новости
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                                <ul>
                                    <li class="toparrow"></li>
                                    <li class="noback">
                                        <span>
                                            <span class="span_nonactive">
                                                <a class="sub" href="#">
                                                    Пункт 0
                                                </a>
                                            </span>
                                        </span>
                                    </li>
                                    <li class="menubottom"></li>
                                </ul>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Видео
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                                <ul>
                                    <li class="toparrow"></li>
                                    <li class="noback">
                                        <span>
                                            <span class="span_nonactive">
                                                <a class="sub" href="#">Пункт 1</a>
                                            </span>
                                        </span>
                                    </li>
                                    <li class="menubottom"></li>
                                </ul>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Музыка
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                                <ul>
                                    <li class="toparrow"></li>
                                    <li class="noback">
                                        <span>
                                            <span class="span_nonactive">
                                                <a class="sub" href="#">
                                                    Пункт 2
                                                </a>
                                            </span>
                                        </span>
                                    </li>
                                    <li class="menubottom"></li>
                                </ul>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Контакты
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Ссылки
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                                <ul>
                                    <li class="toparrow"></li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 3
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 4
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 5
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 6
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 7
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 8
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 9
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="#">
                                                        Пункт 10
                                                    </a>
                                                </span>
                                            </span>
                                        </li>
                                        <li class="menubottom"></li>
                                </ul>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="#">
                                            Отзывы
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                            </li>
                        </ul>
                    </div>   
                </div>
                <!-- End Menu -->

CSS

#nav ul li {
    margin-left:0px;
    position: relative;}

#nav a {
    color:#383838;
    cursor:pointer;
    display:block;
    float:left;
    font-size:16px;
    font-weight:bold;
    height:68px;
    line-height:17px;
    margin-left:25px;
    margin-top:0;
    overflow:hidden;
    padding-left:3px;
    padding-right:3px;
    padding-top:25px;
    text-decoration:none;
    text-shadow:1px 1px #ffffff;}

#nav a span {
    display:block;
    color:#383838;
    font-weight:normal;
    font-size:11px;}

#nav li li a {
    margin-left:0px;
    line-height:35px;
    margin-top:0px;
    height: 30px;
    background: none;
    font-weight: normal;
    padding: 0;
    text-indent: 18px;}

#nav li li {
    text-align: left;
    width: 233px;
    float: left;
    padding: 0;
    background: none;
    height:30px;
    padding-top:0px;}

#nav ul li ul li a {
    font-size:12px;
    line-height:28px;
    font-weight: normal;
    margin-left:-2px;
    width:225px; }

#nav ul li a {
    background: none; }

#nav ul li ul li {
    width:230px;
    background:transparent url(../images/fusion_ddmenumidh.png) repeat-x scroll 0 -33px; }
   
#nav ul li ul li:hover {
    background:transparent url(../images/fusion_ddmenumidh.png) repeat-y 0px 0px; }  
     
#nav {
    position:relative;
    z-index:2;
    height: 30px;}
#nav, #nav ul {
    list-style: none;
    padding:0px 0px 0;}

#nav ul {
    float:left;
    padding: 0;
    margin: 0;
    margin:-3px 0 0;}
   
#nav ul ul a {
    display: block;
    text-decoration: none;
    width: 233px;
    text-transform: none;}

#nav li {
    float: left;
    padding: 0;
    margin-right:0px;
    background: none;
    height: 51px;}

#nav li ul {
    top: 59px;
    position: absolute;
    left: -999em;
    height: auto;
    width:  233px;
    border-width: 0;
    margin: 0;
    padding: 0;
    margin-left:16px;
    z-index: 4;}

#nav li ul a {
    font-weight: bold;
    color:#FFFFFF;}
#nav li ul ul {
    width:230px;
    margin: -70px 0 0 227px;}

* html #nav li ul ul {
    margin: -74px 0 0 227px;}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{
    left: -999em;}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{
    left: 0;
    position: absolute;}


#nav li:hover ul {
    left: 0;
    background-position: 0 0;}


#nav ul li:hover {
    background:transparent;
    color:#000000;}

#nav li:hover span a{
    color:#ffffff;}
   
    #nav ul li:hover ul li span span a{
    color:#ffffff;}
   
        #nav ul li ul li:hover ul li span span a{
            color:#ffffff;}
               
                #nav ul li ul li ul li:hover ul li span span a{
                    color:#ffffff;}
   
        #nav ul li ul li:hover span span a{
            color:#ffffff;}
   
            #nav ul li ul li ul li:hover span span a{
                color:#ffffff;}
               
                #nav ul li ul li ul li ul li:hover span span a{
                    color:#ffffff;}

#nav ul li.active a {
    background:transparent url(../images/fusion_mmiddle.png) repeat-x scroll left 1pt;
    color:#ffffff;
    text-shadow:1px 1px #000000;}   

#nav ul li:hover a{
    background:transparent url(../images/fusion_mmiddle.png) repeat-x scroll left 1pt;
    color:#ffffff;
    text-shadow:1px 1px 1px #000000;}
   
    #nav ul li:hover ul li a{
        background:transparent;
        color:#ffffff;}
       
    #nav ul li ul li:hover a{
        color:#ffffff;
        width:230px;}   
       
#nav li.active span.outer_active, #nav span.outer_active:hover, #nav ul li:hover span.outer_active {
    background:transparent url(../images/fusion_mleft.png) no-repeat scroll 0 1pt;
    height:68px;}

#nav ul li span.outer {
    height:68px;
    width:12px;
    float:left;}       
       
    #nav ul li:hover span.outer, #nav ul li a.active:hover span.span_active, #nav ul li.active span.outer  {
        height:68px;
        width:23px;
        float:left;
        background:transparent url(../images/fusion_mright.png) no-repeat scroll 0 1pt;}

    #nav ul li span.outer, #nav ul li a.active span.span_active, #nav ul li.active span.outer  {
        height:68px;
        width:23px;}
       
        #nav ul li ul li:hover span.span_active {
            background:none;}

#nav span.span_active, #nav span.span_active:hover {
    height:53px;
    width:6px;
    float:left;
    background:transparent url(../images/fusion_mright.png) no-repeat scroll 0 1pt;
}

#nav ul li ul li span.span_active, #nav ul li ul li span.span_active:hover {
    height:29px;}

.outer_active {
    display:block;
    height:32px;
    float:left;}
     
#nav a span:hover, #nav li:hover a span, #nav li.active span, #nav li.over a span{
    color:#cccccc;
}
   
#nav ul li li:hover span{
    background:none;
    color:#FFFFFF;}

#nav ul li li span.span_active {
    background:none;}     

/* Rounded menu top/bottoms */
#nav ul li.toparrow, #nav ul li.toparrow:hover {
    height:16px;
    line-height:25px;
    width:230px;
    background:transparent url(../images/fusion_ddmenutop.png) no-repeat scroll 0 0;}
       
#nav ul li.menubottom, #nav ul li.menubottom:hover {
    background:transparent url(../images/fusion_ddmenubot.png) no-repeat scroll 0 0;
    height:17px;
    line-height:25px;
    width:230px;}

javascript

И простейший скрипт, в отличие от навороченного css.

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#nav li").hover(function(){
                    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
                },function(){
                    jQuery(this).find('ul:first').css({visibility: "hidden"});
                });
            });
        </script>

СКАЧАТЬСкачек: 3488
9,15 Kb
Кто скачал?

ДЕМОПосмотреть
пример