• Locked
No replies
Tue, 2009-08-18 12:42
summa
Offline
newbie
Last seen: 13 years 41 weeks ago
Joined: 2009-08-18
Posts: 1
Points: 0

Hi everyone,

I am having the hardest time controlling where my drop-downs show up! I have gone through the css and made changes but for some reason they don't seem to reflect. Could someone possibly see anything I am missing?

If you hover over the tabs "contact us" and "help desk" on the link below you will see what I mean.

http://krontechnology.com/dev/index_new.html

Here is the css for the dropdowns:

.chromestyle{
	font-weight: bold;
}
 
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
 
.chromestyle ul{
	border: 1px solid #BBB;
	width: 800px;
	margin: 0;
	text-align: center;
	padding-top: 16px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	background-color: #000000;
	height: 32px;
}
 
.chromestyle ul li{
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}
 
.chromestyle ul li a{
	color: #FFFFFF;
	margin: 0;
	text-decoration: none;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-top: 12px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666666;
}
 
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
}
 
/* ######### Style for Drop Down Menu ######### */
 
.dropmenudiv{
	position:absolute;
	border: 1px solid #BBB; /*THEME CHANGE HERE*/
	border-bottom-width: 0;
	font:normal 12px Verdana;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 150px;
	visibility: hidden;
}
 
 
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
 
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
 
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

Here is the html code for the page:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="images/chromestyle.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="chromejs/chrome.js"></script>
</head>
<div id="wrap">
<div id="header"></div>
<div id="flash">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="237" title="SAP Specialists">
    <param name="movie" value="SAP.swf" />
    <param name="quality" value="high" />
    <embed src="SAP.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="237"></embed>
  </object>
</div>
<div id="dropmenu">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">ABOUT US  </a></li>
<li><a href="#">THE TEAM </a></li>
<li><a href="#">POSITIONS</a></li>
<li><a href="#">QUICK FACTS </a></li>
<li><a href="#">TESTIMONIALS </a></li>	
<li><a href="#">PARTNERS </a></li>	
<li><a href="#" rel="dropmenu1">CONTACT US </a></li>	
<li><a href="#">CASE STUDIES </a></li>	
<li><a href="#" rel="dropmenu2">HELP DESK</a></li>
</ul>
</div>
 
<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Locations</a>
<a href="http://www.cssdrive.com">Register</a></div>
 
 
<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Collateral</a></div>
 
<!--3rd drop down menu -->
<script type="text/javascript">
 
cssdropdown.startchrome("chromemenu")
 
</script>
</div>
 
<div id="main"></div>
<div id="rr"><img src="images/RR-teaser.png" width="255" height="168" /></div>
<div id="testimonials"><img src="images/Testimonials-bknd.png" width="258" height="168" /></div>
<div id="dod"><img src="images/DoD-teaser.png" width="255" height="168" /></div>
<div id="footer">Copyright 
  2009 Kr&ouml;ntechnology.com &nbsp;I &nbsp;Contact Webmaster</div>
</div>
</body>
</html>

Any help would be greatly appreciated!!!!

Top
Tags: