我刚刚在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上看到我的代码和测试页。请在全屏和小屏幕上都查看代码位。显示不同的有问题的布局。我真的很感谢您的帮助。
谢谢你。
我在您的网站上查看了您的代码。您尚未设置位置值。位置会更改显示位置，默认情况下，它设置为相对位置。通过将其更改为绝对值，该元素不会受到周围元素的影响。
在CSS文件中尝试此代码。
.servicesSubMenu {
font-family: seriff;
font-weight: bold;
color: #389803;
font-size: 17px;
margin-top: 10px;
position:absolute;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句