Problem with drop down navigation menu

[liveshots]

Hi to all! I am new to the forum and just bought our business domain (www.liveshotsimaging.com). Im trying to fix a bug with our drop down navigation menu. My partner has done all the primary coding for the site and unfortunately he is out of the country on vacation for the week so I am unable to reach him, so I was left in charge. I have a decent understanding of HTML/CSS but am no expert.

Ok so heres the issue..If you go to the homepage (www.liveshotsimaging.com) the drop down navigation bar at the top works just fine. Now if you would click on the Sports link (http://www.liveshotsimaging.com/sports.html), the menu does not drop down.

I believe I have narrowed the issue down to this. The only time it doesnt work is when our thickbox.css file is attached to any of our pages.

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

When you click on any of the thumbnail images in our galleries, the thickbox style sheet makes the thumbnails popup bigger so you can see the pictures in bigger detail. (if you click on any in the sports page, you should be able to see what I am talking about)

So basically the drop down menu works fine on all the pages that we dont have the thickbox attached to. (which isnt too many) I am wondering if anyone can tell me how to fix this problem?

Below are the style sheet codes for liveshots and thickbox. Let me know if there is anything else I should post as Ill be checking here often throughout the day.

Thank you very much, I appreciate it! And sorry about the length of the post, i did not see an attach file option




LIVESHOTS.CSS

@charset "UTF-8";
/* CSS Document */

#homepage_container {

}
#container {
}
#header_background {
height: 150px;
background-image: url(images/backgroundtop.png);
background-position: right;
}
#logo {
background-image: url(images/logo_left.png);
float: left;
height: 150px;
width: 208px;
padding-left: 20px;
background-repeat: no-repeat;
background-position: right;
}
#menubar {
float: left;
height: 145px;
padding-left: 15px;
width: 780px;
}
#slideshow {
background-image: url(images/slideshowbackground.png);
background-repeat: repeat;
padding-top: 15px;
height: 425px;
}
#description {
background-image: url(images/a%20photo%20company.png);
height: 35px;
background-position: center;
}

#descriptiontop {
background-image: url(images/blanktop.png);
background-repeat: repeat-x;
height: 35px;
background-position: center;
}
#content_picture_containter {
width: 988px;
padding-right: 10px;
padding-left: 10px;
background-repeat: repeat-y;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
background-position: right;
}
#slideshow_content {
background-image: url(images/slideshowbackground.png);
height: 350px;
background-position: left;
}
#description_content {
background-image: url(images/blanktop1.png);
background-repeat: repeat-x;
height: 35px;
margin-top: 5px;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-size: x-large;
line-height: normal;
}
#content_container {
width: 1000px;
background-image: url(images/content_border_background.png);
background-repeat: repeat-y;
background-position: center;
}
#content_left {
float: left;
width: 750px;
padding-right: 10px;
padding-left: 20px;
}
#content_right {
float: right;
width: 210px;
margin-left: 10px;
margin-top: 15px;
}
#footer {
width: 988px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
overflow: hidden;
}
#homepage_content_container {
width: 988px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
overflow: hidden;
padding-top: 20px;
}
#homepage_left_column {
float: left;
width: 424px;
padding-right: 30px;
padding-left: 30px;
}
#homepage_right_column {
float: right;
width: 424px;
padding-right: 30px;
padding-left: 30px;
}

#homepage_bot_links_cont {
width: 988px;
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
}
#homepage_bottom {
width: 968px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
overflow: hidden;
}

#thumbnail-container {
width: 200px;
padding-left: 10px;
}

#homepage_bot_link1 {
float: left;
height: 200px;
width: 247px;
}
#homepage_bot_link2 {
float: left;
height: 200px;
width: 247px;
}
#homepage_bot_link3 {
float: left;
height: 200px;
width: 247px;
}
#homepage_bot_link4 {
float: right;
height: 200px;
width: 247px;
}




THICKBOX.CSS

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}

#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}

#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}

#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}

#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}

#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}

#TB_title{
background-color:#e8e8e8;
height:27px;
}

#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
padding:15px;
}

#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}

#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}

[liveshots]

The dropdown code:

FANCYDROPDOWN.CSS


/* hack reset (for production, use Yahoo! reset CSS)
*************************/

*
{
margin: 0;
padding: 0;
}

/* body
*************************/

body
{
font: 14px/21px Georgia, serif;
}

/* links
*************************/

a:link, a:visited, a:hover, a:active
{
text-decoration: none;
}

/* inline elements
*************************/

strong
{
font-weight: bold;
}

/* tabs
*************************/

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

/* dropdowns
*************************/

ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}

ul.dropdown ul.dropdown
{
top: 0;
left: 85%;
}

ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}

ul.dropdown li a
{
display: block;
}




/* menu-specifc
*************************/

#menu
{
position: relative;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 35px;
border-bottom: 1px solid #000;
padding-top: 115px;
background-image: url(images/topbg.gif);
background-repeat: repeat-x;
background-position: bottom;
}

#menu ul
{
margin: 0 auto;
}

#menu ul li.hasmore
{
background: url(images/drophighlight.png) no-repeat center 35px;
}

#menu ul li h4
{
margin: 0;
}

#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 30px;
}

#menu ul li a
{
color: #900;
padding-left: 4px;
}

#menu ul li a img
{
vertical-align: middle;
}

#menu ul li a:hover
{
background: url(images/topselectionleft.png) top left no-repeat;
}

#menu ul li a span
{
display: block;
padding: 0 15px 0 15px;
}

#menu ul li a:hover span
{
background: url(images/topselectionright.png) top right;
}

#menu ul.dropdown
{
padding: 10px;
background-image: url(images/dropdown.png);
border-bottom: 1px solid #dc902f;
width: 225px;
}

#menu ul.dropdown li a
{
border-bottom: 1px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
}

#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}

#menu ul.dropdown li a:hover
{
background: url(images/menuarrow.png) no-repeat left center;
}

#menu ul li h4 a:hover
{
background-image: none;
}

[sjlplat]

Things like this are usually associated with conflicting selectors in different stylesheets.

Try changing the load order of your stylesheet relationships. Load the thickbox stylesheet first, and any conflicts will be overwritten with the next loaded stylesheet.

Current order is:


<link href="liveshots.css" rel="stylesheet" type="text/css" />
<link href="fancydropdown.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />



Try something like this:


<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<link href="liveshots.css" rel="stylesheet" type="text/css" />
<link href="fancydropdown.css" rel="stylesheet" type="text/css" />

[liveshots]

after a little toying around, it totally fixed the problem! Glad it was an easy fix...

Thanks so much!! I really appreciate it!!