As you will see, the photo banner uses a jquery plugin for the "slideshow" or photos fading in and out. I also used the simple jquery drop down menu that I found on this site (http://css-tricks.com/simple-jquery-dropdowns/). The drop down menu worked fine before adding the slide show banner, however now just part of the menu works. "Property & Casualty" and "Commercial" should have a dropdown menu like the "About" link, but for some reason, the dropdown doesn't work with the slide show.
Here is the html
<!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>The Thompson Agency | Insurance for Auto, Home or Business in Ft. Myers, Florida</title> <link href=\"oneColFixCtr.css\" rel=\"stylesheet\" type=\"text/css\" /> <script type=\"text/javascript\" src=\"js/jquery-1.3.1.min.js\"></script> <script type=\"text/javascript\" language=\"javascript\" src=\"js/jquery.dropdownPlain.js\"></script> <script type=\"text/javascript\" src=\"js/slideshow.js\"></script> <script type=\"text/javascript\"> $(document).ready(function() { $('#slideshow').slideshow({ timeout: 4000, type: 'sequence' }); }); </script> </head>
<body class=\"oneColFixCtr\"> <div id=\"main_wrapper\"> <div class=\"wrapper\"> <div id=\"header\"> <div id=\"logo\"><img src=\"images/TTA_logo.png\" width=\"223\" height=\"75\" alt=\"Thompson Agency logo\" /></div> <div id=\"tagline\"><p class=\"tagline\">Delivering peace of mind, one client at a time.</p> </div> <div id=\"address\"><p class=\"headeraddress\">4531 Deleon Street, Suite 207<br />Ft. Myers, Florida 33907<br />ph 239.278.5822 | fax 239.278.1074</p> </div> </div> <!-- end #header --> <div id=\"topnav\"> <ul class=\"dropdown\"> <li><a href=\"#\">Property & Casualty</a> <ul class=\"sub_menu\"> <li><a href=\"#\">Auto</a></li> <li><a href=\"#\">Homeowners</a></li> <li><a href=\"#\">Renters</a></li> <li><a href=\"#\">Flood</a></li> <li><a href=\"#\">Recreational Vehicles</a></li> <li><a href=\"#\">Personal Umbrella</a></li> </ul> </li> <li><a href=\"#\">Commercial</a> <ul class=\"sub_menu\"> <li><a href=\"#\">Auto</a></li> <li><a href=\"#\">Property</a></li> <li><a href=\"#\">Liability</a></li> </ul> </li> <li><a href=\"#\">Life & Retirement</a></li> <li><a href=\"#\">Health Insurance</a></li> <li><a href=\"#\">Location</a></li> <li><a href=\"#\">About Us</a> <ul class=\"sub_menu\"> <li><a href=\"#\">History</a></li> <li><a href=\"#\">Management</a></li> </ul> </li> <li><a href=\"#\">Contact Us</a></li> </ul> </div> <div id=\"photo_banner\"> <div id=\"slideshow\"> <img src=\"images/slide_1.jpg\" alt=\"Girl driver\" /> <img src=\"images/slide_2.jpg\" alt=\"Couple in front of house\"/> <img src=\"images/slide_3.jpg\" alt=\"Business man driver\"/> <img src=\"images/slide_4.jpg\" alt=\"Grandparents with grand daughter in Marina\"/> </div> <div id=\"quote\"><img src=\"images/clickhere_button.png\" alt=\"click here button\" /> </div> </div> <!-- end #photo_banner -->
I'm thinking that the slideshow is somehow interfering with the drop down menu because of the relative and absolute positioning on the #slideshow and #slideshow img and the menu uls also use relative and absolute positioning but I don't know how to fix it.???
As you will see, the photo banner uses a jquery plugin for the "slideshow" or photos fading in and out. I also used the simple jquery drop down menu that I found on this site (http://css-tricks.com/simple-jquery-dropdowns/). The drop down menu worked fine before adding the slide show banner, however now just part of the menu works. "Property & Casualty" and "Commercial" should have a dropdown menu like the "About" link, but for some reason, the dropdown doesn't work with the slide show.
Here is the html
And the CSS
I'm thinking that the slideshow is somehow interfering with the drop down menu because of the relative and absolute positioning on the #slideshow and #slideshow img and the menu uls also use relative and absolute positioning but I don't know how to fix it.???
Please help!