horizontal menu bar

Forum Moderators: not2easy

Message Too Old, No Replies

horizontal menu bar

mahone

2:43 am on Nov 23, 2008 (gmt 0)

I am looking for a menu that looks like from the <snip> and I can't find one.

anybody here can point me to some sites that have menus that look close to that?

Please help

Thanks

[edited by: swa66 at 8:37 pm (utc) on Nov. 24, 2008]
[edit reason] See linking policy in the forum charter [/edit]

swa66

8:50 pm on Nov 24, 2008 (gmt 0)

It seems you're looking for a drop-down menu in css. There are plenty of examples out there (Google is your friend :) ). Basically you can do it in pure CSS for all but IE6 (thanks to its lack of support of :hover on any but an <a> ).

essiw

9:34 pm on Nov 24, 2008 (gmt 0)

since the post i made was deleted, i decided to paste a piece of the code here, save the html and css (and change the css line in the html code so it opens the css) and you will see how it works:
(there are some parts not needed for the drop-down menu but otherwise it doesn't look good)

HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Eclipse Productions</title>
<link rel="stylesheet" rev="stylesheet" title="Xenocide" href="file:///Wisse/blieb.css" type="text/css"/>
</head>
<body><h1>Eclipse Productions</h1>
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Archive</a>
<ul>
<li><a href="/projects/akaneiro">Akane-iro ni Somaru Saka</a></li>
<li><a href="/projects/clannad">Clannad</a></li>
<li><a href="/projects/claymore">Claymore</a></li>
<li><a href="/projects/geass">Code Geass</a></li>
<li><a href="/projects/fsn">Fate/stay night</a></li>
<li><a href="/projects/hayate">Hayate no Gotoku!</a></li>
<li><a href="/projects/kanon">Kanon</a></li>
<li><a href="/projects/kyouran">Kyouran Kazoku Nikki</a></li>
<li><a href="/projects/manabi">Manabi Straight</a></li>
<li><a href="/projects/ps">Pumpkin Scissors</a></li>
<li><a href="/projects/magica">Rental Magica</a></li>
<li><a href="/projects/shana">Shakugan no Shana</a></li>
<li><a href="/projects/stratos4">Stratos 4</a></li>
<li><a href="/projects/index">Toaru Majutsu no Index</a></li>
<li><a href="/projects/tsukaima">Zero no Tsukaima</a></li>
</ul>
</li>
<li><a href="/xdcc">XDCC</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
</body>
</html>

CSS:

body {
background: #111;
}
a {
padding-left: 0.3em;
padding-right: 0.3em;
}
a:LINK {
color: #fff;
text-decoration: none;
}
a:VISITED {
color: #eee;
text-decoration: none;
}
a:HOVER {
text-decoration: underline;
}

h1 {
background: #444;
padding-left: 0.3em;
padding-top: 0.1em;
padding-bottom: 0.1em;
margin: 0;
color: #ddd;
}
p {
padding-left: 0.3em;
padding-right: 0.3em;
}

div#menu ul li a {
text-decoration: none;
}
div#menu ul li {
float: left;
border-right: 1px solid #222;
}

/* this is what you need for your drop-down menu*/
div#menu ul {
display: inline;
list-style: none;
}

div#menu ul li ul {
position: absolute;
display: none;
background: #000;
padding-left: 0;
margin-left: 0;
}
div#menu ul li a:HOVER {
background: #555;
}
div#menu ul li:HOVER ul, div#menu ul li.iehover ul {
display: block;
}
div#menu ul li ul li {
display: block;
float: none;
border: 0.2em solid #000;
margin: 0;
padding: 0;
}