我的下拉菜单项相互推动

Question

我正在尝试制作一个下拉菜单。我的问题是，某些下拉项比其父项更宽。这导致我的其他菜单项被取代。在这种情况下，将鼠标悬停在“练习区”之上将取代“关于”。

希望css大师可以帮助我。

谢谢，CPR

ul {
  padding: 0;
}

.main-nav>ul>li {
  display: inline-block;
  float: left;
  padding: 10px;
  position: relative;
}

.sub-menu li {
  display: none;
  position: relative;
  top: 0;
  left: 0;
}

.main-nav ul li:hover > ul.sub-menu li {
  display: block;
}

<div class='main-nav'>
  <ul>
    <li>Practice Areas
      <ul class='sub-menu'>
        <li>Consumer Bankruptcy</li>
        <li>Personal Injury</li>
      </ul>
    </li>
    <li>About
      <ul class='sub-menu'>
        <li>Meet us</li>
        <li>Testimonials</li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

我已添加

.sub-menu {
      position: absolute;      
    }

＆＃13;

＆＃13;

ul {
  padding: 0;
}

.main-nav>ul>li {
  display: inline-block;
  float: left;
  padding: 10px;
  position: relative;
}
.sub-menu {
  position: absolute;      
}
.sub-menu li {
  display: none;
  position: relative;
  top: 0;
  left: 0;
}

.main-nav ul li:hover > ul.sub-menu li {
  display: block;
}

＆＃13;

<div class='main-nav'>
  <ul>
    <li>Practice Areas
      <ul class='sub-menu'>
        <li>Consumer Bankruptcy</li>
        <li>Personal Injury</li>
      </ul>
    </li>
    <li>About
      <ul class='sub-menu'>
        <li>Meet us</li>
        <li>Testimonials</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要绝对定位子菜单....

＆＃13;

＆＃13;

ul {
  padding: 0;
}

.main-nav > ul > li {
  display: inline-block;
  float: left;
  padding: 10px;
  position: relative;
}

ul > li > ul  {
  position: absolute;}

.sub-menu li {
  display: none;
}

.main-nav ul li:hover > ul.sub-menu li {
  display: block;
}

＆＃13;

<div class='main-nav'>
  <ul>
    <li>Practice Areas
      <ul class='sub-menu'>
        <li>Consumer Bankruptcy</li>
        <li>Personal Injury</li>
      </ul>
    </li>
    <li>About
      <ul class='sub-menu'>
        <li>Meet us</li>
        <li>Testimonials</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以设置每个li项的宽度。我在30%的css中使用了.main-nav>ul>li。

.main-nav>ul>li {
  display: inline-block;
  float: left;
  padding: 10px;
  position: relative;
  width: 30%;             <===== added this
}

当然，如果导航栏中需要3个以上li个项目，那么这项功能将无法正常运行。我建议使用bootstrap。这是bootstrap navbar

＆＃13;

＆＃13;

ul {
  padding: 0;
}

.main-nav>ul>li {
  display: inline-block;
  float: left;
  padding: 10px;
  position: relative;
  width: 30%;
}

.sub-menu li {
  display: none;
  position: relative;
  top: 0;
  left: 0;
}

.main-nav ul li:hover > ul.sub-menu li {
  display: block;
}

＆＃13;

<div class='main-nav'>
  <ul>
    <li>Practice Areas
      <ul class='sub-menu'>
        <li>Consumer Bankruptcy</li>
        <li>Personal Injury</li>
      </ul>
    </li>
    <li>About
      <ul class='sub-menu'>
        <li>Meet us</li>
        <li>Testimonials</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;