17 replies [Last post]
le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

I want an exact menu with the slight border between the links and everything on the dropdown menu on this page on the second line of the horizontal menu where it drops down. I've tried some code but I can't get it to work - can someone please fix up the code to look the same?:

http://www.mccabebuilders.com

My code is below - anyone give me a hand would be superb.
Thanks,
Le007

<html>
<head>
<style>
/* Begin CSS Popout Menu */
 
 
 
#menuh {
float : left;
font : bold 85% helvetica, "Trebuchet MS", arial, sans-serif;
margin : 0;
border-bottom : 0 solid #520934;
color : #333;
background : #a4a4a0;
}
#menuh a {
display : block;
height : 16px;
text-align : left;
border : 1px solid #eee;
white-space : nowrap;
margin : 0;
padding : 0.3em 0.2em 0.3em 0.4em;
}
#menuh a, #menuh a:visited {
color : #000;
background : #a4a4a0;
text-decoration : none;
}
#menuh a:hover {
color : #fff;
background-color : #6e6a5a;
}
 
#menuh ul {
list-style : none;
margin : 0;
padding : 0;
float : left;
width : 100px;
}
#menuh li {
position : relative;
}
#menuh ul ul {
position : absolute;
z-index : 500;
top : auto;
display : none;
padding : 1em;
margin : -1em 0 0 -1em;
}
 
 
 
div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {
display : block;
}
 
/* End CSS Popout Menu */
</style>
</head>
 
 
 
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">&nbsp;Homepage</a>
 
<ul>
<li><a href="#">&bull; About</a></li>
</ul>
 
</li>
</ul>
 
<ul>
<li><a href="#" class="top_parent">&nbsp;Gallery 1 </a>
 
<ul>
<li><a href="#">&bull; Link 1</a></li>
<li><a href="#">&bull; Link 2</a></li>
 
<li><a href="#">&bull; Link 3</a></li>
</ul>
 
</li>
</ul>
 
<ul>
<li><a href="#" class="top_parent">&nbsp;Gallery 2</a>
 
 
<ul>
<li><a href="#">&bull; Link 1</a></li>
<li><a href="#">&bull; Link 2</a></li>
<li><a href="#">&bull; Link 3</a></li>
</ul>
 
</li>
</ul>
 
<ul>
<li><a href="#" class="top_parent">&nbsp;Gallery 3</a>
 
</li>
</ul>
 
<ul>
 
<li><a href="#" class="top_parent">&nbsp;Resources</a>
 
</li>
</ul>
 
<ul>
<li><a href="#" class="top_parent">&nbsp;Contact</a>
 
</li>
 
</ul>
 
</div>

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 37 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

If I'm not mistaken your

If I'm not mistaken your menu looks a lot like Tedd Sperlings horizontal drop-down. You might want to re-visit and see where you went wrong?
http://sperling.com/examples/menuh/

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

heh

Thanks for the reply - saw that but I need a specific piece of help. The code I have is fine - I'm just trying to edit it to look similar but every time I tried it didn't work so far.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 37 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Sometime half the battle

Sometimes half the battle lies in understanding what the h--- the question is.
Are you trying to do something like this?

<!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">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>test-6</title>
 
<style type="text/css">
 
html, body {
background : #fff;
color : #000;
margin : 0;
padding : 0;
}
body {
font : bold 100% arial, sans-serif;
}
.wrap {
width : 50%;
}
.menuh {
float : left;
margin : 0;
border-bottom : 0 solid #520934;
color : #333;
background : #a4a4a0;
}
.menuh a {
display : block;
height : 16px;
text-align : left;
border : 1px solid #eee;
white-space : nowrap;
margin : 0;
padding : 0.3em 0.2em 0.3em 0.4em;
}
.menuh a, .menuh a:visited {
color : #000;
background : #a4a4a0;
text-decoration : none;
}
.menuh a:hover {
color : #fff;
background-color : #6e6a5a;
}
.menuh ul {
list-style : none;
margin : 0;
padding : 0;
float : left;
width : 100px;
}
.menuh li {
position : relative;
}
.menuh ul ul {
position : absolute;
z-index : 500;
top : auto;
display : none;
padding : 1em;
margin : -1em 0 0 -1em;
}
.menuh li:hover ul, .menuh li li:hover ul, .menuh li li li:hover ul, .menuh li li li li:hover ul {
display : block;
}
 
 
</style>
</head>
 
<body>
 
<div class="wrap">
<div class="menuh">
<ul>
<li><a href="#" class="top_parent">&nbsp;Stuff 1</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">&nbsp;Stuff 2</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">&nbsp;Stuff 3</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">&nbsp;Stuff 4</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">&nbsp;Stuff 5</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">&nbsp;Stuff 6</a></li>
</ul>
</div>
</div>
 
<div class="wrap">
<div class="menuh">
<ul>
<li>
<a href="#" class="top_parent">Homepage</a>
<ul>
<li><a href="#">&bull; About</a></li>
</ul>
</li>
</ul>
 
