PDA

View Full Version : Drop down menus disappearing in some browsers before clicking menu



petela
Feb 3rd, 2010, 11:50 PM
Hi,

I am building a website that requires drop down menus for proper navigation. The problem that I am having is that in testing the functionality in some browsers, I notice the menus are exposed, but then disappear once you try to navigate to one of the menu items. I am using IE 8 for my development and testing, and everything works great. Has anyone else encountered this problem?

Here is my CSS:


.DropDownMenu a:LINK , .DropDownMenu a:VISITED
{
background-color : #B5B5B5;
font-family : verdana;
font-size : 9pt;
font-weight : normal;
color : #313131;
text-decoration : none;
border-top : 1px solid #E7E7E7;
padding-left : 11px;
padding-right: 8px;
padding-top : 2px;
padding-bottom : 2px;
display: block;
z-index : 1000;
}


.DropDownMenu a:HOVER
{
background-color : #2C578F;
font-family : verdana;
font-size : 9pt;
font-weight : normal;
color : #EDEDED;
display: block;
z-index : 1000;
}


#ProductsMenu
{
position : absolute;
left : 73px;
top : 172px;
visibility : hidden;
z-index : 1000;
padding-bottom : 0px;
padding-top : 11px;
/* width: 140px; */
}


#MaintenanceMenu
{
position : absolute;
left : 321px;
top : 172px;
visibility : hidden;
z-index : 1000;
padding-bottom : 0px;
padding-top : 11px;
width: 160px;
}


#DealersMenu
{
position : absolute;
left : 430px;
top : 172px;
visibility : hidden;
z-index : 1000;
padding-bottom : 0px;
padding-top : 11px;
width: 130px;
}



Here is the html on the masterpage:




<!-- nav section -->
<div class="nav">
<ul>
<li><a href="~/home.aspx" runat="server">Home</a></li>
<li><a style="font-family:verdana; font-size:9pt; font-weight:normal; color:#D2E0EE; cursor: pointer;" runat="server" onmouseover="ShowDropdownMenu('ProductsMenu')" onmouseout="HideDropdownMenu('ProductsMenu')">Products</a></li>
<li><a href="~/parts.aspx" runat="server">Parts</a></li>
<li><a href="~/installation.aspx" runat="server">Installation</a></li>
<li><a style="font-family:verdana; font-size:9pt; font-weight:normal; color:#D2E0EE; cursor: pointer;" runat="server" onmouseover="ShowDropdownMenu('MaintenanceMenu')" onmouseout="HideDropdownMenu('MaintenanceMenu')">Maintenance</a></li>
<li><a style="font-family:verdana; font-size:9pt; font-weight:normal; color:#D2E0EE; cursor: pointer;" runat="server" onmouseover="ShowDropdownMenu('DealersMenu')" onmouseout="HideDropdownMenu('DealersMenu')">Dealers</a></li>
<li><a href="~/warranty.aspx" runat="server">Warranty</a></li>
<li><a href="~/feedback.aspx" runat="server">Feedback</a></li>
<li><a href="~/contact.aspx" runat="server">Contact</a></li>
</ul>
</div>




The actual dropdown menus are contained in a separate control. I can provide the code for that if necessary. Here is the link to the menus:
http://www.torridmarine.com

You may indeed get the menus to work properly. As I mentioned, the setup does not seem to work on all browsers. Any suggestions would be greatly appreciated.

Thanks,
petela

jenius
Feb 4th, 2010, 12:09 AM
Yeah, this works fine for me.

After looking into I fixes a little bit, I found that other people have used "display:block" and "float:left" to get these things to work. I'm not exactly sure which one or where you should put this in, since I don't have IE, it's an IE bug and makes no sense to me, and I can't test it since I don't have IE. But give those a shot and see if they help?

petela
Feb 4th, 2010, 04:34 PM
Thanks for the reply. Yeah, this remains a mystery to me. I have had other people check this in IE, and they also say it works fine.

petela
Feb 4th, 2010, 06:47 PM
After much research, I stumbled upon a solution to this problem. It is called the Holly Hack - I have no idea why it's referred to by that name. This is what it looks like:




/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



I placed the code in my style sheet, and everything came up smelling like roses.

petela

abduraooft
Feb 5th, 2010, 09:45 AM
After much research, I stumbled upon a solution to this problem. It is called the Holly Hack - I have no idea why it's referred to by that name. This is what it looks like:




/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



I placed the code in my style sheet, and everything came up smelling like roses.

petela
Read the details from http://www.satzansatz.de/cssd/onhavinglayout.html