Аналог со скриптом: Выпадающее меню. rps

Выпадающее меню при наведении мыши посредством CSS

ДЕМО

Туда, где нужно меню:

Код:
<ul id="nav">
	    <li>
	        <a href="#" title="НАВИГАЦИЯ">НАВИГАЦИЯ</a>
	        <ul>
	            <li><a href="#">ССЫЛКА1</a></li>
	            <li><a href="#">ССЫЛКА2</a></li>
	            <li><a href="#">ССЫЛКА3</a></li>
	        </ul>
	    </li>	
	    
	    <li>
	        <a href="#" title="Партнеры">ПАРТНЕРЫ</a>
	        <ul>
	            <li><a href="http://www.nord-russe.fr/">
<img  style="border:0px;"src="http://www.nord-russe.fr/images/stories/bannerNR.gif" width="88" height="31" alt="Сайт русофонов севера Франции"/></a></li>
	            <li><a href="http://www.nord-russe.fr/">
<img  style="border:0px;"src="http://www.nord-russe.fr/images/stories/bannerNR.gif" width="88" height="31" alt="Сайт русофонов севера Франции"/></a></li>
	            <li><a href="http://www.nord-russe.fr/">
<img  style="border:0px;"src="http://www.nord-russe.fr/images/stories/bannerNR.gif" width="88" height="31" alt="Сайт русофонов севера Франции"/></a></li>
	        </ul>
          </li>
	</ul>

В любое окно стиля без тегов <style> или в html-верх:

Код:
<style>
/*------------------------------------*\
	   МЕНЮ, НАВИГАЦИЯ
	\*------------------------------------*/
	#nav{
	    float:left;
	    width:100%;
	    list-style:none;
	    font-weight:bold;
	    margin-bottom:10px;
	}
	#nav li{
	    float: right;
	    margin-right:10px;
	    position:relative;
	    display:block;
	}
	#nav li a{
	    display:block;
	    padding:5px;
	    color:#fff;
	    background:#333;
	    text-decoration:none;
	     
	    text-shadow:1px 1px 1px rgba(0,0,0,0.75); 
	    -moz-border-radius:2px;
	    -webkit-border-radius:2px;
	    border-radius:2px;
	}
	#nav li a:hover{
	    color:#fff;
	    background:#6b0c36;
	    background:rgba(107,12,54,0.75);
	    text-decoration:underline;
	}
	 
	/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
	#nav ul{
	    list-style:none;
	    position:absolute;
	    left:-9999px; 
	    opacity:0; 
	    -webkit-transition:0.25s linear opacity; 
	}
	#nav ul li{
	    padding-top:1px;
	    float:none;
	    background:url(dot.gif);
	}
	#nav ul a{
	    white-space:nowrap;
	    display:block;
	}
	#nav li:hover ul{ 
	    left:0; 
	    opacity:1; 
	}
	#nav li:hover a{ 
	    background:#6b0c36;
	    background:rgba(107,12,54,0.75); 
	    text-decoration:underline;
	}
	#nav li:hover ul a{ 
	    text-decoration:none;
	    -webkit-transition:-webkit-transform 0.075s linear;
	}
	#nav li:hover ul li a:hover{
	    background:#333;
	    background:rgba(51,51,51,0.75); 
	    text-decoration:underline;
	    -moz-transform:scale(1.05);
	    -webkit-transform:scale(1.05);
	}
</style>

ПОЯСНЕНИЯ:
Больше вкладок? - размножаем вот эту часть в пером куске кода:

<li>
        <a href="#" title="НАВИГАЦИЯ">НАВИГАЦИЯ</a>
        <ul>
            <li><a href="#">ССЫЛКА1</a></li>
            <li><a href="#">ССЫЛКА2</a></li>
            <li><a href="#">ССЫЛКА3</a></li>
        </ul>
    </li>

Больше ссылок? - размножаем это:

<li><a href="#">ССЫЛКА1</a></li>

Пояснение к стилю для продвинутых:

/*------------------------------------*\
   МЕНЮ, НАВИГАЦИЯ
\*------------------------------------*/
#nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li{
    float: right;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
     
    text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(dot.gif);
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:#333;
    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}

Теги: выпадающее меню,навигация