Link to home
Start Free TrialLog in
Avatar of dwar08
dwar08Flag for United States of America

asked on

Java Web Site Menu Drop down list is transparent

I have a Java Drop down menu that I picked up to use for a web site.  I have some programming experience, but know little about Java.  The drop down menu in this example is transparent when it drops the menu items down, so that you can see what is on the page itself and interferes with the menu item.  If you hover over it it darkens up but I need to change it so that it is not transparent.  I'm not sure where to do this.  I am including the Java code and the code on the CSS style sheet.  

Also it might be a moot point because the drop down portion of the menu only works with Internet Explorer...  Using Chrome or Firefox when you hover over the drop down portion of the menu then move down to select one of the options, the drop down options disappear and will not let you select one of them at all.  I'm mentioning this because if this menu system is not going to work with Chrome or Firefox I'm going to need to change it to something that will work.

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 11px;
	width: 75px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

Open in new window

<!-- Begin Navigation -->
	<div id="navigation">
		
		<ul id="sddm">
		
		<li><a href="default.html">Home</a></li>
    	<li><a href="mission/mission.html">Our Mission</a></li>
    	<li><a href="/construction/construction.html">Programs</a></li>
		
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Services</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="/construction/construction.html">Service 1</a>
        <a href="/construction/construction.html">Service 2</a>
        <a href="/construction/construction.html">Service 3</a>
        <a href="/construction/construction.html">Service 4</a>
        <a href="/construction/construction.html">Service 5</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Careers</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="/construction/construction.html">Career 1</a>
        <a href="/construction/construction.html">Career 2</a>
        <a href="/construction/construction.html">Career 3</a>
        <a href="/construction/construction.html">Career 4</a>
        </div>
    </li>
    <li><a href="/construction/construction.html">Supplies</a></li>
    <li><a href="/construction/construction.html">Med Delivery</a></li>
    <li><a href="/construction/construction.html">Contact</a></li>
</ul>
		<p>
		
	<!-- Begin DropDown Menu Script -->
		
	<script type="text/javascript">
	var timeout	= 500;
	var closetimer	= 0;
	var ddmenuitem	= 0;
	// open hidden layer
	function mopen(id)
	{	
		// cancel close timer
		mcancelclosetime();
		// close old layer
		if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
		// get new layer and show it
		ddmenuitem = document.getElementById(id);
		ddmenuitem.style.visibility = 'visible';
	}
	// close showed layer
	function mclose()
	{
		if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
	}
	// go close timer
	function mclosetime()
	{
		closetimer = window.setTimeout(mclose, timeout);
	}
	// cancel close timer
	function mcancelclosetime()
	{
		if(closetimer)
		{
			window.clearTimeout(closetimer);
			closetimer = null;
		}
	}
	// close layer when click-out
	document.onclick = mclose; 
	</script>
	<!-- End DropDown Menu Script -->
	</p>		
	
	</div>
	<!-- End Navigation -->

Open in new window

Avatar of Samuel Liew
Samuel Liew
Flag of Australia image
Avatar of dwar08
dwar08
Flag of United States of America image

ASKER

must be somewhere else in my code then.....  Testing it here....  www.data-tex.com
Check and see if you can see what I'm seeing there...
thanks..
Avatar of Samuel Liew
Samuel Liew
Flag of Australia image
style3.css (line 202) shows that the background for the link is specified as none. It seems to be overriding other styles also defined for the links.

#sddm div a {
background:none repeat scroll 0 0 #EAEBD8;
color:#2875DE;
display:block;
font:11px arial;
margin:0;
padding:5px 10px;
position:relative;
text-align:left;
text-decoration:none;
white-space:nowrap;
width:auto;
}


style3.css (line 181) is being overridden by the above style. however, the background is also none.

#sddm li a {
background:none repeat scroll 0 0 #5970B2;
color:#FFFFFF;
display:block;
margin:0 1px 0 0;
padding:4px 11px;
text-align:center;
text-decoration:none;
width:75px;
}
Avatar of Samuel Liew
Samuel Liew
Flag of Australia image
The CSS styles in the external stylesheet is not properly nested. This is why the brower interprets everything as none.

Problem: (fix it)
#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

Open in new window

Avatar of Samuel Liew
Samuel Liew
Flag of Australia image
This fixed stylesheet should work for you
@import url(layout.css);

body {
   color: #000;
   font-size: 14px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: #abc;
   background-image: url('../images/clouds.jpg');
}

#container {
   background-color: #EAEBD8;
   width: 800px;
   margin: 0 auto;
   border-top: 0;
   border-right: 1px solid #b7b7b7;
   border-bottom: 0;
   border-left: 1px solid #b7b7b7;
   color: #000080;
}

#masthead {
   text-align: right;
   background-color: #ffffff;
   width: 800px;
}

#navigation {
   background-color: #545454;
   overflow: hidden;
}

