Snazzy drop down naviagtion in CSS

Sam · 30-01-2006, 09:17 PM

I got this off pixel2life ;P Its intertesting thats all...

well, Im too lazy to break it down into little bits and explain because i want to hurry up n go and get food -.-

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[ <!ELEMENT a (#PCDATA | table)* > ]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Drop Down Menu </title>
<style type="text/css">
body {
font-size:1%; 
color:#fff;
}
.menu {
display:none;
}
.container {
color:#000; 
width:90px; 
height:18px; 
display:block; 
background:#63a401; 
border:1px solid #000; 
margin-right:1px; 
text-align:center; 
float:left; 
text-decoration:none; 
font-family:tahoma, vardana, arial, sans-serif; 
font-size:10px; 
line-height:18px; 
overflow:hidden;
}
.container:hover {
height:auto; 
cursor:pointer;
color:#fff; 
background:#63a401;
}
a.inside, a.inner:visited {
display:block; 
width:89px;
height:18px; 
border-bottom:1px solid #000; 
text-decoration:none; 
color:#000; 
background:#3798cb;
}
a.inside:hover {
background:#add;
}
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/ 
.container {
display:none;
}
.menu {
display:block;
}
a.outside, a.outer:visited {
color:#000; 
width:90px; 
height:18px; 
display:block; 
background:#63a401; 
border:1px solid #000; 
margin-right:1px; 
text-align:center; 
float:left; 
text-decoration:none; 
font-family:tahoma, vardana, arial, sans-serif; 
font-size:10px; 
line-height:18px; 
overflow:hidden;
}
a.outside:hover {
color:#fff; 
background:##63a401;
overflow:visible;
}
a.outside:hover table {
display:block; 
background:#3798cb; 
border-collapse:collapse;
}
a.inside, a.inner:visited {
display:block; 
width:88px; 
height:18px; 
border-bottom:1px solid #000; 
text-decoration:none; color:#000;
font-family:tahoma, vardana, arial, sans-serif; 
font-size:10px; 
text-align:center;
}
a.inside:hover {
background:#add;
}
/*]]>*/
</style>
<![endif]-->
</head>
<body>

<div class="menu">
<a class="outside" href="#">Menu Name
<table><tr><td>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</td></tr></table>
</a>

<a class="outside" href="#">Menu Name
<table><tr><td>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</td></tr></table>
</a>
</div>

<div class="container">
Menu Name<br />
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>
<div class="container">
Menu Name<br />
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>

</body>
</html>

http://www.pixel2life.com/twodded/st.../dropdown.html

Coding4Newbs · 31-01-2006, 01:04 PM

Thats old, but im sure itll be new to some members so well done

its usefull if you got 10000000000000000000 links

~~Oracle:~~ · 31-01-2006, 04:42 PM

Hello.

This tutorial is quite interesting but there are better ways of doing it really and if your to post a code then you are best off explaining it.

Thanks
Dan

Anderman · 31-01-2006, 04:57 PM

And had more snazzy poos than that

Its nothing special

Sam · 31-01-2006, 05:06 PM

Its ok. I dont know 1000's of people who know CSS to be honest, and considering my WHOLE layout is coded in it ;P

- Sam

Thread: Snazzy drop down naviagtion in CSS

Thread Tools

Snazzy drop down naviagtion in CSS

Posting Permissions