Databases
StackOverflow2013
Postsdbo
POHow fix this menu bar to show the dropdown sub-menu?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow fix this menu bar to show the dropdown sub-menu?
    text
    copied!<p>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.</p> <p>The HTML code for this menu:</p> <pre><code>&lt;div class="topnav"&gt; &lt;ul class="menu" runat="server" &gt; &lt;li&gt;&lt;a href="Default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Services.aspx"&gt;Services&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Service #1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Service #2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Service #3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Items&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Item #1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Item #2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Item #3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_blank"&gt;Item #4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_blank""&gt;Item #5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_blank"&gt;Item #6&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Item #1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clr"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The css code for this menu is: </p> <pre><code>@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;} </code></pre> <p>JQuery code:</p> <pre><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 }); </code></pre> <p>Here is a snapshot for the menubar that I have: <img src="https://i.stack.imgur.com/JpM9M.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload