Menu Spacing
Posted: Tue Feb 03, 2004 5:10 pm
I currently have this code that creates drop down menu's for my website. The problem is, when a user with a smaller moniter visits it, the items are underneith each other...So, the person can't use the top-most menu item. I was wondering if there was a way to automatically space the items so that they always fit on 1 line.
Code: Select all
<style type="text/css">
body {
font-family: arial, helvetica, serif;
bgcolor: #000000
text: #FFFFFF
link: #0000FF
vlink: #0000FF
alink: #0000FF
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 8.7em;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
color: red;
display: block;
}
#content {
clear: left;
}
#changecolor a:hover {
color:red;
}
</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>
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
newwindow=window.open(href, windowname, 'width=400,height=100,scrollbars=no,toolbar=no,status=no,resizable=yes');
return false;
}
//-->
</SCRIPT>
<title>East Coast Killers - EcK</title>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="15">
<td width="100%"><center>East Coast Killers</center></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="15">
<td width="100%"><cetner><DIV id=changecolor><ul id="nav">
<li><a href="index.php">Home</a>
</li>
<li>Upload
<ul>
<li><a href="musicupload.php">Music</a></li>
<li><a href="imageupload.php">Pictures</a></li>
</ul>
</li>
<li>Forum
<ul>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=general">General</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=Wars">Matches</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=challenge">Challenge</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=site">Website</a></li>
</ul>
</li>
<li>Music
<ul>
<li><A HREF="addmusic6.php" onClick="return popup('addmusic6', 'eckmusic')">Popup</A></li>
<li><a href="pickmusic.php">Selector</a></li>
<li><a href="allmusic.php">List</a></li>
<li><a href="searchform.php">Search</a></li>
</ul>
</li>
<li>Video
<ul>
<li><a href="listvideo.php">List</a></li>
<li><a href="searchvideoform.php">Search</a></li>
</ul>
</li>
<li>Bios
<ul> <li><a href="loginform.php">Log In</li>
<li><a href="pro.php?user=main">Index</a></li>
<li><a href="biosend2.php">Modify Bio</a></li>
<li><a href="members.php">Members</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a href="contact.php?page=challangeform">Challange</li>
<li><a href="contact.php?page=joinform">Join</a></li>
<li><a href="contact.php?page=adminform">Contact Webmaster</a></li>
</ul>
</li>
</ul>
</div>
</center></td>
</tr>
</table>