SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Suckerfish Dropdowns Problem

    Hi,
    I have problem with my "suckerfish" nav menu. because it is warp inside div I could not see the sub menus. could any one help me :(

    HTML Code:
    <div id="nav-bar">
        <ul id="nav">
    		<li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="#">Why Auction</a>
            	<ul>
                     <li><a href="Commercial.html">Commercial</a></li>
            		 <li><a href="Residential.html">Residential</a></li>
            		 <li><a href="Recreational.html">Recreational</a></li>
            	</ul>
               </li>
    
            <li><a href="CurrentAuctions.html">Current Auctions</a></li>      
            <li><a href="ContactUs.html">Contact Us</a></li>
        </ul>   
    </div> <!--End of nav-bar  -->
    Style
    #nav-bar
    {
    background:#032d47;
    background:url(../images/nav_bg.png);
    position:relative;
    overflow:hidden;
    height:70px;
    text-align:center;

    }

    #nav-bar ul
    {
    margin-top:10px;
    margin-bottom:10px;
    padding-left:10px;
    font-family:Arial, Helvetica, sans-serif;

    }

    #nav-bar li
    {
    float:left;
    list-style:none;
    }
    #nav li ul
    {
    position:absolute;
    width: 10em;
    left:-999em;
    padding:0;
    margin:0;
    }
    #nav-bar li a
    {
    color:white;
    width:100%;
    position:relative;
    font-size:18px;
    text-decoration:none;
    padding-left:6px;
    padding-right:15px;
    border-right: 1px solid black;
    }


    #nav-bar li:last-child a
    {
    border-right:none;
    }

    #nav-bar li:visited
    {
    background: #071A71;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }
    Code JavaScript:
    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);

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi, Welcome to SitePoint

    It looks like the overflow:hidden (and possibly height) on your div is clipping the dropdown, try removing overflow first.

    Code:
    #nav-bar
    {
    	background:#032d47;
    	background:url(../images/nav_bg.png); 
    	position:relative;
    	/*overflow:hidden;*/
    	height:70px;
    	text-align:center;
    	
    }

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try this version of your code which I did a quick clean-up on.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.2 arial,helvetica,sans-serif;
        background:#333;
    }
    #nav-bar {
        height:68px;
        padding:1px 0;/*uncollapse #nav margin with 1px paddings*/
        background:#032d47 url(../images/nav_bg.png);
        text-align:center;
    }
    ul#nav {
        margin:10px 0;
        padding:0 0 0 10px;
        list-style:none;
    }
    #nav li {
        float:left;
        position:relative;
        font: 18px/1.3 Arial, Helvetica, sans-serif;
    }
    #nav a {
        float:left;
        color:#FFF;
        text-decoration:none;
        padding:0 15px 0 6px;
        border-right: 1px solid #000;
    }
    #nav li.last a {
        border-right:none;
    }
    #nav a:visited {
        background: #071A71;
    }
    #nav ul {
        position:absolute;
        top:100%; left:0;
        width: 10em;
        margin:0;
        padding:0;
        list-style:none;
        margin-left:-999em;/*hide dropdown*/
        background: #032d47 url(foo) fixed;/*IE needs a background to hold anchors*/
    }
    #nav li li a {
        border:none;
    }
     
    #nav li:hover ul, 
    #nav li.sfhover ul {
        margin-left: 0;/*reveal dropdown*/
        visibility:visible;/*fix sticking dropdown IE7*/
    }
    </style>
     
    </head>
    <body>
     
    <div id="nav-bar">
        <ul id="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="#">Why Auction</a>
                <ul>
                     <li><a href="Commercial.html">Commercial</a></li>
                     <li><a href="Residential.html">Residential</a></li>
                     <li><a href="Recreational.html">Recreational</a></li>
                </ul>
               </li>
     
            <li><a href="CurrentAuctions.html">Current Auctions</a></li>      
            <li class="last"><a href="ContactUs.html">Contact Us</a></li>
        </ul>   
    </div> <!--End of nav-bar  -->
     
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur. it is working now thank you for your help


Bookmarks

Posting Permissions

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