Welcome to WebmasterWorld Guest from 54.162.184.214

Forum Moderators: not2easy

Message Too Old, No Replies

horizontal menu bar

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

New User

5+ Year Member

joined:Nov 22, 2008
posts:2
votes: 0


Hi

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]

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

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 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> ).
9:34 pm on Nov 24, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Oct 17, 2008
posts:69
votes: 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;
}

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members