How to position CSS drop down menu properly

Hi all I'm facing a problem in positioning a CSS drop down menu properly.

Here are the details:

Here are the screenshots:

Whenever I am hovering the mouse over link "Individual", the sub-menu of the Individual link is displaying beside it (as you can see in the screen shots). I want the sub-menu of the link "Individual" to display below the Individual link (as all normal websites have).

Here is my code:

Expand|Select|Wrap|Line Numbers

 
<style>

#navbar ul {

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

font-size: 130%;

text-align: center;

border-bottom:3px solid #fff;

background: #868749;

color: #000;

}

#navbar a {

float:left;

width:6em;

height:30px;

text-decoration:none;

color:#fff;

background:#868749;

padding:0.5em 0.6em;

border-right:1px solid #fff;

}

#navbar a:hover {

background:#5b662e;

color: #fff;

}

#navbar li {

display:inline;

}

#navbar li ul {

   display: none; 

   width: 5em;

   background-color: #69f;}

#navbar li:hover ul, #nav li.hover ul {

   display: block;

   position: absolute;

   margin: 0;

   padding: 0; }

#navbar li:hover li, #nav li.hover li {

   float: none; }

#navbar li:hover li a, #nav li.hover li a {

   background-color: #69f;

   border-bottom: 1px solid #fff;

   color: #000; }

#navbar li li a:hover {

   background-color: #8db3ff; }
 
</style>

</head>

<body>

<div id="navbar">

            <ul>

                  <li><a href="index.html"><font color="#FFFF66">Home</font></a></li>

                <li><a href="individual.php"><font color="#FFFF66">Individual</font></a>

                    <ul>

                    <li><a href="#"><font size="3">Resident</font></a></li>

                    <li><a href="#"><font size="3">International Student</font></a></li>

                    <li><a href="#"><font size="3">Employee</font></a></li></ul>

                 </li>

                  <li><a href="business.php"><font color="#FFFF66">Business</font></a></li>

                <li><a href="about.php"><font color="#FFFF66">About Us</font></a></li>

                  <li><a href="contact.html"><font color="#FFFF66">Contact Us</font></a></li>

                <li><a href="login.php"><font color="#33FF00" face="Verdana, Geneva, sans-serif" size="2"><i><b>Secure Login</b></i></font></a></li>

            </ul>

          </div>

Can someone please point me out what I doing wrong. I have wasted nearly 2 hours figuring out what the error is.

Thank you very much for looking.

Many thanks for your help.

Feb 7 '12 #1

Subscribe Post Reply

3810

Dormilich

8,658

Expert Mod 8TB

check the suckerfish dropdown. I think they use slightly different styles.

Feb 7 '12 #2

snath87

Thanks for your reply.

I have just figured out the error by myself.

Do you know any websites from where I can learn to create a "CSS Vertical Sub Drop Down Menu".

Thank you.

Feb 7 '12 #3

snath87

Thanks for giving the link, I have found out how to create "CSS Vertical Sub Drop Down Menu".

Thanks Again.

Feb 7 '12 #4

Dormilich

8,658

Expert Mod 8TB

you may also want to have a look at Eric Meyer's site.

Feb 7 '12 #5

snath87

thanks again Dormilich

Feb 7 '12 #6

by: Haines Brown | last post by:

I've implemented the horizontal drop down menu discussed recently in this newsgroup, and it works nicely under Galeon and Mozilla, but not IE 5.0. Here are the problems: Under IE 5.0, the...

HTML / CSS

Help with drop down menu

by: hemanth.singamsetty | last post by:

Hello there, I've a drop down menu (created using CSS & Javascript -- see code below). My problem is, whenever I click a link on the menu the new page replaces the current page (and the menu...

Javascript

dynamic drop-down menu

by: scaredemz | last post by:

hi, so i'm creating a dynamic drop-down menu. the menu and the text show up fine in IE but only the drop-down shows in Firefox without the menu text. Below is the fxn code. help pls. function...

Javascript

Drop Down Menu Problem

by: StevePBurgess | last post by:

Hi I am using a drop down menu adapted from the one in Stylin with CSS by Charles Wyke Smith. The CSS is below. It works perfectly in Internet Explorer (using the csshover behaviour file) but...

HTML / CSS

Drop Down Menu.

by: rsteph | last post by:

I have a javascript drop down menu that I borrowed from a website. It utilizes a little .css to help with formatting. The menu works great, and on all 3 of the browsers I'm concerned about; but I am...

Javascript

CSS Drop Down Menu in IE7

by: TycoonUK | last post by:

Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...

HTML / CSS

calling css 2-level drop down menu (DHTML issue)

by: Archanak | last post by:

Hi, I am using 2-level CSS Drop Down Menu in my perl/CGI program. here is the code. #!c:/perl/bin/perl.exe use CGI qw(:standard);

Javascript

CSS horizontal drop down menu

by: mjohnson0321 | last post by:

I am trying to incorporate a CSS drop-down menu into a site (suckerfish menu). The menu gets lost behind the content below it, but only on one of the drop downs (News). The error occurs on all of...

HTML / CSS

Drop-down menu works in IE but not Firefox, Safari, etc.

by: nfarrier | last post by:

I'm a school teacher trying to get a web page update working doing a drop-down menu. The code works at http://hms.sps.lane.edu but the update that uses more css, including "navigation body"...

HTML / CSS

Ul li drop down menu works in FF not quite in IE

by: buzzard724 | last post by:

Ul li drop down menu works in FF not quite in IE Thank you for looking at this. The page is generated dynamically by php, js and jquery. The drop down menu ul- reports-li - works fine in FF. In...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

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,...

General

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...

Windows Server

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...

Online Marketing

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...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

How to position CSS drop down menu properly

Similar topics