Hi
I am trying to make dropdown menus for my website and am puzzled as to why my float left, in my container div, is not working (it is going underneath). Here is the code for both files. i hope someone csn put me right and tell me what code to change
CSS FILE
html document (located at http://www.koodayexpress.co.uk/css/dropdownmenu.html)
thanks in advance
I am trying to make dropdown menus for my website and am puzzled as to why my float left, in my container div, is not working (it is going underneath). Here is the code for both files. i hope someone csn put me right and tell me what code to change
CSS FILE
Code:
@charset "utf-8";
#navMenu {
margin:0;
padding:0;
width:30em;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
clear:both;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
background:#999;
clear:both;
}
#wrapper {
margin:1;
padding:1;
float:left;
position:relative;
}
#container {
width:2200px;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
/************************************/
#navMenu li:hover {
background:#09F;
}
#navMenu ul li:hover ul li a:hover {
background:#CCC;
color:#000;
}
#navMenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#leftnav {
float:left;
width:200px;
height:400px;
border-left:1px
html document (located at http://www.koodayexpress.co.uk/css/dropdownmenu.html)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
<title> Kooday Express Team - Our Team</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<div id="navMenu">
<ul>
<div id="leftnav">
<li><a href="/index.html">Home</a></li>
<li> <a href="/about-kooday.html">About Kooday.com</a></li>
<li> <a href="/about-koodayexpress.html">Kooday Express</a></li>
<li> <a href="/our-team.html">Our Team </a></li>
<li> <a href="/news-updates.html">News & Updates</a></li>
<li> <a href="/events.html">Events</a></li>
<li> <a href="/resources--links.html">Resources & Links</a></li>
<li> <a href="/contact.html">Contact Us</a></li><br />
</ul>
</div>
<br><br>
<div id="container">
<h2 style=" text-align: left; "><span style="color: rgb(255, 204, 0);">Darren Laverick, Group Leader & Administrator</span><br /></h2>
<span style=" z-index: 10; float: left; position: relative; "><a><img src="/images/darrenlaverick-small.gif" style="margin-top: 5px; margin-bottom: 10px; margin-left: 0px; margin-right: 10px; border-width:1px;padding:3px;" alt="Picture" class="galleryImageBorder" /></a><div style="display: block; font-size: 90%; margin-top: -10px; margin-bottom: 10px; text-align: center;"></div></span>
<div class="paragraph" style=" text-align: left; display: block; "><span style="color: rgb(255, 204, 0);"><font size="3"><span style="font-weight: bold;"><br /><span style="font-style: italic;">Kooday Diamond <img src="/images/diamond-small.jpg" <br /><br /></span>Skype ID: eboodcom <br> MSN: drrnlav68@hotmail.co.uk <br />
</div>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Kooday Status</a>
<ul>
<li><a href="http://www.koodayexpress.co.uk/screenshots/30.12.10/kooday_diamond.gif">30th December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/23.12.10/kooday_diamond.gif">23rd December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/16.12.10/kooday_diamond.gif">16th December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/9.12.10/kooday_diamond.gif">9th December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/2.12.10/kooday_diamond.gif">2nd December 2010</a></li>
</ul> <!-- end inner UL -->
<br class="clearFloat" />
<ul>
<li><a href="#">Kooday Payout</a>
<ul>
<li><a href="http://www.koodayexpress.co.uk/screenshots/30.12.10/kooday_payout.gif">30th December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/23.12.10/kooday_payout.gif">23rd December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/16.12.10/kooday_payout.gif">16th December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/9.12.10/kooday_payout.gif">9th December 2010</a></li>
<li><a href="http://www.koodayexpress.co.uk/screenshots/2.12.10/kooday_payout.gif">2nd December 2010</a></li>
</ul> <!-- end inner UL -->
</div> <!-- end navMenu -->
</div> <!-- end wrapper div -->
</div> <!-- end container div -->
<br><br><br><br><br><br>
<div>
<span style="font-style: italic;"></font></span><font size="2"><a href="http://www.kooday.com/refer.asp?ref=34683">Sign up here. Have Darren as your sponsor!</a></font><br />
<a href="http://www.facebook.com/profile.php?id=100000479093956"><img src="/images/facebook-small.jpg" </a> <a href="http://www.yournight.com/eboodcom"><img src="/images/yournight-small.jpg" </a>
</div>
</body>
</html>
Comment