...

View Full Version : Pure CSS Drop Down Menu



M1kael
07-25-2007, 05:03 PM
Hello, I'm trying to make a pure css drop down menu. I haven't found any good ways of doing this, without adding some javascript. I'm using nested lists for the navigation menu.
I initially hide the sub menu with a "display:none", and I'm confused why this doesn't work:
#nav a:hover ul{
display: block;
}

Below is all of my code.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style TYPE="text/css">
html {
margin:0;
padding:0;
}

body {
margin: 0;
padding: 8px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}

/* Top Navigation */

.clear {
clear:both;
font-size:0;
line-height:0;
}

#topNav {
margin: 10px 0px;
/*border: 1px solid #0f0;*/
}

#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}

#nav {

margin: 0px 0px 0px 155px;
padding: 0;
list-style: none;

}

/* Hides from IE-mac \*/
* html #nav {height: 1%;}
/* End hide from IE-mac */

#nav li {
margin-left: 8px;
float: left;
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;
background-repeat: no-repeat;
background-position: 50% 100%;
}

#nav a {
text-decoration: none;
text-align: center;
font-size: 1.5em;
color: #FFF;
background: #c7013f;
display: block;
}

#nav li ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #0f0;
display: none;
}



#nav li ul li {
margin: 4px auto;
padding: 0px;
height: 1em;
width: 85%;
display: block;


}

#nav li ul li a {
font-size: 1.1em;
background: #c7013f;

}

#nav a.mainMenu:hover {
background-color: #235;
}

/* Display the sub menu when rollover link */

#nav a.mainMenu:hover ul{
display: block;
}

#nav li ul li a:hover {
background: #235;
}




/* Side Navigation */

#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
}

#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
#sideNav a {
font-size: 1em;
color: #fff;
text-decoration: none;
}

#sideNav #calendar {
margin: 0px;
}

#sideNav img {
border-style: none;
width: 150px;
height: 150px;
}

#sideNav a:hover {
font-weight: bold;
}

/* Main Content Container */

#main {
float: auto;
margin: 0px 0px 0px 163px;
padding: 10px;
border: 1px solid #000;
background: #fff;
}


/* Page Footer */

#footer {
clear: both;
background: #235;
border: 1px solid #000;

color: #aaa;
text-align: center;

margin: 10px 0px 0px 0px;
padding: 20px;
}

#footer a {
color: #fff;
font: underline;
}

#footer a:hover {
font-weight: bold;
letter-spacing: .1em;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#fixBox {
margin-right:-3px;
}
#dynamicBoxContainer {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>


<div id="topNav">
<!-- Search Box -->

<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />

<input type="submit" value="Search" />
</form>
</div>
<ul id="nav">
<li>
<a class="mainMenu" href="#">Foundation</a>
<ul>
<li>
<a href="charter.html">Charter</a></li>
<li>
<a href="#">Committee</a></li>
<li>
<a href="#">Schedule</a></li>

<div class="clear">&nbsp;</div>
</ul>


</li>
<li>
<a class="mainMenu" href="#">Volunteer</a>
<ul>
<li>
<a href="#">Charter</a></li>
<li>
<a href="#">Committee</a></li>
<li>
<a href="#">Schedule</a></li>
<div class="clear">&nbsp;</div>
</ul>

</li>

<li>
<a class="mainMenu" href="#">Submission</a>
<ul>
<li>
<a href="#">Charter</a></li>
<li>
<a href="#">Committee</a></li>
<li>
<a href="#">Schedule</a></li>
</ul>

</li>

<li>
<a class="mainMenu" href="#">Recipients</a>
<ul>
<li>
<a href="#">Charter</a></li>
<li>
<a href="#">Committee</a></li>
<li>
<a href="#">Schedule</a></li>
</ul>
</li>
<div class="clear">&nbsp;</div>
</ul>
<div class="clear">&nbsp;</div>

</div>

<div id="sideNav">
<div class="box">
<a href="#">link</a></div>
<div class="box">
<a href="#">link</a></div>
<div class="box">
<a href="#">link</a></div>

</div>

<!-- Main Content -->

<div id="main">

Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor.

Etiam at risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi

nulla, rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem

mauris, imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget

scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis

tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.


</div>


