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，你在错误的地方有一些样式，当你在第一个.drop_menu li:hover ul {上徘徊时，你也在扩大菜单的高度。

我还将<li>的排名从父.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; }的顶部更新为100％。

＆＃13;

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

＆＃13;

var CategoryLink = $(this).parent().first();

＆＃13;

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

1 个答案: