Hi Mike,
I was looking at this but my system keeps going down (time for a new computer I think) si I didn't make mucch headway.
I had a look in NN6 and nothing was showing at all. I could manage to get the first level to display by changing the design but NN6 doesn't support the hover properly and will only hover after the text for some reason. Checking on the web it seems that this is the reason that no one has been able nn6 work with the suckerfish menus.
You would have to just make the first level a link for NN6 and send it to an intermediate page. You will probably have to do this anyway for ie users with js disabled.
Unfortunately my system when down and I lost the code so I don't have anything to offer for NN6 at the moment.
Regarding fluid widths I manged to get ie working ok with a bit of hacking but mozilla won't enlarge the child to be bigger than the parent. The easiest solution would be just to increase the widths to cover all the text.
This is the line you need to alter to move the first level farther apart.
Code:
#nav li {
float:left;
margin-right:25px;
}
In your page its set to 90px so you could just set it to something larger or try a min-width. Ie increases the width automatically anyway.
I was also messing about with teh code below which doesn't look to bad in firefox but isn't right in IE. You might be able to play around with it a bit
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #000;
background-color: #fff;
text-align: justify;
font: normal 76%/150% "Lucida Grande", LucidaGrande, Lucida, Tahoma, Arial, Helvetica, sans-serif;
/* font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:76%; */
}
#container {
width: 80%;
/* background: #669cff; */
text-align: left;
border: 1px solid #fff;
margin: 0 auto;
}
#nav, #nav ul {
float:left;
width: 100%;
line-height: 1;
list-style: none;
background: #669cff;
font-weight: bold;
padding: 0;
border: 1px solid #000;
margin: 0 0 1em 0;
white-space: nowrap;
}
#nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0.25em 0 ;
}
#nav a.daddy {
background: url(http://www.evolutionmsport.com/temp/rightarrow.gif) center right no-repeat;
}
#nav li {
float:left;
margin-right:25px;
min-width:90px;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 13.9em;
font-weight: normal;
border-width: 1px;
margin: 0;
}
#nav li li {
width:100%;
}
#nav li ul a {
display:block;
color:#000;
}
#nav li ul ul {
margin: -1.55em 0 0 100%;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #2500ff;
color:#fff;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="evm-page2.php?pag=1">About EvM</a>
<ul>
<li><a href="evm-page2.php?pag=2">News</a></li>
<li><a href="evm-page2.php?pag=3">Contact Us</a></li>
<li><a href="evm-page2.php?pag=4">Privacy Notice</a></li>
<li><a href="evm-page2.php?pag=5">Terms and Conditions</a></li>
<li><a href="evm-page2.php?pag=6">Product Purchase Agreement</a></li>
<li><a href="evm-page2.php?pag=7">Site Map</a></li>
</ul>
</li>
<li><a href="evm-page2.php?pag=8">Product Catalog</a>
<ul>
<li><a class="daddy" href="evm-page2.php?pag=9">Rear Suspension</a>
<ul>
<li><a href="evm-page2.php?pag=10">Watts Link</a></li>
<li><a href="evm-page2.php?pag=13">Tri-Link</a></li>
<li><a href="evm-page2.php?pag=14">Stabilizer Bars</a></li>
<li><a href="evm-page2.php?pag=15">Modular LCAs</a></li>
</ul>
</li>
<li><a class="daddy" href="evm-page2.php?pag=16">Chassis Stiffening</a>
<ul>
<li><a href="evm-page2.php?pag=18">Shorty "X" Brace</a></li>
<li><a href="evm-page2.php?pag=19">Full Length "X" Brace</a></li>
<li><a href="evm-page2.php?pag=20">"Spyder" Brace</a></li>
<li><a href="evm-page2.php?pag=21">"V" Brace</a></li>
</ul>
</li>
<li><a class="daddy" href="evm-page2.php?pag=23">Logo Items</a>
<ul>
<li><a href="evm-page2.php?pag=24">T Shirts</a></li>
<li><a href="evm-page2.php?pag=25">Decals</a></li>
</ul>
</li>
</ul>
</li>
<li class="daddy"><a href="evm-page2.php?pag=26">Team EvM</a>
<ul>
<li><a class="daddy" href="evm-page2.php?pag=31">Project Cars</a>
<ul>
<li><a class="daddy" href="evm-page2.php?pag=32">Project Evolution</a>
<ul>
<li><a href="evm-page2.php?pag=33">Auto Trim Express</a></li>
<li><a href="evm-page2.php?pag=34">B&M</a></li>
<li><a href="evm-page2.php?pag=35">BBS</a></li>
<li><a href="evm-page2.php?pag=36">BeaveRun</a></li>
<li><a href="evm-page2.php?pag=37">BFgoodrich</a></li>
<li><a href="evm-page2.php?pag=38">Fox Run</a></li>
<li><a href="evm-page2.php?pag=39">K&N</a></li>
<li><a href="evm-page2.php?pag=40">Koni</a></li>
<li><a href="evm-page2.php?pag=41">Nitrous Works</a></li>
<li><a href="evm-page2.php?pag=42">Maximum Motorsports</a></li>
<li><a href="evm-page2.php?pag=43">Prestige Powder</a></li>
<li><a href="evm-page2.php?pag=44">SLP</a></li>
<li><a href="evm-page2.php?pag=45">Spin Tech</a></li>
<li><a href="evm-page2.php?pag=46">Vogtland</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="evm-page2.php?pag=48">Tech</a>
<ul>
<li><a href="evm-page2.php?pag=49">Suspension Basics</a></li>
<li><a href="evm-page2.php?pag=50">Forum Discussions</a></li>
<li><a href="evm-page2.php?pag=51">Calculators</a></li>
<li><a href="evm-page2.php?pag=52">FAQ</a></li>
</ul>
</li>
<li><a href="evm-page2.php?pag=53">Links</a>
<ul>
<li><a href="evm-page2.php?pag=54">Mustang Sites</a></li>
<li><a href="evm-page2.php?pag=55">Mustang Forums</a></li>
<li><a href="evm-page2.php?pag=56">Mustang Magazines</a></li>
<li><a href="evm-page2.php?pag=57">Project Partners</a></li>
<li><a href="evm-page2.php?pag=58">Technical</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Sorry I can't offer anything better but I haven't really been able to spend any time on it.
paul
Originally Posted by Paul O'B
Bookmarks