隐藏菜单将其旁边的主菜单项推入

由 发布于

我在构建下拉子菜单时遇到了一点问题，但它的工作是找到的，但是问题是，当我将鼠标悬停在主菜单部分的父项上时，子菜单将主菜单项推到了它旁边，并且还在下面推了背景色我希望主菜单项和背景色能保持其原始位置而不被子菜单推动，并且主菜单下的子菜单不会显示。因此，如果有人解决了这个问题，我将不胜感激。源代码看看：-

<!Doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Dropdown</title>
<style>
 body {
   margin: 0;
 }

 .navbar {
   overflow: hidden;
   background-color: #333;
 }


 .navbar-list a {
   float: left;
   padding: 14px 15px;
   text-decoration: none;
   color: #fff;
 }

 /* courses section*/
 .drop-course {
   float: left;
   margin: 14px 0 0 15px;
 }

 .course-btn {
   border: none;
   background-color: inherit;
   color: #fff;
   font-size: 17px;
 }

 .courses-list a {
   float: none;
   display: block;
   padding: 12px 16px;
   text-align: left;
 }

 .courses-list {
   display: none;
   margin-top: 20px;
   background-color: #333;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   color: #fff;
 }

 .drop-course:hover .courses-list {
   display: block;
 }

 /* extra section */
 .drop-extra {
   float: left;
   margin: 14px 0 0 15px;
 }

 .extra-btn {
   border: none;
   background-color: inherit;
   color: #fff;
   font-size: 17px;
 }

 .extra-content a {
   float: none;
   display: block;
   margn-top: 8px;
   padding: 5px;
 }

 .extra-content {
   display: none;
   background-color: inherit;
   color: #fff;
 }

 .drop-extra:hover .extra-content {
   display: block;
 }
</style>

</head>

<body>
<!--Navigation Section-->
<div class="navbar">

 <div class="navbar-list">
   <a href="#">Home</a>
   <a href="#">Notice</a>

   <div class="drop-course">
     <button class="course-btn">Courses</button>
     <div class="courses-list">
       <a href="#">Web Development</a>
       <a href="#">Android Development</a>
       <a href="#">ios Development</a>
     </div>
   </div>

   <a href="#">Admissions</a>

   <div class="drop-extra">
     <button class="extra-btn">extra</button>
     <div class="extra-content">
       <a href="#">link1</a>
       <a href="#">link2</a>
     </div>
   </div>

 </div>
</div>

</body>

</html>