I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation menus. The main navigation menus appear to be fine, but when I hover over a menu that has a sub-menu, it causes the primary menus to shift down along with the dropdown menus. I've spent the whole day trying to fix this issue without success. I've experimented with different display properties such as inline, inline-block, and block, as well as different positioning settings, but nothing seems to work. I believe my HTML is correct, but there may be some errors in my CSS. Despite my efforts throughout the day, I am feeling exhausted and frustrated.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</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 © 2022 <a href = "https://www.mywebsite.com">My Website</a></p>
</div>
</body>
</html>
Here is my 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: serif;
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: serif;
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 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;
}
And here is my jQuery code:
var main = function() {
$(".servicesSubMenu").hide();
$("#services").hover(function() {
$(".servicesSubMenu").slideToggle(80);
$(".wordpressSubMenu").hide();
});
$("#wordpressWebDesign").hover(function() {
$(".wordpressSubMenu").slideToggle(80);
});
}
$(document).ready(main);
You can view my codes and the test page here. Please check both the full-screen and smaller screen layouts for different problematic displays. Any assistance would be greatly appreciated.
Thank you!