14 replies [Last post]
immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

I have a navigation bar on my site, which is made entirely using CSS.

At the moment i have the links listed down the bar:
e.g
Home
Links
Contact

Then on mouseover the background changes colour and the padding to each side.

Is there a way using CSS to have it so when you hover over a link that more links come up:
e.g
Home
Home1
Home2
Home3
Links
Contact

So that Home isn't actually a link, but the top stage of a smaller menu, which you can't see until you put your mouse over it, and for it to stay there until the mouse if off any of the home bits.

This is the code I have so far in the HTML file:

<ul id="navigation">
	<li><a href="../index.html">Home</a></li>
	<li><a href="../links.html">Links</a></li>
	<li><a href="../links.html">Links</a></li>
</ul>

And this is the code I have in my CSS:

#navigation {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
#navigation a {
   background: #e3e3e3;
   color: #000000;
   display: block;
   width: 100%;
   margin-bottom: 2px;
   border-left: 3px solid #ffffff;
   border-right: 3px solid #ffffff;
   padding-left: 10px;
}
#navigation a:hover {
   background: #868686;
   color: #FFFFFF;
   text-decoration: none;
   border-left: 3px solid #666666;
   border-right: 3px solid #666666;
}

I've looked through Dynamic Drive and a few other sites but haven't been able to find anything like it.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS navigation

Take a look at suckerfish dropdowns. Its a horizontal menu with vertical flyouts, the same principles can be applied to vertical menus with horizontal flyouts. There are probably links around which demo such systems, I don't have any. Googling on "CSS Menus" will probably show up something.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 9 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

CSS navigation

Here's a simple example :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background-color:white;
}
* {
padding:0;
margin:0;
}
ul ul {
display:none;
}
ul li:hover ul, ul li.sfhover ul {
display:block;
}
li {
font-size:1.3em;
width:100px;
background-color:red;
}
ul ul li {
background-color:yellow;
font-size:1em;
}
a {
display:block;
_height:1px;
}

</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.body.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>
</head>
<body>
<ul>
<li>One
	<ul>
	<li><a href="#n">One A</a></li>
	<li><a href="#n">One B</a></li>
	<li><a href="#n">One C</a></li>
	</ul>
	</li>
<li>Two
	<ul>
	<li><a href="#n">Two A</a></li>
	<li><a href="#n">Two B</a></li>
	<li><a href="#n">Two C</a></li>
	</ul>
</li>
<li>Three
	<ul>
	<li><a href="#n">Three A</a></li>
	<li><a href="#n">Three B</a></li>
	<li><a href="#n">Three C</a></li>
	</ul>
</li>
</ul>
</body>
</html>

(At least, I think that's what you meant).

immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

CSS navigation

Thats perfect, thanks.

immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

CSS navigation

I've just tried it on mine, and when you hover over the main link the extra links appear, but once i move the mouse off the main link the extra links disappear again.

HTML:

<ul>
<li><a href#">Home</a></li>
<li><a href#">Games</a></li>
<ul>
<li><a href="#">Games1</a></li>
<li><a href="#">Games2</a></li>
</ul>
<li><a href="#">Links</a></li>
</ul>

CSS:

ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
ul a {
   background: #e3e3e3;
   color: #000000;
   display: block;
   width: 100%;
   margin-bottom: 2px;
   border-left: 3px solid #ffffff;
   border-right: 3px solid #ffffff;
   padding-left: 10px;
}
ul a:hover {
   background: #868686;
   color: #FFFFFF;
   text-decoration: none;
   border-left: 3px solid #666666;
   border-right: 3px solid #666666;
}
ul li:hover ul, ul li.sfhover ul { 
display:block; 
} 
* { 
padding:0; 
margin:0; 
} 
ul ul { 
display:none; 
} 
ul ul li {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
ul ul li a {
   background: #ffffff;
   color: #000000;
   display: block;
   width: 100%;
   margin-bottom: 2px;
   border-left: 3px solid #666666;
   border-right: 3px solid #666666;
   padding-left: 10px;
}
ul ul li a:hover {
   background: #000000;
   color: #FFFFFF;
   text-decoration: none;
   border-left: 3px solid #999999;
   border-right: 3px solid #999999;
}
a { 
display:block; 
_height:1px; 
} 

Have I missed something out?

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 9 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

CSS navigation

Look more carefully at the html of my list and compare it to yours.

immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

CSS navigation

The html's are the same. It's just that i have no sub links to some of the main links.

I've fixed it now. I hadn't put this:

li { 
font-size: 14px; 
width:180px; 
} 

Into my CSS code, which needs the width on, if it's not there then it won't work. But I thought that it would take the width from the master.

Thanks for your help.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 9 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

CSS navigation

No - actually, your html is invalid...

<ul>
<li><a href#">Home</a></li>
<li><a href#">Games</a></li>
<ul>
<li><a href="#">Games1</a></li>
<li><a href="#">Games2</a></li>
</ul>
<li><a href="#">Links</a></li>
</ul>

You've closed the li after 'Games', so what you have is a 'ul' as the child of a 'ul', which is invalid. If you move that closing tag a little, you'll be OK...
<ul>
<li><a href#">Home</a></li>
<li><a href#">Games</a>
<ul>
<li><a href="#">Games1</a></li>
<li><a href="#">Games2</a></li>
</ul></li>
<li><a href="#">Links</a></li>
</ul>

immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

CSS navigation

Works both ways.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS navigation

but yours is wrong. :?

immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

CSS navigation

So why does it work then?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS navigation

Browsers are forgiving. Try validating the page - you'll get errors.

immoral giant
Offline
Regular
Last seen: 16 years 6 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

CSS navigation

I would but i've already "fixed" it to how its supposed to be.

Thanks for your help.

Anonymous
Anonymous's picture
Guru

CSS navigation

immoral giant wrote:
I would but i've already "fixed" it to how its supposed to be.

Thanks for your help.Grrr. That's one thing that tweaks my jubblies! Evil

Quote:
it works so *blarg* you and your web standards
Evil Evil Evil :roll:

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 9 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

CSS navigation

My jubblies are well and truly tweaked too. The stupid thing about it is that it would take two seconds to fix.