...

View Full Version : Suckerfish Two Level Menu Problem



Abunada
07-31-2011, 10:56 AM
I wanted to create a suckerfish style menu for my site, I wanted it to have two levels, I followed the tutorial http://htmldog.com/articles/suckerfish/dropdowns/, and modified it to suit my website's styling. Also I modified the menu so that the width of the menu items are auto (as wide as the widest element in the list) but a problem arose. The tutorial gives the second level menu a top and left margin so that it is positioned next to its parent link. Now that the width of the parent menu is no longer constant, I cant use this technique. Can anyone tell me how do I go about positioning the second level menu next to its parent without the need for knowing its width. The menu HTML and CSS is listed below

If you want to see a live preview its at http://www.eratronics.net/

Menu HTML


<div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a>
<ul>
<li><a href="index.html">About Me</a></li>
<li><a href="index.html">About Us</a></li>
</ul>
</li>
<li><a href="index.html">Tutorials</a>
<ul>
<li><a href="index.html">Electronics</a>
<ul>
<li><a href="index.html">Basic Ans Some Other Long Word</a></li>
<li><a href="index.html">Advanced</a></li>
</ul>
</li>
<li><a href="index.html">Microcontrollers</a></li>
<li><a href="index.html">Lab Skills</a></li>
</ul>
</li>
<li><a href="index.html">Projects</a>
<ul>
<li><a href="index.html">Fixed</a></li>
<li><a href="index.html">User Submitted</a></li>
</ul>
</li>
<li><a href="index.html">Forums</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>


Menu CSS


#nav
{
margin: 0;
padding: 0;
width: auto;
}

#nav ul
{
list-style: none;
width: 870px;
height: 45px;
margin: 0 0 0 15px;
padding: 0;
background: url(../images/nav.jpg) repeat-x;
ine-height: 1;
}

#nav ul li
{
float: left;
}

#nav ul li a
{
display: block;
margin: 0;
padding: 0 11px;
border-right: 1px solid #899D00;
border-left: 1px solid #A7D101;
font: bold 14px/45px Verdana, Tahoma;
text-decoration: none;
color: #fff;
background: url(../images/nav.jpg) repeat-x;
}

#nav ul li a:hover,
#nav ul li a:active
{
background: url(../images/nav-hover.jpg) repeat-x;
}

#nav ul li#current a
{
background: url(../images/nav-current.jpg) repeat-x;
}

#nav ul li ul
{
position: absolute;
z-index: 1000;
left: -1000em;
margin-left: 0px;
width: auto;
}

#nav ul li:hover ul
{
left: auto;
}

#nav ul li ul li
{
float: none;
}

#nav ul li ul li ul
{
margin: -45px 0 0 10em;
}

#nav li:hover ul ul
{
left: -1000em;
}

#nav li li:hover ul
{
left: auto;
}

#nav ul li ul li ul li
{
position: relative;
white-space: nowrap;
}


Thanks a million! Any help appreciated.

Abunada
07-31-2011, 08:56 PM
Please guys, not even a useful link! :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum