One of the CSS Firendly Control Adapter menu control problems

Trust me , I did everything I could do. I tried adding z-index values , isolating the menu, rebuilding a new version, adding/removing CSS rules, and experimenting with the sitemap file and I'm still running into this issue:

Everytime the mouse rolls over the drop down menu, the drop down menu disappears before anything can be selected. Here's the site I'm working on: http://websites.rapidts.com/nextlevelistest/

Here's the HTML:

<div id="navigation">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
                Orientation="Horizontal" StaticDisplayLevels="2">
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="False"
                runat="server" />
        </div>

Here's the web.sitemap file (it doesn't look like your standard sitemap file because the nodes had to be rearrange to accomdate the implementation of the CSS frinedly control adapters. Also , i have a feeling the problem resides in this file.):

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="#"  title="Home"  description="">

    <siteMapNode url="~/Default.aspx" title="Home" description="Homepage of NextLevel Information Solutions"></siteMapNode>

    <!--About Us Dropdown-->
    <siteMapNode url="" title="About Us"   description="">
      <siteMapNode url="~/AboutUs/ourhistory.aspx" title="Our History"   description=""/>
      <siteMapNode url="~/AboutUs/awards.aspx" title="Awards"   description=""/>
      <siteMapNode url="~/AboutUs/ourstaff.aspx"  title="Our Staff"   description=""/>
      <siteMapNode url="~/NewsLetters/NewsLetterJune09.aspx" title="NewsLetter"   description=""/>
    </siteMapNode>

    <!--Services Dropdown-->
    <siteMapNode url="~/Services.aspx" title="Services"  description="" >
      <siteMapNode url="~/Services/methodology.aspx" title="Implementation Methodology"  description=""/>
      <siteMapNode url="~/Services/training.aspx" title="Training"  description=""/>
      <siteMapNode url="~/Services/tailoredreporting.aspx" title="Tailored Reporting"  description="" />
      <siteMapNode url="~/services/support.aspx#header" title="Support"  description="" />
      <siteMapNode url="~/Services/customprogram.aspx" title="Custom Programming Solutions"  description=""/>
      <siteMapNode url="~/Services/workflow.aspx"  title="Workflow Analysis"  description=""/>
      <siteMapNode url="~/Services/clientcare.aspx" title="Client Care"  description=""/>
    </siteMapNode>
    
    <!--Products Dropdown-->
    <siteMapNode url="~/products.aspx" title="Products"  description="">
      <siteMapNode url="~/Products/accounting.aspx" title="Accounting"  description=""/>
      <siteMapNode url="~/Products/sagecrm.aspx" title="Customer Relationship Mgmt"  description=""/>
      <siteMapNode url="~/Products/ecommerce.aspx" title="eCommerce"  description="" />
      <siteMapNode url="~/Products/fixedassets.aspx" title="Fixed Assets"  description=""/>
      <siteMapNode url="~/Products/humanresourcemanagment.aspx" title="Human Resource Management"  description=""/>
      <siteMapNode url="~/Products/servicejob.aspx" title="Service & Job Cost"  description=""/>
      <siteMapNode url="~/Products/businessintelligence.aspx" title="Business Intelligence"  description="" />
      <siteMapNode url="~/Products/warehousesolutions.aspx" title="Document Imaging"  description=""/>
      <siteMapNode url="~/Products/manufacturingsol.aspx" title="Warehouse Solutions"  description="">
      <siteMapNode url="~/Products/ManufacturingSolutions/customconfig.aspx" title="Custom Configuration" tittle="" description=""/>
      </siteMapNode>
      <siteMapNode url="~/Products/pointofsale.aspx" title="Point of Sale"  description=""/>
      <siteMapNode url="~/Products/electronicinterchange.aspx" title="EDI"  description=""/>
      <siteMapNode url="~/Products/addsageapps.aspx"  title="Additional Sage Accpac Applications" description=""/>
    </siteMapNode>


    <!--Careers, Support, and Contact Links-->
    <siteMapNode url="careers.aspx" title="Careers"   description=""></siteMapNode>
    <siteMapNode url="~/services/support.aspx" title="Support"  description=""></siteMapNode>
    <siteMapNode url="~/Contact.aspx" title="Contact"  description=""></siteMapNode>
    <siteMapNode url="~/PressReleases/pressreleases.aspx#header" title="News & Events"  description="">
    <siteMapNode url="~/PressReleases/pressreleases.aspx" title="Press Releases"  description=""/>
    </siteMapNode>


  </siteMapNode>

</siteMap>

And here's the CSS:

#navigation
{
	margin-left: 13px;
	width: 838px;
	height: 30px;
	background-image: url(../images/navx.png);
	background-position: top left;
	background-repeat: repeat-x;	
}

/*

This file should contain SUPPLEMENTAL rules that are recognized and used only by IE.
Similar files can be produced, as needed, for other browsers.  Whatever selectors are
listed here should be listed in at least one other CSS file used in the current ASP.NET
theme (thus making these supplemental).  The implementation pattern is to add new props
to some existing rule or to override (using important) some property.

*/

ul.AspNet-Menu li
{
    float: left !important;
    height: 1% !important;

}



ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    height: 1% !important;
    color:#fff;
    font-weight:bold;
    font-size:13px;
    font:verdana, arial, sans-serif;
    padding:5px 10px 9px 10px;
    border-right:1px #2F455F solid;
}

ul ul a.AspNet-Menu-Link{width:275px; padding:5px 0 5px 5px;  border-bottom:1px #18314F solid;}
ul ul a:hover.AspNet-Menu-Link{width:275px;padding:5px 0 5px 5px;  background:#124273;color:#ccc;text-decoration:underline;}

ul.AspNet-Menu li a:hover
{
	color:#ccc; 
	position:relative;
    z-index:1000;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: left !important;
}

/* Undoing rules used for IE7 and other browsers. */

ul.AspNet-Menu ul
{
    visibility: visible !important;    
 
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: visible !important;  
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible !important;  
    background:#122742;
    color:#fff;   
    width:280px;
    display:block;

}



ul.AspNet-Menu li:hover ul ul{margin-left:280px;margin-top:-10px;}

Please let me know if i'm missing something. Any help will be appreciated :-)

Re: One of the CSS Firendly Control Adapter menu control problems

Did you ever find a solution to your issue? I'm running into a similar problem as I'm trying to implement a menu using the CSS Friendly Adapter. I've been searching and trying a ton of things so far and just haven't been able to come up with a solution.

Working with the information in your post, I can get to where you were and it works fine except in IE. After browsing your test site, I can see that you finally figured out a solution (at least it works in IE for me). I'm hoping you wouldn't mind sharing what you did to finally make it work.

Thanks for any help you can offer!