Hallo Zusammen,
ich bin neu in diesem Forum und erhoffe mir dadurch hilfestellungen. Ich werde aber auch versuche, anderen zu helfen, wenn ich kann.
Jetzt zu meiner Frage:
Ich habe ein Menü mit CSS erstellt. Es funktioniert schon ganz gut.
Nur ist mein Untermenü noch vertikal, dies hätte ich gerne horizontal.
Ich komme irgendwie nicht drauf, wie ich das richtig umsetze:
Hier mal mein code
CSS:
.menu { padding-top:10px; font-family: arial, sans-serif; width:799px; height:30px; position:relative; font-size:11px; z-index:100; margin: 0 auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:112px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#146902; line-height:20px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none; display: inline;}
.menu ul li {float:left; position:relative; display: inline;}
.menu ul li ul {display: none; display:}
.menu ul li {display: inline;}
.menu ul li:hover a {color:#fff; background:#0A0;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#0A0; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#0A0; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#0A0; color:#000;}
.menu ul li:hover ul li a:hover {background:#030; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
HTML:
- Start
- Mannschaften
<ul> <li><a href="Javascript:refresh_div('body1','start.php');">VfL 1</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">VfL 2</a></li> <li><a href="expand.html" title="an enlarging unordered list">AH</a></li> </ul>
über eure hilfe bin ich natürlich sehr froh!!
Gruß