子菜单将主菜单项推到它旁边答案

【问题标题】：Sub menu pushing main menu item next to it子菜单将主菜单项推到它旁边
【发布时间】：2020-05-18 04:22:51
【问题描述】：

我在构建下拉子菜单时遇到了小问题，它的工作找到但问题是当我将鼠标悬停在主菜单部分的父项上时，子菜单将主菜单项推到它旁边，它也推背景-下面的颜色。我希望主菜单项和背景颜色保持在原来的位置而不被子菜单和主菜单下方显示的子菜单推动。所以如果有人解决了这个问题，我会很感激你们.这里是源代码看一下：-

<!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>

【问题讨论】：

标签： html css

【解决方案1】：

我对您的代码做了一些调整。 position CSS 属性设置元素在文档中的定位方式。使用此链接了解职位https://developer.mozilla.org/en-US/docs/Web/CSS/position。

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

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

 .navbar {
   background-color: #333;
   display: block;
   float: left;
   width: 100%;
 }


 .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;
 }

 .drop-container{
   position: relative;
 }
 .drop-list{
    position: absolute;
    top: 0;
    left: 0;
 }
</style>

</head>

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

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

   <div class="drop-course drop-container">
     <button class="course-btn">Courses</button>
     <div class="courses-list drop-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-course drop-container">
     <button class="course-btn">extra</button>
     <div class="courses-list drop-list">
       <a href="#">link1</a>
       <a href="#">link2</a>
     </div>
   </div>

 </div>
</div>

</body>

</html>

【讨论】：

谢谢 Vikas，我明白了。这是关于位置属性的。