<ul>
<li>
<a href="#" class="top_parent">&nbsp;Gallery 1</a>
<ul>
<li><a href="#">&bull; Link 1</a></li>
<li><a href="#">&bull; Link 2</a></li>
<li><a href="#">&bull; Link 3</a></li>
</ul>
</li>
</ul>
 
<ul>
<li>
<a href="#" class="top_parent">&nbsp;Gallery 2</a>
<ul>
<li><a href="#">&bull; Link 1</a></li>
<li><a href="#">&bull; Link 2</a></li>
<li><a href="#">&bull; Link 3</a></li>
</ul>
</li>
</ul>
 
<ul>
<li><a href="#" class="top_parent">&nbsp;Gallery 3</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">&nbsp;Resources</a></li>
</ul>
 
<ul>
<li><a href="#" class="top_parent">&nbsp;Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

heh

David how you doin, thanks for the reply.

Its close but I'm looking for a twin version of the menu on http://www.mccabebuilders.com

Basically I can't format the look of the menu...... can you help pls?

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 37 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

le007 wrote:David how you

le007 wrote:

David how you doin,...

Compared with my former spouse, not bad.

le007 wrote:

Its close but I'm looking for a twin version of the menu on http://www.mccabebuilders.com

Basically I can't format the look of the menu...... can you help pls?

No.

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

heh

What kind of weird response is that?

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 37 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

An inappropriate one. See if

An inappropriate one. See if this works for you. Cursory checked local in IE/6, IE/7, and compliant browsers.
Online here:
http://www.chelseacreekstudio.com/ca/cssd/ul-1.html

<!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">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>test-6</title>
 
<style type="text/css">
 
html, body {
background : #fff;
color : #000;
margin : 0;
padding : 0;
}
body {
font : bold 100% arial, sans-serif;
}
 
#menuh-container
	{margin: 20px 0 0 20px; }
 
.menuh
	{
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	/*margin:2em;margin-top: 1em;*/
	}
 
.menuh a
	{
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}
 
.menuh a:link, .menuh a:visited, .menuh a:active	
	{
	color: white;
	background-color: #c66300;
	text-decoration:none;
	}
 
.menuh a:hover	/* menu at mouse-over  */
	{
	color: white;
	background-color: #ff6666;
	text-decoration:none;
	}	
.menuh.c1 a:link, .menuh.c1 a:visited, .menuh.c1 a:active	
	{
	color: #ff8000;
	background-color: #ccff66;
	text-decoration:none;
	}
 
.menuh.c1 a:hover	/* menu at mouse-over  */
	{
	color: white;
	background-color: #ffcc66;
	text-decoration:none;
	}	
 
 
 
.menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9em;	/* width of all menu boxes */
	}
 
.menuh li
	{
	position:relative;
    min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}
 
.menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}
 
.menuh ul ul ul
	{
	top:0;
	left:100%;
	}
 
div.menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}
 
div.menuh li:hover ul ul,
div.menuh li li:hover ul ul,
div.menuh li li li:hover ul ul,
div.menuh li li li li:hover ul ul
{display:none;}
 
div.menuh li:hover ul,
div.menuh li li:hover ul,
div.menuh li li li:hover ul,
div.menuh li li li li:hover ul
{display:block;}
 
 
 
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
.menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
.menuh ul li{float:left; width: 100%;}
.menuh a{height:1%;}
</style>
<![endif]-->
 
 
 
 
</head>
<body>
<div id="menuh-container">
<div class="menuh">
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
 
 
 
 
 
<div class="menuh c1">
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#">Sub 1:2</a></li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#">Sub 1:4</a></li>
<li><a href="#">Sub 1:5</a></li>
</ul>
</li>
</ul>
 
 
 
 
</div>
</div></body>
</html>

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

heh

hahah :thumbsup:

Thanks for the help - its almost perfecto. I've been chopping and changing a bit of my own code and came up with this: The problem is though, it needs a javascript that I found on the net to run in IE. Do you know how to have the exact same without Javascript?
Thank you for your help David.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #151517;
	color: #FFFFFF;
}
#menuh {
	background-color: #6C7079;
	border-top: 1px solid #949494;
	border-bottom: 1px solid #949494;
	height: 24px;
}
#menuh li {
	list-style: none;
	position: relative;
	float: left;
}
#menuh a {
	float: left;
	padding: 0 1em;
	color: #FFFFFF;
	text-decoration: none;
	height: 24px;
	line-height: 24px;
}
#menuh a:hover {
	background-color: #464D58;
}
#menuh ul {
	position: absolute;
	top: 24px;
	background-color: #6C7079;
	border: 1px solid #949494;
	width: 100px;
	padding: 0 4px;
	left: -999em;
}
#menuh ul li {
	width: 100%;
	padding: 4px 0;
	border-bottom: 1px solid #949494;
}
#menuh ul li.last {
	border-bottom: 0;
}
#menuh ul a {
	height: 1.2em;
	line-height: 1.2em;
	padding: 0 0 0 5px;
	float: none;
	display: block;
}
#menuh li:hover ul, #menuh li.sfhover ul {
	left: 0px;
}
-->
</style>
<!--[if lt IE 7]><script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("menuh").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);
</script><![endif]-->
</head>
<body>
<ul id="menuh">
	<li><a href="#">Homepage</a>
		<ul>
			<li class="last"><a href="#">About</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 1 </a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li class="last"><a href="#">Link 3</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 2</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li class="last"><a href="#">Link 3</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 3</a> </li>
	<li><a href="#">Resources</a> </li>
	<li><a href="#">Contact</a> </li>
