Hier mal der HTML Code (nur body)
- Code: Alles auswählen
<body>
<div class="menu">
<ul>
<li><a href="">Clan</a>
<ul>
<li><a href="" title="">Test1</a></li>
<li><a href="" title="">Test2</a></li>
<li><a href="" title="">Test3</a></li>
<li><a href="" title="">Test4</a></li>
<li><a href="" title="">Test5</a></li>
<li><a href="" title="">Test6</a></li>
<li><a href="" title="">Test7</a></li>
<li><a href="" title="">Test8</a></li>
<li><a href="" title="">Test9</a></li>
<li><a href="" title="">Test10</a></li>
</ul>
</div>
</body>
CSS Code
- Code: Alles auswählen
.menu {
font-family: arial, sans-serif
width:750px;
height:100px;
position:relative;
font-size:11px;
z-index:200;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
background:#990000;
line-height:20px;
font-size:11px;
overflow:hidden;
}
.menu ul {
padding:0;
margin:0;
list-style: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li ul {
display: none;
}
/* Hover */
.menu ul li:hover a {
color:#fff;
background:#36f;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
.menu ul li:hover ul li a.hide {
background:#6a3;
color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
background:#6fc;
color:#000;
}
.menu ul li:hover ul li ul {
display:
none;
}
.menu ul li:hover ul li a {
display:block;
background:#ddd;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#6fc;
color:#000;
}
.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;
}
Hoffe, dass ihr mir helfen könnt.
mfg
Summernoon
