下拉菜单显示问题
DropDown Menu Display Issue
我想在我的网站上做的是有以下代码显示，就像它的出现一样，但在菜单部分悬停时关闭菜单超时(在底部是有问题的代码)。
这是我没有遇到任何麻烦(但没有超时时悬停在菜单部分)实现的
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;
}
<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}
<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 -->
(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'});
});
我在哪里弄乱了代码，我该如何使它工作或如何修复它?
最后我只关闭了威胁，他们告诉了我很多我发错的东西，但仍然没有帮助。许多天过去了，我设法帮助别人和自己解决我们都有的问题，而我的小问题却没有人感兴趣……我建议社区和这个网站的管理员澄清自己如何提高为了得到这工作应该的方式,否则不要那么严厉的职位事情像我一样的人或改变网站的主题从"堆栈溢出是一个问答网站为专业人士和爱好者的程序员。"到"堆栈溢出是一个问答网站专业"既然你给一些简单的话题甚至没有一个线索。
真诚,马丁
注::我发这篇文章是为了让大家对网站的实际问题产生良知，以改进它，不是想让任何人生气。
相关文章：
- angular js密码强度显示问题
- JQuery上下文菜单显示/隐藏问题
- AngularJs基于角色的菜单显示安全问题
- ajax显示隐藏滚动到最重要的问题
- 如何解决youtube播放器没有显示全宽的问题&身高
- 在 AngularJS 中显示信息的标记存在问题
- 有问题的突出显示(悬停）一个系列，突出显示图表
- 挖空和显示模块模式的数据绑定问题
- 使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题
- 问题 - 在查询加载器 2 加载页面之前显示 1 秒的页面
- 显示脸书好友个人资料图片时出现问题
- 搜索输入问题显示滚动
- HTML:密码字段中的HTML5占位符属性问题 - 显示正常文本
- AngularJS+simpleCart问题显示购物车内容，直到添加项目
- 问题显示twitter状态/user_timeline MVC3.Net
- 通过jQuery将某些问题显示在html表单上
- 有问题显示数据到html表使用ajax和php
- 随机问题显示下载链接
- Chrome和谷歌网页字体的问题.显示来自Firefox的不同输出
- Ext js网格问题显示日期在safari
