Guten Morgen alle zusammen.
Ich probiere vergeblich ein drop down zu basteln.
Sowohl das Main als auch das Submenu soll Horinzontal angeordnet sein,
Das Submenu soll erscheinen und erst wieder verschwinden wenn man im Main Menu einen anderen Punkt ANKLICKT.
Hier mal ein Beispiel wie ich es mir vom aufbau hervorstelle:
http://www.youtube.com/watch?v=aaDrX6EeBs8
Auf folgender Seite soll es zum einsatz kommen.
Ich probiere vergeblich ein drop down zu basteln.
Sowohl das Main als auch das Submenu soll Horinzontal angeordnet sein,
Das Submenu soll erscheinen und erst wieder verschwinden wenn man im Main Menu einen anderen Punkt ANKLICKT.
Hier mal ein Beispiel wie ich es mir vom aufbau hervorstelle:
http://www.youtube.com/watch?v=aaDrX6EeBs8
Auf folgender Seite soll es zum einsatz kommen.
<body>
<ul id="navmenu">
<li><a href="#">%main%</a>
<ul class="sub1">
<a href="index.php?site=news">%news%</a>
<a href="index.php?site=news&action=archive">%archives%</a>
<a href="index.php?site=calendar">%calendar%</a>
</ul>
</li>
<li><a href="#">%clan%</a>
<ul class="sub1">
<a href="index.php?site=about">%about_us%</a>
<a href="index.php?site=members">%members%</a>
<a href="index.php?site=clanwars">%matches%</a>
<a href="index.php?site=awards">%awards%</a>
</ul>
</li>
<li><a href="#">%community%</a>
<ul class="sub1">
<a href="index.php?site=forum">%forums%</a>
<a href="index.php?site=guestbook">%guestbook%</a>
<a href="index.php?site=registered_users">%registered_users%</a>
<a href="index.php?site=whoisonline">%who_is_online%</a>
<a href="index.php?site=polls">%polls%</a>
<a href="index.php?site=server">%servers%</a>
</ul>
</li>
<li><a href="#">%media%</a>
<ul class="sub1">
<a href="index.php?site=files">%downloads%</a>
<a href="index.php?site=demos">%demos%</a>
<a href="index.php?site=links">%links%</a>
<a href="index.php?site=gallery">%gallery%</a>
<a href="index.php?site=linkus">%links_us%</a>
</ul>
</li>
<li><a href="#">%miscellaneous%</a>
<ul class="sub1">
<a href="index.php?site=sponsors">%sponsors%</a>
<a href="index.php?site=contact">%contact%</a>
<a href="index.php?site=challenge">%fight_us%</a>
<a href="index.php?site=joinus">%join_us%</a>
<a href="index.php?site=imprint">%imprint%</a>
</ul>
</li>
</ul>
</body>
<style>
* {
margin: 0px;
padding: 0px;
}
ul#navmenu, ul.sub1, {
list-style-type: none;
font-size: 9pt;
}
ul#navmenu li {
width: 125px;
text-align: center;
margin-left: 5px;
margin-top:5px;
margin-bot:5px;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .sub1 a {
margin-top: 5px;
}
ul#navmenu li:hover > a {
background-color:#333;
}
ul#navmenu li:hover a:hover {
background-color:#F60;
color:#FFF;
}
ul#navmenu ul.sub1 {
display:block;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1 {
display:block;
}
.darrow {
font-size: 11pt;
position: absolute;
top: 5px;
right: 4px;
}
.rarrow {
font-size: 13pt;
position: absolute;
top: 6px;
right: 4px;
}
</style>