für Olympus wollte ich bei mir ein Dropdown Menü einfügen, da ich sowas übersihtlicher finde als viele Links nebeneinander.
Ansich klappt alles auch gut, nur eins hätte ich gern anders. Normal müsste das Menü wie hier (Klick mich) ausgeklappt werden. Also dass das Menü über den Text geht (wie bei der Kategorie "Products".
Bei mir allerdings geht neben das Menü und die ganze blaue Leiste runter: Klick mich (Menü kann man sehen bei "Fussball Live!")
Ich habe eigentlich nicht viel anders gemacht, als man es der Author gesagt hat. Hat jmd. Rat wie man es machen könnte, wie oben? Das also das Menü ausgeklappt wird ohne dass die Blaue Leiste mitgeht?
Eingebaut wurde:
CSS:
Code: Alles auswählen
<style type="text/css" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: right;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: transparent;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: left;
background: transparent;
}
-->
</style>JS:
Code: Alles auswählen
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>Code: Alles auswählen
<div id="menu">
<dl>
<dt onmouseover="javascript:show();"><a href="{U_LOGIN_LOGOUT}" title="LOGIN">{L_LOGIN_LOGOUT}</a></dt>
</dl>
<!-- IF not S_USER_LOGGED_IN -->
<dl>
<dt onmouseover="javascript:show();"><a href="{U_REGISTER}" title="REGIST">{L_REGISTER}</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show();"><a href="{U_FAQ}" title="FAQ">{L_FAQ}</a></dt>
</dl>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<dl>
<dt onmouseover="javascript:show('smenu1');">Community</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="{U_FAQ}">{L_FAQ}</a></li>
<li><a href="{U_PROFILE}">{L_PROFILE}</a></li>
<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
</dd>
</dl>
<!-- ENDIF -->
<dl>
<dt onmouseover="javascript:show('smenu2');">Fussball Live!</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="streaming.php?mode=index">Portal</a></li>
<li><a href="streaming.php?mode=faq">FAQ</a></li>
<li><a href="streaming.php?mode=anleitung">Anleitung/ Hilfe</a></li>
<li><a href="streaming.php?mode=downloads">Downloads</a></li>
<li><a href="streaming.php?mode=viewprogram">Programmvorschau</a></li>
<li><a href="#">Hilfe - Forum</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show();"><a href="index.php" title="Return to home">Forum</a></dt>
</dl>Und alles im einen (overall_header.html):
Klick mich
Leider hab ich die URL verschlampt, von wo ich dieses Menü habe.
Da ich mich CSS (noch) kaum auskenne, bin ich hier völlig aufgeschmießen.
hasta luego,
Miguel
