CSS Float left not working on dropdown menu bar

3 New Member

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

Expand|Select|Wrap|Line Numbers

 @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)

Expand|Select|Wrap|Line Numbers

  <!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 &amp; Updates</a></li>

<li> <a href="/events.html">Events</a></li>

<li> <a href="/resources--links.html">Resources &amp; 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>    &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;  <a href="http://www.yournight.com/eboodcom"><img src="/images/yournight-small.jpg" </a>

</div>
 
</body>

</html>

thanks in advance

Jan 4 '11 #1

Subscribe Reply

5400

Darren Laverick

New Member

thanks, i am new to this.

can you help at all?

Jan 4 '11 #2

JKing

1,206

Recognized Expert Top Contributor

The only float left I see is on the #leftNav and it is outside of the container and it appears on the leftside of the screen.

The html has many problems regarding the proper nesting and closing of elements.

Jan 4 '11 #3

Darren Laverick

New Member

Hi

The float left command is in the wrapper div.

Any suggestions on new code to use would be appreciated

Once sorted, I can implement changes onto my website.

Many Thanks
Darren

Jan 5 '11 #4

Similar topics

1593

Colour-by-ULR dropdown menu modifier

by: michael | last post by:

How may the following script be modified to function with the list structure below it? In short: it is meant to apply a background style to groups of LI's and ULs depeding on the URL filename. <style> ..high {background-color: #99FFCC;} ..low {background-color: #33CC00;} </style>

Javascript

1286

dropdown menu...can this be done?

by: kinane3 | last post by:

Mostly I need to figure if I'm wasting my time or if there is a way to do what I am trying to do. I am an intermediate to CSS at best so please don't flame me, just trying to do my job here. I came across this article when I searched for a CSS solution to long winded DHTML dropdown menus. http://www.alistapart.com/articles/dropdowns/ I did get it to work but here's my problem. What I "did" get to work was a horizontal drop in a...

HTML / CSS

6618

horizontal dropdown menu using html and css

by: camphor | last post by:

hi, I have a single column webpage with a horizontal dropdown menu and am trying to make the nav bar fit across the page, the column is 800px, it looks ok in dreamweaver 8 but when I test it in firefox, the nav bar which is a horizontal blue stripe with the links written inside it doesn't stretch the whole 800px, also how would you align the words in the submenu to the main menu, currently the submenus are centered html <body> <div...

HTML / CSS

2339

Firefox issue - css dropdown menu

by: adz1809 | last post by:

I have created this horizontal dropdown menu in css which is working fine in IE6+ but isn't firefox, and I have no idea why. here is the code: HTML: <body id="our-travels" class="home"> <div id="header"> <h1>Header</h1>

Javascript

2331

Dropdown Menu

by: awreese | last post by:

I've created a series of dropdown menus that work fine in Firefox, Safari, Camino, etc. but will not work at all in Windows IE. I'm presenting the whole file here hoping someone will come up with an answer. I've worked on this for days. Help will be appreciated. The website is: www.457thbombgroup.org/indexRR.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html>

HTML / CSS

3695

Problem with CSS Horizontal Dropdown Menu

by: Jim | last post by:

Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the code for this from a tutorial but that menu was flush-left justified. Not what I want. Subsequent searches on google on how to center yielded a

HTML / CSS

2945

Safari CSS Dropdown menu problem

by: drowe | last post by:

I have changed my menus to be pure CSS and works fine in all browsers except Safari. The menus display but the second level drop downs dont work. The CSS is: /* CSS for top level bar menu */ div#sitenav { background-image: url('background_light.gif'); } div#sitenav li:hover ul { display: block;

HTML / CSS

7383

Multicolumn Dropdown Menu - Error in IE

by: tceramesh | last post by:

Hi Friends, I Created one drop down menu by using CSS. It is perfect in Firefox but in IE it creates some problem. in the header section the drop down menu appear,, below that i used one table to put one list menu box.. The problem is, when we mouse over the drop down menu , list box appears in front of the drop down area.. how can i tackle this . The Error occurs only in IE not in Firefox. Here the Code : For...

HTML / CSS

3751

Ul Li base dropdown menu is abnormally behave in IE

by: neovantage | last post by:

Hey all, I have integrated UL, Li base dropdown menu but it is bevaing abnormal in IE. Can somebody have a look on my code and help me out to fix the problem. Here is the Link of my website. *Note: It is working fine in Safari and Firefox Mozilla but creating problem in IE And here is the HTML code. <span class="preload1"></span> <span class="preload2"></span>

HTML / CSS

9669

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9515

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10207

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10154

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

7537

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6776

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4109

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3713

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2913

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General