我想在我的网站上做的是让以下代码像它的出现一样显示,但是当悬停在菜单部分时关闭菜单超时(底部是有问题的代码)。
这是我在没有任何麻烦的情况下实现的(但在将鼠标悬停在菜单部分时没有超时)
CSS:
.menu
{
list-style:none;
position:relative;
}
ul.menu ul
{
list-style:none;
display:none;
position:absolute; /* To be the position relative to <li> that contains the <ul> */
left:5em; /* So there is no overlaping over <li> */
top:-1em;
}
ul.menu li:hover > ul
{
display:block;
}
HTML:
<ul class="menu">
<li>Equipos
<ul>
<li>Masculinos
<ul>
<li><a href="#">Aguilas</a></li>
<li><a href="#">Cef 18</a></li>
<li><a href="#">Celtas</a></li>
<li><a href="#">Indios 1</a></li>
<li><a href="#">Indios 2</a></li>
<li><a href="#">Isotopos</a></li>
</ul>
</li>
<li>Femeninos
<ul>
<li><a href="#">Cef 18</a></li>
<li><a href="#">Celtas</a></li>
<li><a href="#">Facdef</a></li>
<li><a href="#">Indias</a></li>
<li><a href="#">Isotopos</a></li>
<li><a href="#">Parque Sur</a></li>
</ul>
</li>
</ul>
</li>
<li>Categorias
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</li>
<li>Torneos
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</li>
<li>Canchas
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</li>
<li>Resultados</li>
<li>Posiciones</li>
<li>Estadisticas</li>
<li>Boletines ATS</li>
<li>Arbitros y Designaciones</li>
</ul>
问题是:
CSS:
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto;}
#navigation_horiz ul {height:50px; display:block;background:blue}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
#navigation_horiz ul li #dropdown_style {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_style a {color:red}
HTML:
<div id="navigation_horiz">
<ul>
<li>
<a href="" class="navlink">Equipos</a>
<div class="dropdown" id="dropdown_style">
<a href="" class="navlink">Masculinos</a>
<div class="dropdown" id="dropdown_style">
<ul>
<li><a href="#">Aguilas</a></li>
<li><a href="#">Cef 18</a></li>
<li><a href="#">Celtas</a></li>
<li><a href="#">Indios 1</a></li>
<li><a href="#">Indios 2</a></li>
<li><a href="#">Isotopos</a></li>
</ul>
</div>
<a href="" class="navlink">Femeninos</a>
<div class="dropdown" id="dropdown_style">
<ul>
<li><a href="#">Cef 18</a></li>
<li><a href="#">Celtas</a></li>
<li><a href="#">Facdef</a></li>
<li><a href="#">Indias</a></li>
<li><a href="#">Isotopos</a></li>
<li><a href="#">Parque Sur</a></li>
</ul>
</div>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">Categorias</a>
<div class="dropdown" id="dropdown_style">
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">Torneos</a>
<div class="dropdown" id="dropdown_style">
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">Canchas</a>
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">Resultados</a>
</li>
<li>
<a href="" class="navlink">Posiciones</a>
</li>
<li>
<a href="" class="navlink">Estadisticas</a>
</li>
<li>
<a href="" class="navlink">Boletines</a>
</li>
<li>
<a href="" class="navlink">Arbitros y Designaciones</a>
</li>
</ul>
</div><!-- #navigation_horiz -->
JavaScript:
(function($)
{
$.fn.naviDropDown = function(options)
{
//set up default options
var defaults={
dropDownClass: 'dropdown', //the class name for your drop down
dropDownWidth: 'auto', //the default width of drop down elements
slideDownEasing: 'easeInOutCirc', //easing method for slideDown
slideUpEasing: 'easeInOutCirc', //easing method for slideUp
slideDownDuration: 500, //easing duration for slideDown
slideUpDuration: 1000, //easing duration for slideUp
orientation: 'vertical' //orientation - either 'horizontal' or 'vertical'
};
var opts = $.extend({}, defaults, options);
return this.each(function()
{
var $this = $(this);
$this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
if(opts.orientation == 'horizontal')
{
$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
}
if(opts.orientation == 'vertical')
{
$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
}
$this.find('ul').hoverIntent(function() {}, hideDropDown);
$this.find('li').hoverIntent(getDropDown, function() {});
});
var activeNav = null;
function getDropDown()
{
var newActiveNav = $(this);
if (activeNav && activeNav.get(0) !== newActiveNav.get(0))
{
hideDropDown();
}
if (!activeNav)
{
showDropDown(newActiveNav);
}
activeNav = newActiveNav;
}
function showDropDown(newActiveNav)
{ newActiveNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
}
function hideDropDown()
{
if (activeNav)
{ activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
activeNav = null;
}
}
};
})(jQuery);
$(document).ready(function()
{
$('#navigation_horiz').naviDropDown({dropDownWidth: '300px'});
});
我是不是弄乱了代码,我怎样才能让它工作或如何修复它?