asp.net - 使用 HoverMenuExtender 闪烁菜单项

Question

我有一个面板，其中添加了一个 HoverMenuExtender，以便生成一种下拉菜单，我的问题是，当页面加载时，您可以瞥见菜单中的链接。

关于在加载页面时克服菜单项闪烁的任何提示？

<!--Hover-menu-1 -->
<div id ="hoverMenu1">


   <div id="Trigger1" class="Trigger" runat="server" >
   <asp:Hyperlink id="btnproduct" runat="server" NavigateUrl="~/Default.aspx" title="Home" onfocus="this.blur();">Home...</asp:Hyperlink>&nbsp;&nbsp;


<asp:Image ID="Image1" runat="server" 
        ImageUrl="~/ExpandingPanel/expand2.jpg" 
        ToolTip="Menu..." 
           style="position: relative; top: 2px; left: 0px" /></div>

  <asp:Panel ID="Panelpopup" runat="server" CssClass="invis_panel">
  <!-- css invis_panel by default - to stop it flashing/showing on page load -->

  <div id="Menu_items">
  <asp:Hyperlink id="to_Speach" class="Format4_menu_items" runat="server" NavigateUrl="~/Speach.aspx" title="Speach" onfocus="this.blur();">Speach</asp:Hyperlink>

   <asp:Hyperlink id="to_AutoGallery" class="Format4_menu_items" runat="server" NavigateUrl="Auto_Gallery.aspx" title="Auto Gallery" onfocus="this.blur();">Gallery</asp:Hyperlink>

  <asp:Hyperlink id="to_FileListings" class="Format4_menu_items" runat="server" NavigateUrl="File_listings.aspx" title="Search" onfocus="this.blur();">Search</asp:Hyperlink>

  <asp:Hyperlink id="to_ContactUs" class="Format4_menu_items" runat="server" NavigateUrl="Contact_Us.aspx" title="Contact Us" onfocus="this.blur();">Contact Us</asp:Hyperlink>

  <asp:Hyperlink id="to_Links" class="Format4_menu_items" runat="server" NavigateUrl="Links_Resources.aspx" title="Links & Resources" onfocus="this.blur();">Links & Resources</asp:Hyperlink>


     </div>

    <div><asp:Image ID="Bottom_of_Menu"  runat="server" ImageUrl="~/new_dropdowns/bottom.png" /></div>   
</asp:Panel>


  <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
TargetControlID="Trigger1"
PopupControlID="Panelpopup"
PopupPosition="Bottom" OffsetX="11" PopDelay="35"
>
  </cc1:HoverMenuExtender>


  </div> <!-- end of Hover-menu-1 -->

=================================CSS ============= ===========

    #hoverMenu1
    {
        z-index: 10;
        left: 693px;
        top: 11px;
        position: absolute;
        height: 100px;
        width: 175px; 
    }

     #hoverMenu1 a
    {
       font-weight:lighter;
       text-decoration: none;
    }

    .Trigger
    { 
   background-image: url('./new_dropdowns/top_3.png');
   background-repeat:no-repeat;
   padding: 7px 0 7px 0;
   width: 145px;
   text-align: center;
    }

 #Menu_items{
 background-image: url('./new_dropdowns/filler.png');
 background-repeat: repeat-y;
 }

 #Menu_items a {
 font-weight:lighter;
 text-decoration: none;
 }

 #Menu_items a:hover {
 background: url(./new_dropdowns/hover_filler.png) 0 -32px;
 }

     .invis_panel{
 height: 0px;
 overflow: hidden;
     } 

     .show_panel{
 height: 150px;
 overflow: visible;
     }

 .Format4_menu_items {
 display: block;
 padding: 0 10px 4px 10px;
 }

那么，我又该如何/应该如何显示默认隐藏的菜单 (invis_panel)？

我知道可以从代码隐藏中使用类似 Panelpopup.CssClass = "show_panel" 的东西，但我想在页面加载后触发它(这样就不会发生闪光灯)- javascript 或计时器可能会有所帮助 - 但我想知道其他方法并试图让事情变得简单。

寻找一个悬停在触发器上的按钮 - 可能是一些 css/js - 以显示面板或切换 cssclass。

Answer 1

将两个按钮状态合并到一个图像中，并通过更改背景位置将其上下移动。我认为这可能会解决您的问题。