Hallo und guten Morgen liebe Comunity,
ich habe folgendes Problem ich habe ein Menü anhand einer Liste geschrieben funktioniert auch soweit alles nur hatte ich eine feste breite eingetragen damit alles so rutscht wie es soll. was natürlich nicht funktioniert wenn man ein längeres Wort nehmen würde und nun bekomme ich das Submenü einfach nicht dazu dass es untereinader sitzt kann mir bitte jemand sagen woran es liegt? ich weis es nich^^
ich habe folgendes Problem ich habe ein Menü anhand einer Liste geschrieben funktioniert auch soweit alles nur hatte ich eine feste breite eingetragen damit alles so rutscht wie es soll. was natürlich nicht funktioniert wenn man ein längeres Wort nehmen würde und nun bekomme ich das Submenü einfach nicht dazu dass es untereinader sitzt kann mir bitte jemand sagen woran es liegt? ich weis es nich^^
HTML:
<html>
<body>
<link rel="stylesheet" type="text/css" href="horizontal.css">
<ul id="NaviHorizontal">
<li><a href="?"><span>punkt1</span></a></li>
<li><a href="?"><span>punkt2</span></a></li>
<li><a href="?"><span>punkt3</span></a></li>
<li>
<a href="?"><span>punkt4</span></a>
<ul>
<li><a href="?"><span>punkt4.1</span></a></li>
<li><a href="?"><span>punkt4.2</span></a></li>
<li><a href="?"><span>punkt4.3</span></a></li>
<li><a href="?"><span>punkt4.4</span></a></li>
</ul>
</li>
<li><a href="?"><span>punkt5</span></a></li>
<li>
<a href="?"><span>punkt6</span></a>
<ul>
<li><a href="?"><span>punkt6.1</span></a></li>
<li><a href="?"><span>punkt6.2</span></a></li>
<li><a href="?"><span>punkt6.3</span></a></li>
<li>
<a href="?"><span>punkt6.4</span></a>
<ul>
<li><a href="?"><span>punkt6.1.1</span></a></li>
<li><a href="?"><span>punkt6.1.2</span></a></li>
<li><a href="?"><span>punkt6.1.3</span></a></li>
<li><a href="?"><span>punkt6.1.4</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="?"><span>punkt7</span></a></li>
<li>
<a href="?"><span>punkt8</span></a>
<ul>
<li><a href="?"><span>punkt8.1</span></a></li>
<li><a href="?"><span>punkt8.2</span></a></li>
<li>
<a href="?"><span>punkt8.3</span></a>
<ul>
<li><a href="?"><span>punkt8.1.1</span></a></li>
<li><a href="?"><span>punkt8.1.2</span></a></li>
<li><a href="?"><span>punkt8.1.3</span></a></li>
<li><a href="?"><span>punkt8.1.4</span></a></li>
</ul>
</li>
<li><a href="?"><span>punkt8.4</span></a></li>
</ul>
</li>
</ul>
</body>
</html>
Code:
body {margin:0;}
* {margin:0; padding:0;}
#NaviHorizontal ul{margin:5px 0 10px 0; list-style-type:none;display:block;}
ul li { float: left; margin:0 20px; list-style-type:none; }
ul li a{}
ul li span{}
ul li ul {display:block;}
ul li ul li { margin: 5px 0 0 10px; float:left; position:relative;}
ul li ul li ul {position:absolute; top:-10px;}
ul li ul li ul li {display:block;}
