Hi fellas, I am working on client's website and I am having issues with the CSS navigation. I just have one drop in the menu for 'Professionals' but I am having issues with 'display' property. The issue is when I hover on the link the drop down appear but when I scroll down it disappears. Following is my HTML with CSS code. Any help would be appreciated. ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Site</title> <style type="text/css"> body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #FFFFFF;} #minMax {min-width:700px; max-width:800px; margin:0 auto; background:#ffffff;} #header {background: #FFFFFF; background-image: ; background-repeat: no-repeat; background-position: center; padding:40px 0;} #bar1{background: #E4AD2C; margin: 2px 0; padding:0 0;} #bar2{background: #19AEB4; margin: 2px 0; padding: 4px 0;} body{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;} #navigation {width:100%; background:#446E6D; padding: 12px 0; text-align:center;} #navigation ul {margin:0px; padding:0px;} #navigation ul li {display: inline; list-style: none; margin-left: 15px; margin-right: 15px; position:relative; height:30px;} #navigation li a {color:#fff; text-decoration:none;} #navigation li a:hover {color:#fff; text-decoration:underline;} #navigation li ul {margin:0px; padding:0px; display: none; position: absolute; left:0px; top:20px; background-color:#446E6D; } #navigation li:hover ul {display:block; width:170px;} #navigation li li {list-style:none; display:list-item;} #navigation li li a {color:#fff; text-decoration:none; display: block;} #navigation li li a:hover {color:#fff; text-decoration: underline;} #outer1 {padding-bottom:32767px; margin-bottom:-32767px;} #wrapper {overflow:hidden;} #footer {clear:both; background:#fff;} h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;} h3 {font-size:18px; margin:0; padding:8px 0; color: #446E6D} .content {padding:10px;} p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0; color: #400000;} #footer p, #header p {color:#000; font-size: 9px; text-align: center;} #footer a {color:#000;} #footer a:hover {text-decoration:none;} .style1 {color: #E4AD2C} .style2 {color: #19AEB4} .style3 {color: #400000} </style> </head> <body> <div id="minMax"> <div id="header"><div class="content"> </div> </div> <!-- end header --> <div id="navigation" align="justify"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="services.html">Our Services</a> </li> <li> <a href="professionals.html">Legal Professionals</a> <ul> <li><a href="test1.html">1</a></li> <li><a href="test2.html">2</a></li> <li><a href="test3.html">3</a></li> <li><a href="test4.html">4</a></li> </ul> </li> <li> <a href="letters.html">Advisory Letters</a> </li> <li> <a href="disclaimer.html">Disclaimer</a> </li> <li> <a href="contact.html">Contact Us</a> </li> </ul> </div> <div class="style1" id="bar1">1</div> <div class="style2" id="bar2">1</div> <div id="wrapper"> <div id="outer1"> <div class="content"> <h3>Our Philosophy</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <h3>Our Services</h3> <li class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li> <p align="center"> </p> <p align="center"><img src="ribbon.jpg" alt="ribbon" width="550" height="28" /></p> </div> <!-- end content --> </div> </div><!-- end #wrapper --> <div id="footer"> <p> <a href="index.html">Home</a> | <a href="services.html">Our Services</a> | <a href="professionals.html">Legal Professional</a> | <a href="letters.html">Advisory Letters</a> | <a href="disclaimer.html">Disclaimer</a> | <a href="contact.html">Contact Us</a></p> </div> </div> <!-- end footer --> </div> <!-- end wrapperA --> </div> </body> </html> ----------------------------------------------------
A quick fix is that : Replace : #navigation li ul {margin:0px; padding:0px; display: none; position: absolute; left:0px; top:20px; background-color:#446E6D; } Code (markup): With : #navigation li ul {margin:0px; padding:0px; display: none; position: absolute; left:0px; top:17px; background-color:#446E6D; } Code (markup): But your code have some errors. Remove the last two closed divs : </div> <!-- end wrapperA --> </div> Code (markup): Also add ul where you have li's.Don't add li's directly on div's. Replace <li class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li> Code (markup): With <ul><li class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li></ul> Code (markup): With those fixes your html is w3c valid. The css also have some errors/warnings, for example : #header {background: #FFFFFF; background-image: ; background-repeat: no-repeat; background-position: center; padding:40px 0;} Code (markup): Remove background-image: ; or add a url to one image that you want to use as background. Now the css have no errors anymore, only some warnings that are easy to be fixed.Check http://jigsaw.w3.org/css-validator/validator and try to validate your css.
Hey Thanks alot!!! ...so basically it was the TOP property. and thanks for pointing out the other things..I will take care of them.
Yeah the top property was the problem.I suggest you to test it on all major browsers as I tested it only in firefox.This value may be wrong for other browsers.To resolve this issue you can set the line-height of the links same as the height of the navigation bar.This will make the whole space clickable, not only the text link.