Click here to Skip to main content
14,695,431 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I used one of the CSS templates and the menu in it has no dropdown menu so I added the dropdown mene to it. The problem now is sometimes when I put the mouse over one of the tabs/options that has a dropdown menu (sub-menu), I cannot select anything from this dropdown menu because it is quickly disappeared and I don't know why this happened.

The HTML code for this menu:
<div class="topnav">
                <ul class="menu"  runat="server" >
                    <li><a href="Default.aspx">Home</a></li>
                    <li><a href="Services.aspx">Services</a>
                        <ul>
                            <li><a href="#">Service #1</a></li>
                            <li><a href="#">Service #2</a></li>
                            <li><a href="#">Service #3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Items</a>
                        <ul>
                            <li><a href="#">Item #1</a></li>
                            <li><a href="#">Item #2</a></li>
                            <li><a href="#">Item #3</a></li>
                            <li><a href="#" target="_blank">Item #4</a></li>
                            <li><a href="#" target="_blank"">Item #5</a></li>
                            <li><a href="#" target="_blank">Item #6</a></li>
                            <li><a href="#">Item #1</a></li>
                        </ul>
                    </li>

                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Help</a></li>

                </ul>
                <div class="clr"></div>
              </div>


The css code for this menu is:

@charset "utf-8";
    /* CSS Document */
    
    
    ul.menu li ul { font-family:"Liberation sans", Arial, Helvetica, sans-serif;}
    
    
    /* DESIGN TOPNAV (mainmenu) */
    .topnav { padding:0; margin:0; width:966px; height:53px; background: url(images/bg_menu.gif) top repeat-x; }
    
    
    /* level 0 */
    .topnav ul { padding:0; margin:0 30px 0 0; list-style:none; border:0; float: left; }
    .topnav ul li { float:left; margin:0; padding:0; border-right:1px solid #303030; border-left:1px solid #0a0a0a; }
    .topnav ul li a { float:left; margin:0 1px 0 0; padding:17px 30px; color:#fff; font:normal 14px Georgia, "Times New Roman", Times, serif; text-decoration:none; }
    .topnav ul li.current_page_item { }					/* active item first level */
    .topnav ul li.current_page_item a,
    .topnav ul li a.a_hover_main { color:#fff; background-color:#0f0f0f;}						/* on hover */
    
    
    /* level 1 */
    .topnav ul li ul { padding:0; top:52px; left:-2px; height:auto; color:#a8a7a7; background-color:#0f0f0f; border-bottom:none;}			/* position of submenu */
    .topnav ul li ul li { margin:0; padding:0; background:none; border-bottom:1px solid #010101;}
    
    /* for the next line: (.topnav ul li ul li a)
     * I changed:  
     * padding: 10px 24px and width: 49px
     * and I added: margin:0 1px 0 0
     */
    .topnav ul li ul li a { float:left; margin:0 1px 0 0; padding:17px 47px; width:54px; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#7f7f7f;}
    .topnav ul li ul li a.have_submenu { }																/* if item have submenu */
    .topnav ul li ul li a:hover,
    .topnav ul li ul li a.have_submenu_hover { color:#fff; background:none;}
    .topnav ul li ul li ul { padding:0; top:-1px; left:170px;}	/* position of submenu level 2 */
    
    .topnav * { z-index:1001;}
    
    /* DO NOT EDIT!!! */
    ul.menu { list-style:none;}
    ul.menu li { cursor:pointer; position:relative;}
    ul.menu li a { position:relative;}
    ul.menu li ul { display:none; position:absolute; list-style:none;}
    ul.menu li ul li ul { position:absolute; list-style:none;}



JQuery code:

jQuery(document).ready(function($){
    
        // menu smothness
        $('.menu li').click(function() {
          window.location = $(this).find('a:first').attr('href');
        });
        var dropdown_level = 0;
        $('.menu li ul').parent().find('a:first').addClass('have_submenu');
        $('.menu').children('li').children('a').addClass('top_level');
        $('.menu').children('li').children('a').removeClass('have_submenu');
        $('.menu li').hover(function(){
          if(dropdown_level == 0){
            $('.menu').find('a').removeClass('have_submenu_hover');
            $(this).addClass('li_hover_main');
            $(this).children('a').addClass('a_hover_main');
            $('.menu ul').parent().find('a:first').addClass('have_submenu');
            $('.menu').children('li').children('a').addClass('top_level');
            $('.menu').children('li').children('a').removeClass('have_submenu');
          }
          $(this).find('ul:first').stop(true,true).slideDown(200).show();
          $(this).find('a:first').addClass('have_submenu_hover');
          $('.menu').children('li').children('a').removeClass('have_submenu_hover');
          dropdown_level++;
        },function(){
          $(this).find('ul:first').stop(true,true).slideUp(0);
          $(this).find('a:first').removeClass('have_submenu_hover');
          dropdown_level--;
          if(dropdown_level == 0){
            $(this).removeClass('li_hover_main');
            $(this).children('a').removeClass('a_hover_main');
           }
        });
    	// END of menu smothness
      
    });
Posted

1 solution

Once i had the same problem.
I decreased the space between menu and sub menu so the problem solved.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900