Êàê ñäåëàòü ïðîñòîå, ãîòîâîå ê èñïîëüçîâàíèþ, ãîðèçîíòàëüíîå âûïàäàþùåå CSS ìåíþ Ñàìàÿ ïðîñòàÿ ìåíþøêà, ïðîùå íåêóäà. Ðàñïèñûâàòü òóò íå÷åãî, ïðîñòî ñìîòðèòå êàê ñäåëàíî, òàêóþ ìåíþøêó êàæäûé âåá ìàñòåð äîëæåí óìåòü äåëàòü áåç ïîäñêàçîê è ïîäñìàòðèâàíèé.
<!--Âûïàäàþùåå CSS ìåíþ îò http://megaweb.su/-->
<div id="navigation_panel"> <a href="http://megaweb.su/" title="Ãëàâíàÿ ñòðàíèöà"><img src="menu_home.gif" alt="Ãëàâíàÿ ñòðàíèöà" width="30px" height="30px" /></a>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 1</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 2</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 3</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 4</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 5</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 6</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<ul class="gor_menu1">
<li><a href="#"><span>Êàòåãîðèÿ 7</span></a>
<ul class="gor_menu">
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
<li><a href="#">Ïîäêàòåãîðèÿ</a></li>
</ul>
</li>
</ul>
<br style="height:1px; clear:both;" />
</div>
<!--/Âûïàäàþùåå CSS ìåíþ îò http://megaweb.su/-->
Äàëåå, â ñâîþ òàáëèöó CSS âñòàâëÿåì ýòîò êîä:
/*Âûïàäàþùåå CSS ìåíþ îò http://megaweb.su/*/
:-moz-any-link:focus {
outline: none;
}
a
{
text-decoration:none;
}
.gor_menu1
{
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 130px;
font: normal 11px verdana;
}
.gor_menu1 li
{
position:relative;/**/
display:block;
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 130px;
font: normal 11px verdana;
}
.gor_menu
{
position:absolute;/**/
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 130px;
font: normal 11px verdana;
}
.gor_menu1 span
{
border: 1px solid #365799;
border-left:none;
background: #399;
color: #fff;
display: block;
text-decoration: none;
padding: 8px 8px 9px 8px;
text-align: center;
}
.gor_menu1 li .gor_menu
{
display: none;
}
.gor_menu li a
{
border:1px solid #365799;
border-top: none;
display: block;
color: #fff;
background: #399; /* IE6 Bug */
padding: 5px;
text-decoration: none;
text-align: left;
z-index: 1000;
}
.gor_menu li a:hover
{
color: #000;
background: #edf5f7;
}
.gor_menu1 li a:hover span
{
color: #000;
background: #edf5f7;
}
.gor_menu1:hover li .gor_menu
{
display: block;
}
#navigation_panel
{
width: 950px;
text-align:center;
margin:0 auto;
}
#navigation_panel a img
{
float:left;
border: 1px solid #365799;
}
/* Fix IE. Hide from IE Mac \*/
* html .gor_menu li
{
float: left;
}
* html .gor_menu li a
{
height: 1%;
}
/*Âûïàäàþùåå CSS ìåíþ îò http://megaweb.su/ End */
Âîò è âñ¸! Ñìîòðåòü ïðèìåð ïðîñòîå ãîòîâîå ê èñïîëüçîâàíèþ ãîðèçîíòàëüíîå âûïàäàþùåå CSS ìåíþ Ñêà÷àòü ãîòîâûé ïðèìåð ïðîñòîå ãîòîâîå ê èñïîëüçîâàíèþ ãîðèçîíòàëüíîå âûïàäàþùåå CSS ìåíþ
Âåðíóòüñÿ íàçàä
|