需要 HTML、CSS、Jquery 帮助 [关闭]答案

【问题标题】：HTML, CSS, Jquery help needed [closed]需要 HTML、CSS、Jquery 帮助 [关闭]
【发布时间】：2013-09-15 03:16:18
【问题描述】：

嘿，在我的上一个主题中，我犯了一个错误，没有将 css 和 Jquery 放入其中。所以我在 CodePen 中添加了更多内容并构建了一个菜单。

现在我遇到的问题是它仍然不起作用。我搜索了但找不到它，所以我把它放在这里。

http://codepen.io/anon/pen/djwih

HTML 很好，但 css 却没有，我几乎可以肯定 jquery 很好。有人可以帮我检查一下并纠正我的错误吗？

在顶部，我在左侧有一个徽标，菜单必须在右侧。该菜单在正确的 html 中具有 1200 像素的宽度，并且是 margin:0 auto;。但是徽标与菜单的高度相同，所以这就是为什么我放了#menu ul float:right;。

提前感谢您的帮助！！

【问题讨论】：

请使用更具描述性的标题，将您的代码（不仅仅是链接）放在问题中，并清楚地解释问题。这就是你最后一个问题被关闭的原因。您应该编辑该问题，然后请求重新打开它。

标签： jquery html css menu submenu

【解决方案1】：

首先，你的 jQuery 中有几个错别字：

$function() { 
$(this).find('ul').fadeOut('fast');
}));;

从function前面删除$

function() {

并在)) 之间添加缺少的} 并删除额外的;

})});

接下来，我们应该使用 toplevel 类对顶级菜单项进行分类，并相应地调整 CSS/jQuery。

HTML：

<li class="toplevel"><a href="index.php">Home</a>
<li class="toplevel"><a href="#">Who are we</a>
<li class="toplevel"><a href="#">Contact</a></li>

此外，将子 ul 元素的 margin-left 设置为 -40px（用于间距）
CSS：

#menu li.toplevel {
display:inline-block;
padding:8px 12px;
list-style:none;
}

和

#menu ul li ul {
display:block; 
position:absolute;
margin-left:-40px;
}

jQuery:

$(document).ready(
function() {
    $('#menu ul li ul').hide();
    $('#menu ul li').hover( 
        function() {
            $(this).find('ul:first').fadeIn('slow');
        },
        function() { 
            $(this).find('ul').fadeOut('fast');
        }
    )
}
);

这是一个有效的 jsFiddle，您的代码已清理完毕： http://jsfiddle.net/9CBs2/1/

一切似乎都按照您的预期进行。确保确保您使用 JavaScript 调试器或工具来检查语法错误。

【讨论】：

非常感谢您的回答！这就是我要找的东西！