如何修复此菜单栏以显示下拉子菜单? [英] How fix this menu bar to show the dropdown sub-menu?
本文介绍了如何修复此菜单栏以显示下拉子菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用了CSS模板之一,并且其中的菜单没有下拉菜单,因此我向其中添加了下拉菜单.现在的问题有时是,当我将鼠标放在具有下拉菜单(子菜单)的选项卡/选项之一上时,我无法从此下拉菜单中选择任何内容,因为它很快消失了,我也不知道为什么发生了.
该菜单的HTML代码:
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>
此菜单的CSS代码为:
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代码:
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
});
推荐答案
){ // 菜单平滑度
){ // menu smothness
(.menu li').click(窗口.位置 =
('.menu li').click(function() { window.location =
(' ' href'); }); var dropdown_level = 0 ;
(this).find('a:first').attr('href'); }); var dropdown_level = 0;
这篇关于如何修复此菜单栏以显示下拉子菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文