<div id="footer">
<a href="#">Feedback</a>
| <a href="#">Contact</a>
| <a href="#">Site Map</a>
| <a href="#">Privacy</a>
| <a href="#">Legal</a>
<br /><br />
Donec aliquet tincidunt velit. Aliquam erat volutpat.<br />
Mauris ante. Suspendisse a leo ut leo tristique porta.<br />
Aliquam iaculis sem tristique massa fringilla faucibus.
</div>


</div>
</body>
</html>

daemonkin
07-25-2007, 05:32 PM
Can you show an example page?

D.

garydarling
07-25-2007, 05:38 PM
No sense in doing all that work when you can freely borrow someone else's. Stu Nichols gives these away:

http://www.cssplay.co.uk/menus/

M1kael
07-25-2007, 05:44 PM
I was looking at Stu's work, but it seems so overly complicated for what I'm trying to do. Is it really the simplest best way?

I don't have somewhere that I can freely host the page right now, but here is the code for JUST the navigation menu. Does anyone know why I can't display the nested list with an a:hover style.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />




<style>
html {
margin:0;
padding:0;
}

body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}

.clear {
clear:both;
font-size:0;
line-height:0;
}


/* Top Navigation */


#topNav {
margin: 10px 0px;
border: 1px solid #0f0;
}

#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}

#nav {
margin: 0px 0px 0px 155px;
padding: 0;
list-style: none;
border: 1px dotted #0f0;

}


/* Hides from IE-mac \*/
* html #nav {height: 1%;}
/* End hide from IE-mac */

#nav li {
margin-left: 8px;
float: left;
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;
background-repeat: no-repeat;
background-position: 50% 100%;
}

#nav a {
text-decoration: none;
text-align: center;
font-size: 1.5em;
color: #FFF;
background: #c7013f;
display: block;
}

#nav a.mainMenu:hover {
background-color: #235;
}



#nav li ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #0f0;
display: none;
}

#nav li a.mainMenu:hover ul{
display: block;
}

#nav li ul li {
margin: 4px auto;
padding: 0px;
height: 1em;
width: 85%;
display: block;


}

#nav li ul li a {
font-size: 1.1em;
background: #c7013f;

}

#nav li ul li a:hover {
background: #235;
}

</style>

<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>


<div id="topNav">
<!-- Search Box -->

<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />

<input type="submit" value="Search" />
</form>
</div>
<ul id="nav">
<li id="nav-foundation">
<a class="mainMenu" href="foundation.html">Foundation</a>
<ul>
<li id="nav-charter">
<a href="#">Charter</a></li>
<li id="nav-committee">
<a href="#">Committee</a></li>
<li id="nav-schedule"><a href="#">Schedule</a></li>
<div class="clear">&nbsp;</div>
</ul>


</li>
<li id="nav-volunteer">
<a class="mainMenu" href="#">Volunteer</a>
<ul>
<li id="nav-charter">
<a href="#">Charter</a></li>
<li id="nav-committee">
<a href="#">Committee</a></li>
<li id="nav-schedule"><a href="#">Schedule</a></li>
<div class="clear">&nbsp;</div>
</ul>

</li>

<li id="nav-submission">
<a class="mainMenu" href="#">Submission</a>
<ul>
<li id="nav-charter">
<a href="#">Charter</a></li>
<li id="nav-committee">
<a href="#">Committee</a></li>
<li id="nav-schedule"><a href="#">Schedule</a></li>
<div class="clear">&nbsp;</div>
</ul>

</li>

<li id="nav-recipients">
<a class="mainMenu" href="#">Recipients</a>
<ul>
<li id="nav-charter">
<a href="#">Charter</a></li>
<li id="nav-committee">
<a href="#">Committee</a></li>
<li id="nav-schedule"><a href="#">Schedule</a></li>
<div class="clear">&nbsp;</div>
</ul>
</li>
<div class="clear">&nbsp;</div>
</ul>
<div class="clear">&nbsp;</div>

</div>

</body>
</html>

M1kael
07-25-2007, 05:59 PM
I found a much simpler menu at Stu's that I'm going to try to mimic.

http://www.cssplay.co.uk/menus/basic_dd.html

M1kael
07-25-2007, 06:34 PM
Ok, so I'm still rather stuck. I've been trying to modify Stu's menu system to work for me. I have a slightly different situation, since I'm trying to get the drop down menu to display inside of the main menu boxes. The boxes also expand based on window size. Any help would be greatly appreciated!!

Here is Stu's barebones drop down menu:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">

/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}

/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


</style>

</head>

<body>
<div class="menu">

