Tweet
hab mit viel müh und not ein recht simples cascading menü zusammengeschustert. nur leider entspricht die formatierung noch nicht ganz meinen vorstellungen und meine css kenntnisse sind nur dürftig daher würde ich mich freuen wenn mir jemand behilfich sein könnte und bei meinem problem hilfreich zur seite stehen könnte...
ich poste nach meiner problemstellung noch den relevanten code:
Problem 1: wie kann ich das menü wie nen blocksatz oder zentriert darstellen, damit es net so an der linken seite hängt und links und rechts so ziemlich gleichviel abstand ist.
Problem 2: Wenn man das Menü mal ausprobiert, dann sieht man bei Menu4, das die Unterpunkte zu lang sind um in einer Zeile dargestellt werden können, wie kann ich den Zeilenumbruch verhindern und den Text in einer Zeile darzustellen?
hier noch der code:
schonmal danke für eure mithilfe
ich poste nach meiner problemstellung noch den relevanten code:
Problem 1: wie kann ich das menü wie nen blocksatz oder zentriert darstellen, damit es net so an der linken seite hängt und links und rechts so ziemlich gleichviel abstand ist.
Problem 2: Wenn man das Menü mal ausprobiert, dann sieht man bei Menu4, das die Unterpunkte zu lang sind um in einer Zeile dargestellt werden können, wie kann ich den Zeilenumbruch verhindern und den Text in einer Zeile darzustellen?
hier noch der code:
Code:
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
padding: 0;
margin: 0;
text-align: justify;
}
#nav a {
font-weight: bold;
color: green;
}
#nav a {
text-decoration: none;
}
li {
float: left;
position: relative;
width: 50px;
text-align: justify;
cursor: default;
background-color: #FFFFFF;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background-color: #FFFFFF;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: #FFFFFF;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<ul id="nav">
<li>
<div><a href="">[Menu1]</a></div>
<ul>
<li><a href="">SubMenu1.1</a></li>
<li><a href="">SubMenu1.2</a></li>
</ul>
</li>
<li>
<div><a href="">[Menu2]</a></div>
<ul>
<li><a href="">SubMenu2.1</a></li>
<li><a href="">SubMenu2.2</a></li>
</ul>
</li>
<li>
<a href="">[Menu3]</a>
</li>
<li><a href="">[Menu4]</a>
<ul>
<li><A href="">SubMenu4.1 Long</A></li>
<li><A href="">SubMenu4.2 Long</A></li>
<li><A href="">SubMenu4.3 Long</A></li>
<li><A href="">SubMenu4.4 Long</A></li>
<li><A href="">SubMenu4.5 Long</A></li>
</ul>
</li>
<li><a href="">[Menu5]</a>
<ul>
<li><a href="">SubMenu5.1</a></li>
<li><a href="">SubMenu5.2</a></li>
<li><a href="">SubMenu5.3</a></li>
</ul>
</li>
<li><a href="">[Menu6]</a></li>
<li><a href="">[Menu7]</a></li>
<li><a href="">[Menu8]</a></li>
</ul>
Kommentar