#column_l {
   width: 450px;
   margin: 0;
   padding: 0 15px;
}

#column_r {
   width: 197px;
   margin: 0;
   float: right;
   padding: 4px;
   background-color: #a9a9a9;
   position: relative;
}

#footer {
   width: 800px;
   text-align: center;
   background-color: #113962;
   padding-top: 5px;
   padding-bottom: 5px;
}

/* Styles for Masthead */
#masthead img { float: left; }

#masthead p {
   color: #000088;
   font-size: 14px;
   text-align: right;
   margin: 10px 10px 0 10px;
}

#column_r p {
   font-size: 11px;
   margin: 7px;
}

/* Styles for Navigation */
#navigation ul {
   list-style-type: none;
   width: 100%;
   margin: 0;
   padding: 0;
}

#navigation li { float: left; }

#navigation a {
   color: #fff;
   text-decoration: none;
   display: block;
   padding: 5px;
   border: 1px solid #c9c9c9;
}

#navigation a:hover {
   color: #000;
   text-decoration: none;
   border: 1px solid #a9a9a9;
   background-color: #a9a9a9;
}

/* Styles for Content */
h1 {
   color: #000080;
   font-size: 2.0em;
}

h2 {
   color: #000080;
   font-size: 1.75em;
}

h3 {
   color: #000080;
   font-size: 1.5em;
}

h4 {
   color: #0033CC;
   font-size: 1.25em;
}

h5 {
   color: #000080;
   font-size: 0.75em;
}

h6 {
   color: #000080;
   font-size: 0.5em;
}

big {
   color: #000080;
   font-size: medium;
}

#column_r p {
   color: #000;
   font-size: x-small;
   text-align: left;
   margin: 0;
   padding: 5px;
}

#column_r h4 { margin-bottom: 0; }

#column_r ul {
   margin-left: 5px;
   padding-top: 0;
   padding-left: 10px;
}

#column_r ul li {
   font-size: x-small;
   display: list-item;
   list-style-position: outside;
}

/* Styles for Footer */
#footer p {
   font-size: 11px;
   line-height: 14px;
   color: #fff;
   margin: 1px;
   padding: 1px;
}

#footer a {
   color: #fff;
   text-decoration: underline;
}

#footer a:hover {
   color: #fff;
   text-decoration: none;
}

/* Styles for Links */
a {
   color: #036;
   text-decoration: underline;
}

a:hover {
   color: #808080;
   text-decoration: underline;
}

.style_bold { font-weight: bold; }

.style_italic { font-style: italic; }

#sddm {
   margin: 0;
   padding: 0;
   z-index: 30;
}

#sddm li {
   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   font: bold 11px arial;
}

#sddm li a {
   display: block;
   margin: 0 1px 0 0;
   padding: 4px 11px;
   width: 75px;
   background-color: #5970B2;
   color: #FFF;
   text-align: center;
   text-decoration: none;
}

#sddm li a:hover { background-color: #49A3FF; }

#sddm div {
   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   background-color: #EAEBD8;
   border: 1px solid #5970B2;
}

#sddm div a {
   position: relative;
   display: block;
   margin: 0;
   padding: 5px 10px;
   width: auto;
   white-space: nowrap;
   text-align: left;
   text-decoration: none;
   background-color: #EAEBD8;
   color: #2875DE;
   font: 11px arial;
}

#sddm div a:hover {
   background-color: #49A3FF;
   color: #FFF;
}

Open in new window

Avatar of dwar08
dwar08
Flag of United States of America image

ASKER

thanks for your input and help....
Having a little trouble publishing tonight, but i think I got the changes out there and it appears that there is no change....  I certainly could have screwed something up, but it looks like the new stylesheet didn't fix it....  
Avatar of nipunu
nipunu
I have saved your web page locally and tested, it is working fine in both IE and FF. IT only give this error in the server i think. Check on that
Avatar of dwar08
dwar08
Flag of United States of America image

ASKER

I published it today at another domain on a different server at a different hosting site.  It is doing the same thing there.  Actually, I can't get it to work correctly anywhere.  Even if I load it locally on my desktop or my laptop it will not display correctly.  I tried it on my Blackberry and a friends IPhone and the drop down menu's are transparent.  On the IPhone the drop down menu displays, but you cannot select any of the items in the drop down menu.  You click on it and nothing happens.  

I'm using MS Expression Web 3 to do it, but I'm only using the graphic I/F if I can't get something like I want it using HTML.  I am manually coding most of it and I am publishing it using FTP..  Is there anything quirky about MS Expression Web?
Thanks,
ASKER CERTIFIED SOLUTION
Avatar of Samuel Liew
Samuel Liew
Flag of Australia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dwar08
dwar08
Flag of United States of America image

ASKER

Thanks... I'll look into that when I get a chance....  I appreciate your help.....
Avatar of dwar08
dwar08
Flag of United States of America image

ASKER

Thanks... I decided to go the way you described...
Thanks for your help.....