当下拉菜单出现时，CSS下拉菜单展开整个导航栏

Question

我正尝试创建一个纯CSS下拉菜单。除了当我悬停放下菜单时，一切工作正常，整个导航栏也得到扩展，我不希望它做到这一点。这里是我的代码：

.nav-bar { 
    list-style:none; 
} 

#right { 
    padding-right: 100px; 
} 

#right li { 
    display: inline; 
    float: right; 
    padding: 3% 0 0.5% 0; 
    margin-top: -30px; 
} 

#right li img { 
    max-width: 70%; 
    max-height: auto; 
} 

@media screen and (max-width: 1000px) { 
    #right { 
    display: none; 
    } 
} 

#nav-refer { 
    padding: 5% 15% 5% 15%; 
    border-radius: 25px; 
    background: #FFC52D; 
    font-family: 'Bebas Neue Bold'; 
    font-size: 22px; 
    text-align: center; 
    color: black; 
    text-decoration: none; 
} 


@media (max-width: 1000px) { 
    #nav-refer { 
    display: none; 
    } 
} 

#left { 
    padding-left: 100px; 
} 

#left li { 
    display: inline; 
    float: left; 
    display: block; 
    margin: -5px 0 0 -30px; 
} 

#left li img { 
    padding: 0 0 0 15px; 
} 

.drop_menu { 
    background: white; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    /*height: 30px;*/ 
    } 

.drop_menu li { 
    float:left; 
} 

     .drop_menu li a { 
      padding:9px 20px; 
      display:block; 
      color: black; 
      text-decoration:none; 
      font-family: 'Bebas Neue Regular'; 
      font-size: 22px; 
     } 

     .drop_menu li a img { 
      width: 60%; 
      height: auto; 
      padding: 0px; 
     } 

      /* Submenu */ 
     .drop_menu ul { 
      position: absolute; 
      left:-9999px; 
      top:-9999px; 
      list-style-type: none; 
     } 

     .drop_menu:hover { 
      display:block; 
      height: 110px; 

     } 

     .drop_menu li:hover { 
      position:relative; 
      height: 30px; 
     } 

     .drop_menu li:hover ul { 
      left:70px; 
      top:50px; 
      background: white; 
      padding:0px; 
     } 

     .drop_menu li:hover ul li a { 
      padding:10px; 
      display:block; 
      width:168px; 
      text-indent:15px; 
      background-color: white; 
     } 

     .drop_menu li:hover ul li a:hover { 
      background: #E6E6E6; 
      padding: 5px; 
     } 

     @media (max-width: 1000px) { 
      #left { 
       display: none; 
      } 
     } 

    <div class="nav-bar"> 
     <ul id="left"> 
      <ul class="drop_menu"> 
       <li><a href="#"><img src={{asset('images/hamburger2.png')}}></a> 
        <ul> 
         <li><a href="#about">ABOUT</a></li> 
         <li><a href="#testimonials">TESTIMONIALS</a></li> 
         <li><a href="#refer">REFER-A-FRIEND</a></li> 
         <li><a href="#contact">CONTACT</a></li> 
        </ul> 
       </li> 
      </ul> 

      <li><img src={{asset('images/shine2_logo.png')}}></li> 
     </ul> 

     <ul id="right"> 
      <li><a href="#refer" id="nav-refer">REFER FRIENDS</a></li> 
      <li><a href="https://twitter.com/ShineText" target="_blank"><img src={{asset('images/twitter_Icon.png')}}></a></li> 
      <li><a href="https://instagram.com/ShineText" target="_blank"><img src={{asset('images/instagram_Icon.png')}}></a></li> 
      <li><a href="https://www.facebook.com/Shine-Text" target="_blank"><img src={{asset('images/facebook_Icon.png')}}></a></li> 
     </ul> 
    </div> 

Answer 1

伊夫更新你的CSS，你就错了地方的一些款式，你也扩大了菜单的高度，当你徘徊在第一<li>。

我还将.drop_menu li:hover ul {的位置更新为父母<li>的顶部100％。

.clearfix:before, 
 
.clearfix:after{ 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.drop_menu { 
 
    background: white; 
 
    padding:0; 
 
    margin:0; 
 
    list-style-type:none; 
 
    background: green; 
 
} 
 

 
.drop_menu > li { 
 
    float:left; 
 
    position:relative; 
 
} 
 

 
.drop_menu li a { 
 
    padding:9px 20px; 
 
    display:block; 
 
    color: black; 
 
    text-decoration:none; 
 
    font-family: 'Bebas Neue Regular'; 
 
    font-size: 22px; 
 
} 
 

 
.drop_menu li a img { 
 
    width: 60%; 
 
    height: auto; 
 
    padding: 0px; 
 
} 
 

 
/* Submenu */ 
 
.drop_menu ul { 
 
    position: absolute; 
 
    left:-9999px; 
 
    top:-9999px; 
 
    list-style-type: none; 
 
} 
 

 
.drop_menu:hover { 
 
    display:block; 
 
    /* height: 110px; */ 
 
} 
 

 

 
.drop_menu li:hover ul { 
 
    left:70px; 
 
    top: 100%; 
 
    background: white; 
 
    padding:0px; 
 
} 
 

 
.drop_menu li:hover ul li a { 
 
    padding:10px; 
 
    display:block; 
 
    width:168px; 
 
    text-indent:15px; 
 
    background-color: white; 
 
} 
 

 
.drop_menu li:hover ul li a:hover { 
 
    background: #E6E6E6; 
 
    padding: 5px; 
 
}

<ul class="drop_menu clearfix"> 
 
    <li><a href="#">hamburger</a> 
 
     <ul> 
 
      <li><a href="#about">ABOUT</a></li> 
 
      <li><a href="#testimonials">TESTIMONIALS</a></li> 
 
      <li><a href="#refer">REFER-A-FRIEND</a></li> 
 
      <li><a href="#contact">CONTACT</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>