【发布时间】：2015-04-17 13:56:04
【问题描述】：
我刚刚在 codecademy 上完成了 HTML/CSS、JavaScript、jQuery 和 php 的基础知识。 我正在尝试在 codecademy 代码位中使用 html/css 和 jquery 创建一个网站。现在我的导航菜单表现得很奇怪。 主导航菜单（主要）似乎没问题。但是，当将鼠标悬停在具有子菜单的菜单之一上时，主菜单会与下拉菜单一起下降。 我一整天都在尝试解决它，但无济于事:( 我试过 display: inline, display: inline-block, display: block 但它们没有帮助。 我也尝试过将 position: 设置为不同的设置，但它们也无济于事。 我的 html 对我来说似乎没问题，但也许有一些错误。我怀疑我的css，但是在尝试了一整天之后，我已经筋疲力尽了:(
我的 html 脚本：
<!DOCTYPE html>
<html>
<head>
<title>A first complete project</title>
<link type = "text/css" rel = "stylesheet" href = "style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type = "text/javascript" src = "script.js"></script>
</head>
<body>
<div class = "header"> <!--Header Area -->
<ul class = "mainMenu"> <!-- The main nav menu -->
<li><a href = "#">Home</a></li>
<li>About Us</li>
<li>Contact Us</li>
<li id = "services">Services
<!--Creating sub menu-->
<ul class = "servicesSubMenu">
<li>Basic Web Design</li>
<li>Pro Web Design</li>
<li>Advanced Web Design</li>
<li id = "wordpressWebDesign">Wordpress Web
Design
<!--Creating Sub-sub menu-->
<ul class = "wordpressSubMenu">
<li>Wordpress Installation</li>
<li>Wordpress customization</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--creating div class wrapper for sliderArea-->
<div class = "wrapper">
<div class = "slideArea"> <!--Creating the slider-->
</div>
</div>
<!--Creating the main footer-->
<div id = "mainFooter">
<p>Copyright © 2014 <a href = "https://www.hostbarrack.com">Hostbarrack</a></p>
</div>
</body>
</html>
我的 CSS：
/* ==== Settings for the main body
================================================= */
body {
background-color: #454545;
}
/*====== Settings for the main nav menu
================================================== */
.mainMenu {
border-radius: 10px;
background-color: #555555;
font-family: seriff;
font-weight: bold;
color: #389803;
font-size: 17px;
height: 50px;
line-height: 30px;
padding-right: 80px;
}
.mainMenu li {
position: relative;
display: inline-block;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
padding: 0 20px;
}
.mainMenu a {
text-decoration: none;
display: block;
color: #389803;
height: 40px;
}
/* === Settings for the sub menu of the 'Services' Button
===================================================== */
.servicesSubMenu {
font-family: seriff;
font-weight: bold;
color: #389803;
font-size: 17px;
margin-top: 10px;
}
.servicesSubmenu li {
border: 1px solid red;
border-radius: 8px;
list-style: none;
background-color: #454545;
height: auto;
width: 200px;
padding: 10px;
margin: 1px;
display: block;
}
/* === =Settings for the sub menu of 'Wordpress Web design' which is a sub menu of 'Services'
=========================================================*/
.wordpressSubMenu li {
background-color: #606060;
}
/* ======== Settings for the slider area of home-page.
==================================================== */
.slideArea {
border-radius: 15px;
background-color: #909090;
height: 500px;
width: auto;
margin: 10px, 10px, 10px, 10px;
}
/* === Settings for the main footer area
==================================================== */
#mainFooter {
text-align: center;
font-weight: bold;
}
#mainFooter a {
color: #FEFE79;
/*does not work. check it again and remove this comment after finding the solution*/
}
我的 jQuery 代码：
var main = function() {
$(".servicesSubMenu").hide(); /* Hide sub menu when document
loads */
/* When hovering over 'Services' button in main nav menu */
$("#services").hover(function() {
$(".servicesSubMenu").slideToggle(80);
$(".wordpressSubMenu").hide(); /* Hide sub-sub menu */
});
/* When hovering over sub-sub menu 'Wordpress Web Design'
inside 'Services button. */
$("#wordpressWebDesign").hover(function() {
$(".wordpressSubMenu").slideToggle(80);
});
}
$(document).ready(main);
您还可以在http://www.codecademy.com/sunoy14/codebits/r316c 上查看我的代码和测试页面 请在全屏和小屏幕中查看代码位。显示不同的有问题的布局。 非常感谢您的帮助。
谢谢。
【问题讨论】：
-
请始终在此站点上添加您的代码，并在此处添加您收到的错误消息。欢迎提供指向您的问题示例的外部链接，但不可靠，因为它们可能会在一段时间后变得不可用。
-
我现在已经添加了代码。我担心代码会使我的帖子太长，所以我在发布线程时没有添加它。
-
嗨。在看到 Persijin 的帖子后，我刚刚尝试添加代码 sn-p。但我无法将其添加到我的帖子中。当我单击插入发布时，没有任何反应。有人可以帮我弄这个吗？谢谢。