Forum Moderators: not2easy
I was wondering how to create a menu with a variable width...
<html><head><title>test</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}ul li {
position: relative;
float: left;
background: gray;
text-indent: 10px;
padding-right: 10px;
height:30px;
font-size: 15px;
line-height:30px;
}
ul ul {
display: none;
position: fixed;
top: 30px;
left: 0;
background: silver;
float: left;
border: 1px solid red;
} * html ul ul { position: absolute; }
li ul li {
padding:0;
background: silver;
display: block;
float: left;
clear:left;
}
ul li>ul {
top: auto;
left: auto;
}
ul li:hover ul, ul li.over ul {
display: block;
}
li:hover, li.over {
background: #FF9C00;
}
</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>
</head>
<body>
<ul id="nav">
<li>menu item 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li>menu item 2
<ul>
<li class="sub">menu item 4, 5 en 6</li>
<li>menu item 5</li>
<li>menu item 6</li>
<li>menu item 7</li>
</ul>
</li>
<li>menu item 4</li>
<li>menu item 5</li>
</ul>
</body>
</html>
The submenu has to expand or contract to the largest/smallest item within...
The submenu has to expand or contract to the largest/smallest item within...
It does... for me :)
