Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Suckerfish Two Level Menu Problem

    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
    Code:
              <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
    Code:
    #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.

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Please guys, not even a useful link!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •