Guten Tag,
ich habe ein reines css Dropdown Menü erstellt.
An sich finde ich es sehr schon, doch noch schöner wäre es, wenn die Unterpunkt langsam ausfahren und nicht sofort da stehen.
Hier ist mein Qullcode:
index.php
style.css
ich habe ein reines css Dropdown Menü erstellt.
An sich finde ich es sehr schon, doch noch schöner wäre es, wenn die Unterpunkt langsam ausfahren und nicht sofort da stehen.
Hier ist mein Qullcode:
index.php
HTML:
<!-- Top Menü -->
<div id="top_menu">
<ul>
<li> <a href="#"> Punkt 1 </a>
<ul>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 2 </a> </li>
<li> <a href="#"> Unterpunkt 3 </a> </li>
</ul>
</li>
<li> <a href="#"> Punkt 2 </a>
<ul>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 2 </a> </li>
<li> <a href="#"> Unterpunkt 3 </a> </li>
</ul>
</li>
<li> <a href="#"> Punkt 3 </a> </li>
<li> <a href="#"> Punkt 4 </a> </li>
<li> <a href="#"> Punkt 5 </a>
<ul>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 1 </a> </li>
<li> <a href="#"> Unterpunkt 1 </a> </li>
</ul>
</li>
</ul>
</div>
style.css
CSS:
/* Topmenu Layout */
#top_menu { margin-left: auto; margin-right: auto; width: 760px; height: 50px; background: url(../images/bg.png) repeat-x; }
#top_menu ul { margin: 0; padding: 0; }
#top_menu ul li { margin: 0; padding: 0; list-style: none; float: left; position: relative; }
#top_menu ul li a{ display:block; }
#top_menu ul li ul { position: absolute; visibility: hidden; }
#top_menu ul li:hover ul { visibility: visible; }
/* Topmenu Styling */
#top_menu ul { margin-top: 7px; }
#top_menu ul li { width: 152px; height: 30px; background: url(../images/bg.png) repeat-x; }
#top_menu ul li:hover { background: url(../images/bg_hover.png) repeat-x; }
#top_menu ul li a { color: #FFF; text-decoration: none; text-align: center; padding-top: 3px; }
#top_menu ul li ul li { opacity:0.95; filter: alpha(opacity=95); -moz-opacity: 0.95; }