4 replies [Last post]
Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 14 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

i recently read the article on dropdown menus referred by the multi-level drop-down menu section on this site, and i must say it worked perfectly!

However i tried to style it and it's not doing what i want (surprise surprise). I want to have the links to be active across the whole width of the <li> element so that when i mouse over it, it will change the background of the whole length rather than just until when the text in the link stops (i hope you know what i mean). I tried to do this myself but to no avail.

Can anyone help me out?

Thanks,

Dan.

I am Dan, Dan I am.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Suckerfish Menu (listapart)

Hi Fruitcake,
Without a link it's a little hard to guess what's wrong.
Check to see if the "a" is set to display block.

Hope that helps

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 14 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Suckerfish Menu (listapart)

yeah sporry i thought it would be a bit confusing :?

here's the code:
CSS:

<style type="text/css">
html,body {
	background: #cccccc;
	margin: 0;
	padding: 0;
	border:0;
	/*\*/
	height: 100%;
	/* End Hack */
}
body {
	margin: 0;
	padding: 0;
	color: #000000;
	font-family:verdana,arial,sans-serif;
}
div#wrapper0 {
	text-align: center;
	/*\*/
	height: 100%;
	/* End Hack */
}
div#wrapper1 {
	width: 800px;
	background: #ffffff;
	border: 2px solid #006699;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -4px;
	text-align: left;
	/*\*/
	height: 100%;
	/* End Hack */
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 804px;
}
html>body #wrapper1 {
	width: 804px;
}
div#header {
	height: 75px;
	background: #003366;
	border-bottom: 2px solid #006699;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 77px;
}
html>body #header {
	height: 77px;
}
img { border: 0; }
div#menuwrapper {
	width: 100px;
	background: #ffff00;
	/*\*/
	height: 100%;
	/* End Hack */
}
/*SuckerFish*/
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  float: left;
  position: relative;
  width: 10em;
  }
li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }
li > ul {
	top: auto;
	left: auto;
	}
li:hover ul, li.over ul{ display: block; }
/*end suckerfish*/
div#menu {
background: #006699;
height: 20px;
}
</style>

Javascript:
>

<script type="text/javascript" language="JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

HMTL:
<div id="wrapper0">
	<div id="wrapper1">
		<div id="header">
		<img src="img/nextworks.jpg" alt="Nextworks" />
		</div>
		<div id="menu">
		<ul id="nav">
  <li>Sunfishes
    <ul id="nav">
      <li><a href="">Blackbanded»
        sunfish</a></li>
      <li><a href="">Shadow bass</a></li>
      <li><a href="">Ozark bass</a></li>
      <li><a href="">White crappie</a></li>
		</ul>
	</li>

  <li>Grunts
    <ul id="nav">
      <li><a href="">Smallmouth grunt
        </a></li>
      <li><a href="">Burrito</a></li>
      <li><a href="">Pigfish</a></li>
    </ul>
  </li>

  <li>Remoras
    <ul>
      <li><a href="">Whalesucker</a></li>
      <li><a href="">Marlinsucker</a></li>
      <li><a href="">Ceylonese remora</a></li>
      <li><a href="">Spearfish remora</a></li>
      <li><a href="">Slender suckerfish</a></li>
    </ul>
  </li>
</ul>
	</div>
	</div>
</div>
</body>
</html>

Thanks again.

I am Dan, Dan I am.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Suckerfish Menu (listapart)

Hi Fruitcake,
I would try setting the a to display block and give it a width like that of the li.a{display:block; width:10em;}
That should be close to what you need.

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 14 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Suckerfish Menu (listapart)

Yeah thanks i played around with it and got it right Smile

Thanks anyway for sticking with me Smile

I am Dan, Dan I am.