Падащо меню от нормално HTML меню

[Mapu0]

Здравейте, имам едно меню и искам да г направя да е падащо,а в момента е статично.как може да стане това нещо

ето и малко код :

<table align="center" width="980" style="">
								<tr>
									<td><center><a href="/index.php" style="text-decoration : none;" title="{$lang.home|escape}"><div class="menu"><div style="position : absolute;margin-top : 12px;margin-left : 50px;text-decoration : none;">{$lang.home|escape}</div></div></center></a></td>
									<td><center><a href="#" style="text-decoration : none;" title="Меню тектст"><div class="menu"><div style="position : absolute;margin-top : 12px;margin-left : 13px;">Меню тектст>></div></div></a></center></td>
									<td><center><a href="#" style="text-decoration : none;" title="Меню тектст"><div class="menu"><div style="position : absolute;margin-top : 12px;margin-left : 49px;">Полети</div></div></a></center></td>
									<td><center><a href="#" style="text-decoration : none;" title="Меню тектст"><div class="menu"><div style="position : absolute;margin-top : 12px;margin-left : 49px;">Хотели</div></div></a></center></td>
									<td><center><a href="#" style="text-decoration : none;" title="Меню тектст"><div class="menu"><div style="position : absolute;margin-top : 12px;margin-left : 40px;">Меню тектст</div></div></a></center></td>
									<td><center><a href="/contacts" style="text-decoration : none;" title="{$lang.contacts|escape}"><div class="menu"><div style="position : absolute;margin-top : 12px;margin-left : 40px;">Меню тектст</div></div></a></center></td>
								</tr>
							</table>

и малко css :

[css]
.menu_optioin{
background : url('../images/buttom_menu.png');
width : 180px;
height : 42px;
display : block;
text-decoration : none;
font-size : 13px;
color : white;
margin-top : -10px;
text-align : center;
}
.menu_optioin a{
background : url('../images/buttom_menu.png');
width : 180px;
height : 42px;
display : block;
text-decoration : none;
font-size : 13px;
color : white;
margin-top : 19px;
position : absolute;
text-align : center;
}
.menu_optioin:hover{
text-decoration : none;
color : black;
}
.menu {
text-align : center;
background : none;
font-family : a_FuturaRoundDemiItalic;
font-size : 15px;
height : 46px;
width : 150px;
position : absolute;
color : black;
margin-top : -4px;
margin-left : -22px;
text-decoration : none;

}
.menu a:hover{
text-decoration : none;
}
.menu:hover {
height : 46px;
width : 150px;
text-decoration : none;
position : absolute;
color : blue;
background : url("../images/1px.png") repeat;
text-decoration : none;
margin-top : -3px;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;

-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
}
.active_menu_link {
height : 86px;
width : 150px;
font-size : 15px;
text-decoration : none;
position : absolute;
color : blue;
background : none ;
opacity : 0.5;
margin-top : -3px;
border-left : 1px solid silver ;
border-right : 1px solid silver ;
-webkit-border-radius: 9px;
}
[/css]

от цялото меню трябва да има един бутон който да е падащо и от там да има опции.Как може да стане?

Благодаря предварително.

 

[bytheway]

Скоро попаднах на един доста лесен урок за меню, което използва CSS и jQuery.

Надявам се да ти свърши работа.

 

[perer]

Здравей!
Можеш да направиш падащо меню много лесно само със CSS.
Но преди това кода ти е написан кофти. Таблиците са старо нещо и не се използват вече много. Също така тага <center> вече не е в стандартите на HTML и не се използва. Другото, което е няма смисъл да слагаш вътрешни стилове на всеки линк като същите неща можеш да ги сложиш в един клас и да зададеш същото нещо по много по-пригледен вид.
Направил съм преработка и на HTML-а и на CSS-а, като в кода е включено и падащото меню. Ако имаш някави въпроси пиши
Успех! :?:

<div class="nav">
    <ul>
    <li class="menu">
        <a href="/index.php" title="{$lang.home|escape}">{$lang.home|escape}</a>
    </li>
    <li class="menu">
        <a href="#" title="Меню тектст">Меню текст >> </a>
        <div class="subnav">
            <a href="#" title="Подменю">Подменю текст</a>
            <a href="#" title="Подменю">Подменю текст</a>
            <a href="#" title="Подменю">Подменю текст</a>
            <a href="#" title="Подменю">Подменю текст</a>
        </div>
    </li>
    <li class="menu"><a href="#" title="Меню тектст">Полети</a></li>

    <li class="menu"><a href="#" title="Меню тектст">Хотели</a></li>
    
    <li class="menu"><a href="#" title="Меню тектст">Меню текст</a></li>

    <li class="menu"><a href="/contacts" title="{$lang.contacts|escape}">Меню тектст</a></li>
    </ul>
       
</div>

[css]a{
text-decoration: none;
color: black;
}
.nav{
width: 980px;
}

.menu{
text-align : center;
background : none;
font-family : a_FuturaRoundDemiItalic;
font-size : 15px;
height : 46px;
width : 150px;
float: left;
color : black;
}
ul{
list-style: none;
}

.menu a:hover{
color: blue;
}
.menu:hover {
height : 46px;
width : 150px;
background : url("../images/1px.png") repeat;
cursor: pointer;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;

-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
}
li.menu:hover .subnav{
display: block;
}
.subnav{
display: none;
padding: 10px 5px 5px 5px;
background: orange;
}
.active_menu_link {
height : 86px;
width : 150px;
font-size : 15px;
color : blue;
background : none ;
opacity : 0.5;
margin-top : -3px;
border-left : 1px solid silver ;
border-right : 1px solid silver ;
-webkit-border-radius: 9px;
}[/css]