By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,693 Members | 1,671 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,693 IT Pros & Developers. It's quick & easy.

How to position CSS drop down menu properly

P: 4
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
  1. <style>
  2. #navbar ul {
  3. float:left;
  4. width:100%;
  5. padding:0;
  6. margin:0;
  7. list-style-type:none;
  8. font-size: 130%;
  9. text-align: center;
  10. border-bottom:3px solid #fff;
  11. background: #868749;
  12. color: #000;
  13. }
  14. #navbar a {
  15. float:left;
  16. width:6em;
  17. height:30px;
  18. text-decoration:none;
  19. color:#fff;
  20. background:#868749;
  21. padding:0.5em 0.6em;
  22. border-right:1px solid #fff;
  23. }
  24. #navbar a:hover {
  25. background:#5b662e;
  26. color: #fff;
  27. }
  28. #navbar li {
  29. display:inline;
  30. }
  31. #navbar li ul {
  32.    display: none; 
  33.    width: 5em;
  34.    background-color: #69f;}
  35. #navbar li:hover ul, #nav li.hover ul {
  36.    display: block;
  37.    position: absolute;
  38.    margin: 0;
  39.    padding: 0; }
  40. #navbar li:hover li, #nav li.hover li {
  41.    float: none; }
  42. #navbar li:hover li a, #nav li.hover li a {
  43.    background-color: #69f;
  44.    border-bottom: 1px solid #fff;
  45.    color: #000; }
  46. #navbar li li a:hover {
  47.    background-color: #8db3ff; }
  48.  
  49. </style>
  50. </head>
  51. <body>
  52. <div id="navbar">
  53.             <ul>
  54.                   <li><a href="index.html"><font color="#FFFF66">Home</font></a></li>
  55.                 <li><a href="individual.php"><font color="#FFFF66">Individual</font></a>
  56.                     <ul>
  57.                     <li><a href="#"><font size="3">Resident</font></a></li>
  58.                     <li><a href="#"><font size="3">International Student</font></a></li>
  59.                     <li><a href="#"><font size="3">Employee</font></a></li></ul>
  60.                  </li>
  61.                   <li><a href="business.php"><font color="#FFFF66">Business</font></a></li>
  62.                 <li><a href="about.php"><font color="#FFFF66">About Us</font></a></li>
  63.                   <li><a href="contact.html"><font color="#FFFF66">Contact Us</font></a></li>
  64.                 <li><a href="login.php"><font color="#33FF00" face="Verdana, Geneva, sans-serif" size="2"><i><b>Secure Login</b></i></font></a></li>
  65.             </ul>
  66.           </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
Share this Question
Share on Google+
5 Replies


Dormilich
Expert Mod 5K+
P: 8,639
check the suckerfish dropdown. I think they use slightly different styles.
Feb 7 '12 #2

P: 4
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

P: 4
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
Expert Mod 5K+
P: 8,639
you may also want to have a look at Eric Meyer's site.
Feb 7 '12 #5

P: 4
thanks again Dormilich
Feb 7 '12 #6

Post your reply

Sign in to post your reply or Sign up for a free account.