</ul>
</body>
</html>

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 37 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

I think you'll need to live

I think you'll need to live with the javascript for IE/6. Although I seem to recall Stu Nicholls fed IE/6 and down, a table version-- seemed contrived and convoluted to me, but whatever does it for you is the name of the game...

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

Top bloke - thank you. I'll

Top bloke - thank you. I'll go with the JS.

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

heh

I just changed one piece of your code - I changed the distance of the dropdown from the top by 2px to create a gap effect. It's not really working though as the mouse reads the gap between it and won't keep the menu open.... any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #151517;
	color: #FFFFFF;
}
#menuh {
	background-color: #6C7079;
	border-top: 1px solid #B9C0CA;
	border-bottom: 1px solid #B9C0CA;
	height: 24px;
	color: #626B7E;
}
#menuh li {
	list-style: none;
	position: relative;
	float: left;
}
#menuh a {
	float: left;
	padding: 0 1em;
	color: #FFFFFF;
	text-decoration: none;
	height: 24px;
	line-height: 24px;
}
#menuh a:hover {
	background-color: #37383D;
}
#menuh ul {
	position: absolute;
	top: 26px;
	background-color: #6C7079;
	border: 1px solid #B9C0CA;
	width: 100px;
	padding: 0 4px;
	left: -999em;
}
#menuh ul li {
	width: 100%;
	padding: 4px 0;
	border-bottom: 1px solid #B9C0CA;
}
#menuh ul li.last {
	border-bottom: 0;
}
#menuh ul a {
	height: 1.2em;
	line-height: 1.2em;
	padding: 0 0 0 5px;
	float: none;
	display: block;
}
#menuh li:hover ul, #menuh li.sfhover ul {
	left: 0px;
}
-->
</style>
<!--[if lt IE 7]><script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("menuh").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);
</script><![endif]-->
</head>
<body>
<ul id="menuh">
	<li><a href="#">Homepage</a>
		<ul>
			<li class="last"><a href="#">About</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 1 </a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li class="last"><a href="#">Link 3</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 2</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li class="last"><a href="#">Link 3</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 3</a> </li>
	<li><a href="#">Resources</a> </li>
	<li><a href="#">Contact</a> </li>
</ul>
</body>
</html>

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 37 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Please clarify. You state

Please clarify. You state you changed one thing I did. Yet the CSS and HTMl in your reply is entirely different than mine? We need to be on the same book and page. In the meantime, I see you opened a new thread -- same problem/different subject line. So I'll bow out so as not to confuse the issue.

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

heh

Well I'm trying all avenues as some people mightn't see the post here. Ok well sure thanks for the inital help..... I'll continue to trawl on.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 28 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hi Leo! Check out my other

Hi Leo!

Check out my other answer, but I'll add it here too-- hover only keeps working on contact, so instead of making a gap, which will make you lose hover, fake it with and image or border that LOOKS like the background.

If you menu is anything like the neat-0 one David posted, then it may be multiple images.

Or, Java-da-script. But I'm still rather allergic to that for menus. At least, set the menu without the gap and let those with Java-da-script see the gap by changing place and keeping hover... it would have to start working onload or so. That way there's a working menu for the rest of us.

I gotta say, the little bit of the menu I can get working on McCabe sucks, as I only get COMPANY covering the lower part, and navigating around the two lines is kindof a pain in the ass. I have to completely let the top unhover to get at the bottom again.

But you've already heard my opinion of the code at that site already : )

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Leo can I ask how many

Leo can I ask how many people do you think you need helping you with this problem?

You posted this same question twice on this forum - in a lightly modified version - and I'm staggered to see that you have done the same on no less than three occasions on Sitepoint, have you any idea why this is considered bad practise?

You should stop this practise, post once and to one forum only and run with that thread; only when that thread has proved to run it's course and fail to solve the issue should you consider trying a further forum.

I'm amazed that sitepoint mods never bother to pick up on things like this.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

re

Alright, I take your point hugo. They were different issues though, but I won't multipost again if you consider that.

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 1 week ago
Joined: 2006-10-08
Posts: 160
Points: 0

As ever....

Legend, thank you.