Suckerfish Dropdowns Problem

HTML & CSS
1

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 :frowning:


<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;
}


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

Hi, Welcome to SitePoint :slight_smile:

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

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

Try this version of your code which I did a quick clean-up on.

<!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

Hi Rayzur. it is working now thank you for your help