<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>


</div>

</body>
</html>


And here is my implemented version of it:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
html {
margin:0;
padding:0;
}

body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}

.clear {
clear:both;
font-size:0;
line-height:0;
}


/* Top Navigation */


#topNav {
margin: 10px 0px;
border: 1px solid #ff0;
}

#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}

#nav {
margin: 0px 0px 0px 155px;
padding: 0;
border: 1px solid #0f0;
}

#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#nav li {

margin-left: 8px;
float: left;
/*
position: relative;
z-index: 100;
*/
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;
background-repeat: no-repeat;
background-position: 50% 100%;
}

#nav table {
/*
position:absolute;
z-index:80;

*/
border-collapse: collapse;
left: -1px;
top:25px;
}

#nav a {
display: block;
font-size: 1.5em;
color: #FFF;
background: #c7013f;
text-decoration: none;
text-align: center;
}

#nav ul li:hover a, #nav ul a:hover {
background-color: #235;
}

#nav ul ul {
margin: 0;
padding: 0;
visibility: hidden;
border: 1px solid #0f0;
/*
position: absolute;
*/
}

#nav ul ul li {
margin: 0 auto;
height: 1em;
width: 95%;
}


#nav ul li:hover ul, #nav ul a:hover ul{
visibility: visible;
}

</style>

<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>


<div id="topNav">
<!-- Search Box -->

<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />

<input type="submit" value="Search" />
</form>
</div>

<div id="nav">
<ul>
<li>
<a href="#">Foundation<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear">&nbsp;</div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a href="#">Volunteer<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear">&nbsp;</div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear">&nbsp;</div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear">&nbsp;</div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<div class="clear">&nbsp;</div>
</ul>
<div class="clear">&nbsp;</div>
</div>

</div>

</body>
</html>

Mehdi72
07-26-2007, 02:23 AM
Removed.

M1kael
07-27-2007, 04:25 PM
Well, I've made some progress on these drop down menus. I'm still having visual differences between FF and IE. The code is also very messy. I was hoping someone could take a look at help me clean it up and fix the IE problems.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
html {
margin:0;
padding:0;
}

body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}

.clear {
margin:0;
padding:0;
clear:both;
font-size:0;
line-height:0;
}


/* Top Navigation */


#topNav {
margin: 10px 0px;
padding: 0;
/* border: 1px solid #ff0; */
}

#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}

#nav {
margin: 0px 0px 0px 153px;
padding: 0;
/* border: 1px solid #0f0; */
}

#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#nav li {
margin-left: 8px;
float: left;
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;9:18 AM 7/27/2007
/*
position: relative;
z-index: 100;
*/
}

#nav table {
border-collapse: collapse;
left: -1px;
top:25px;
/*
position:absolute;
z-index:80;
*/
}

#nav table a {
font-size: 12px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
background: #c7013f;
}

#nav ul li a.main {
display: block;
font-size: 18px;
color: #FFF;
background: #c7013f;
text-decoration: none;
text-align: center;
}

#nav ul ul {
margin: 0 auto;
padding: 0;
/* border: 1px solid #0f0; */
width: 90%;
display: none;

/*
visibility: hidden;
position: absolute;
*/
}


#nav ul ul li {
margin: 4px 0px;
padding: 0;
/* border: 1px solid #fff; */
height: 15px;
width: 100%;
}

#nav ul ul li a {
font-size: 12px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
background: #c7013f;

}

#nav ul li:hover a.main, #nav ul a.main:hover {
background-color: #235;
}

#nav ul li:hover ul, #nav ul a:hover ul{
display:block;

/* visibility: visible; */

}

#nav ul ul li:hover a, #nav ul ul a:hover {
background-color: #235;
}

</style>

<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>


<div id="topNav">
<!-- Search Box -->

<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />

<input type="submit" value="Search" />
</form>
</div>

<div id="nav">
<ul>
<li>
<a class="main" href="#">Foundation<!--[if IE

7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>

<div class="clear">&nbsp;</div>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a class="main" href="#">Volunteer<!--[if IE

7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>

<div class="clear">&nbsp;</div>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a class="main" href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>

<div class="clear">&nbsp;</div>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<a class="main" href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>

<div class="clear">&nbsp;</div>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<div class="clear">&nbsp;</div>
</ul>
<div class="clear">&nbsp;</div>
</div>

</div>

</body>
</html>


Thanks in advance!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum