Hey i have used the bare bones example for the suckerfish drop down menu from ALA and am having trouble styling it to look the same as my Javascript/DHTML one. Here is a link to the old one Old menu Javascript/DHTML (<!-- m --><a class="postlink" href="http://www.thedevilseyes.co.uk">http://www.thedevilseyes.co.uk</a><!-- m -->)
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
border:1px solid #979797;
text-align:center;
color:#979797;
font:bold 0.8em verdana,sans-serif;
}
li ul {
display: none;
position: absolute;
top: 1.2em;
left: -1px;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block;}
li, a {
text-decoration:none;
color:#979797;
}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
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>Sunfishes
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Blacksunfish</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Shadow bass</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Ozark bass</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">White crappie</a></li>
</ul>
</li>
<li>Grunts
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Smallmouth grunt
</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Burrito</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Pigfish</a></li>
</ul>
</li>
<li>Remoras
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Whalesucker</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Marlinsucker</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Ceylonese remora</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Spearfish remora</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Slender suckerfish</a></li>
</ul>
</li>
</ul>
</body>
</html>
If anyone could assist me in styling it to look as the other one i have i would be very grateful
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
border:1px solid #979797;
text-align:center;
color:#979797;
font:bold 0.8em verdana,sans-serif;
}
li ul {
display: none;
position: absolute;
top: 1.2em;
left: -1px;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block;}
li, a {
text-decoration:none;
color:#979797;
}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
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>Sunfishes
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Blacksunfish</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Shadow bass</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Ozark bass</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">White crappie</a></li>
</ul>
</li>
<li>Grunts
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Smallmouth grunt
</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Burrito</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Pigfish</a></li>
</ul>
</li>
<li>Remoras
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Whalesucker</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Marlinsucker</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Ceylonese remora</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Spearfish remora</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Slender suckerfish</a></li>
</ul>
</li>
</ul>
</body>
</html>
If anyone could assist me in styling it to look as the other one i have i would be very grateful