How do you expand the suckerfish borders?

[Wendy Palmer]

I am using a suckerfish drop down menu and copied the html codes from their site. I can't figure out how to make the border go to the end of the drop down menu. I made the drop down menu wider but my border line is in the middle of the box.

Also, which code is it that changes the background color of the drop menu? I want it to be purple rather than gray.

[JKing]

Please post the code you are working with. Both the CSS and HTML in question.

[Wendy Palmer]

my webpages html codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
	<title>jQuery suckerFish</title>
	<link rel="stylesheet" href="style/standard1.css" type="text/css" media="all" />
	<link rel="stylesheet" href="style/standard2.css" type="text/css" media="all" />
	<link rel="stylesheet" href="style/print-norightcol.css" type="text/css" media="print" />
<script type="text/javascript" src="http://be.twixt.us/jquery/jquery.js"></script>
	<script type="text/javascript">
	  $(document).ready(function(){
			$("#nav-one li").hover(
				function(){ $("ul", this).fadeIn("fast"); }, 
				function() { } 
			);
	  	if (document.all) {
				$("#nav-one li").hoverClass ("sfHover");
			}
	  });
	  
		$.fn.hoverClass = function(c) {
			return this.each(function(){
				$(this).hover( 
					function() { $(this).addClass(c);  },
					function() { $(this).removeClass(c); }
				);
			});
		};	  
	</script>
	<style type="text/css">

/* Navigation */
.nav, .nav ul { 
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav {
  font-family: Arial, Helvetica, sans-serif;
  z-index: 100;
  position: relative;
}
.nav li {
  border-left: 1px solid #000;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
  font: bold 1.22em/25px Arial, Helvetica, sans-serif;
  background: #565656;
  color: #959595;
  display: block;
  padding: 0 9px;
  text-transform: lowercase;
  text-decoration: none;
}

.nav li a:hover {
  background: #ccc;
  color: #000;	

}
#nav-one li:hover a, 
#nav-one li.sfHover a {
  background: #ccc;
  color: #000;
}
#nav-one li:hover ul a, 
#nav-one li.sfHover ul a {
  background: #565656;
  color: #959595;	
}
#nav-one li:hover ul a:hover, 
#nav-one li.sfHover ul a:hover {
  background: #ccc;
  color: #000;	
}

.nav ul {
  background: #565656;
  border-bottom: 1px solid #000;
  list-style: none;
  margin: 0;
  width: 200px;
  position: absolute;
  top: -999em;
  left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
  top: 25px;
}
.nav ul li {
  border: 0;
  float: none;
}
.nav ul a {
  border: 1px solid #000;
  border-bottom: 0;
  padding-right: 20px;
  width: 100px;
  white-space: nowrap;
}
.nav ul a:hover {
  background: #609;
  color: #000;
}
	</style>
</head>
<body>

	<h2>Sample Markup</h2>
	<h4>Sample 1 - One Level</h4>
		<ul id="nav-one" class="nav">
			<li>
				<a href="#item1">Resources</a>
				<ul>
					<li><a href="#item1.1">Career Planning</a></li>
					<li><a href="#item1.2">Choosing a Program</a></li>
					<li><a href="#item1.3">What Can I Do ...</a></li>
					<li><a href="#item1.4">Summer Job Guide</a></li>
				</ul>
			</li>
			<li>
				<a href="#item2">item 2</a>
				<ul>
					<li><a href="#item2.1">item 2.1</a></li>
					<li><a href="#item2.2">item 2.2</a></li>
				</ul>
			</li>
			<li>
				<a href="#item3">item 3</a>
				<ul>
					<li><a href="#item3.1">item 3.1</a></li>
					<li><a href="#item3.2">item 3.2</a></li>
				</ul>
			</li>
			<li>
				<a href="#item4">item 4</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>
					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
		</ul>
	
	<br clear="all" />
	
	
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-325840-2";
urchinTracker();
</script>
</body>
</html>

[zorgi]

Check all the css width properties and play with them, you have only 2. It should work even if you delete widths but I think suckerfish is mess in Opera without those.