Horizontal CSS Menu's

Vercz · Post by **Vercz** » Sun Jan 29, 2006 4:55 am

ok, ive been following a tutorial [url="http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp"](found here)[/url] to make a Horizontal CSS Menu for my site, just thought it would be a nifty thing to learn really... and ive almost got it, looks how it should... the only problem is, the menu doesnt appear when i hover over it (like it should /blum.gif' class='bbc_emoticon' alt=':P' />)

should work like this: [url="http://www.tanfa.co.uk/css/examples/menu/hs7.asp"]http://www.tanfa.co.uk/css/examples/menu/hs7.asp[/url]

Code: Select all

.body {
background-color: #000000;
font-family: Arial, Helvetica, Sans-serif;
margin: 0;
padding: 0px;
width: 80%;
color: #FFFFFF;
font-size: 13px;
z-index: 1;
}
a { text-decoration: none; }
.navs {
width: 100%;
text-align: left;
background-color: #000000;
text-align: center;
}
ul#navbar {
margin: 0;
width: 100%;
background-color: #000000;
color: #920000;
padding: 0.2em 1em;
font-size: 12px;
}
#navbar a:hover {
background-color: #920000;
color: #FFFFFF;
width: 100%;
padding: 0.2em 1em;
}
ul#navbar ul { 
display: none;
position: absolute;
z-index: 2; 
}
ul#navbar ul a:hover {
display: block; 
background-color: #920000;
color: #FFFFFF;
width: 100%;
padding: 0.2em 1em;
}
#navbar a {
background-color: #000000;
color: #FFFFFF;
padding: 0.2em 1em;
}
#navbar li { 
position: relative;
display: inline;
list-style-type: none;
width: 100%;
color: #FFFFFF;
padding: 0.2em 1em;
}
#navbar li.active a {
background-color: #920000;
color: #FFFFFF;
width: 100%;
padding: 0.2em 1em;
}
.wide { width: 70%; }
.red { 
color: #920000;
text-decoration: none;
}
.white {
color: #FFFFFF;
text-decoration: none;
}
.white a {
color: #920000;
text-decoration: none;
}

Code: Select all

<ul id="navbar">
<li class="active"><a href="index.php">Index</a></li>
<li><a href="about.php">About</a></li>
<li><a href="tuts.php">Tutorials</a></li>
<li><a href="portfolio.php">Portfolio</a>
<ul>
<li><a href="sites.php">Sites</a></li>
<li><a href="article.php">Articles</a></li>
<li><a href="poetry.php">Poetry</a></li>
</ul></li>
<li><a href="gaming.php">Gaming</a></li>
<li><a href="contact.php">Contact</a></li>
</ul></div>

anyone got any idea as to how to fix this? most likely something really easy ive missed, oh well /blum.gif' class='bbc_emoticon' alt=':P' />

thanks[/color]

Josh · Post by **Josh** » Sun Jan 29, 2006 4:39 pm

Why do you have a at the end of your html? /smile.gif' class='bbc_emoticon' alt=':)' />

Post by **Scott** » Mon Jan 30, 2006 2:10 am

Where abouts is your copy which isn't working?

Vercz · Post by **Vercz** » Mon Jan 30, 2006 3:51 am

http://vercz.killanet.net/new

...and testing locally /smile.gif' class='bbc_emoticon' alt=':)' />

Vercz · Post by **Vercz** » Wed Feb 01, 2006 10:22 pm

...heres the whole html document =)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>the malice</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<center><body bgcolor="#000000">

<div class="wide"><div class="navs">
<ul id="navbar">
<li class="active"><a href="index.php">Index</a></li>
<li><a href="about.php">About</a></li>
<li><a href="tuts.php">Tutorials</a></li>
<li><a href="portfolio.php">Portfolio</a>
<ul>
<li><a href="sites.php">Sites</a></li>
<li><a href="article.php">Articles</a></li>
<li><a href="poetry.php">Poetry</a></li>
</ul></li>
<li><a href="gaming.php">Gaming</a></li>
<li><a href="contact.php">Contact</a></li>
</ul></div>
<div class="body"><img src="images/banner.jpg" alt="the malice" />
<br><br>
<a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br><br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</a>
<br><br>
<div class="navs">
<ul id="navbar">
<li><a href="http://staff.killanet.net">KN Staff</a></li>
<li><a href="http://www.killagraphix.com">KillaGraphix</a></li>
<li><a href="http://www.killahosting.com">KillaHosting</a></li>
<li><a href="http://www.killablogs.com">KillaBlogs</a></li>
<li><a href="http://www.killablogs.com/vercz">My KillaBlog</a></li>
</ul></div>


</div></div>

</body></center>
</html>

Post by **Scott** » Thu Feb 02, 2006 12:06 am

Sorry, been distracted, I'll look at it tonight.

Post by **Scott** » Fri Feb 03, 2006 6:31 am

Seems to be working:

Code: Select all

<style type="text/css">
body {
background-color: #000000;
font-family: Arial, Helvetica, Sans-serif;
margin: 0;
padding: 0px;
width: 80%;
color: #FFFFFF;
font-size: 13px;
z-index: 1;
}
.navs {
width: 100%;
background-color: #000000;
text-align: center;
}
#navbar {
position: absolute;
left: 20%; !change me to center - dunno why it isn't working using <center>
width: 80%;
text-align: center;
}

#navbar ul {
list-style: none;
margin: 0;
padding: 0.2em 1em;
width: 5em;
float: left; !important
}

#navbar a, #navbar h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border: 0;
margin: 0;
padding: 2px 3px;
text-align: center;
cursor: pointer;
}

#navbar h2 {
background-color: #000000;
color: #ffffff;
}

#navbar a {
color: #ffffff;
background-color: #000000;
text-decoration: none;
}

#navbar a:hover {
background-color: #920000;
color: #FFFFFF;
}

#navbar li {position: relative;}

#navbar ul ul {
position: absolute;
z-index: 500;
}

#navbar ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#navbar .active {
background-color: #920000;
color: #FFFFFF;
padding: 0.2em 1em;
}

div#navbar ul ul,
div#navbar ul li:hover ul ul,
div#navbar ul ul li:hover ul ul
{display: none;}

div#navbar ul li:hover ul,
div#navbar ul ul li:hover ul,
div#navbar ul ul ul li:hover ul
{display: block;}
</style>
</head>

<body bgcolor="#000000">
<div class="navs">
<div id="navbar">
<ul>
  <li><a class="active" href="index.php">Index</a></li>
</ul>
<ul>
  <li><a href="about.php">About</a></li>
</ul>
<ul>
  <li><a href="tuts.php">Tutorials</a></li>
</ul>
<ul>
  <li><h2>Portfolio</h2>
	<ul>
	  <li><a href="sites.php">Sites</a></li>

	  <li><a href="artices.php">Articles</a></li>
	  <li><a href="poetry.php">Poetry</a></li>
	</ul>
  </li>
</ul>
<ul><li><a href="gaming.php">Gaming</a></li></ul>
<ul><li><a href="contact.php">Contact</a></li></ul>
</div></div>