子菜单与顶部菜单具有相同的宽度

Question

我有以下菜单，但我不能按照我的意愿行事。

当您将鼠标悬停在显示子项的菜单项上时，该部分就可以了。但是当我悬停时，我希望“蓝色”菜单的宽度与整个红色相同，蓝色文字显示我从左侧开始固定。'

任何人都可以帮助我前进，一直试图创造一个小时。

谢谢

ul.nav {
  list-style: none;
}

ul.nav>li {
  float: left;
}

ul.nav>li>a {
  color: white;
  padding:20px;
  background-color: red;
}

ul.nav>li>ul {
  list-style: none;
  display: none;
  background-color: blue;
  margin-top: 20px;
}
ul.nav>li>ul>li>{
  display:block;
}

ul.nav>li>ul>li>a {
  color: white;
}

ul.nav>li>a:hover~ul {
  display: block
}

<ul class="nav">
  <li>
    <a href="#">Menu 1.0</a>
    <ul>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2.0</a>
    <ul>
      <li>
        <a href="#">Menu 2.1</a>
      </li>
      <li>
        <a href="#">Menu 2.2</a>
      </li>
      <li>
        <a href="#">Menu 2.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3.0</a>
    <ul>
      <li>
        <a href="#">Menu 3.1</a>
      </li>
      <li>
        <a href="#">Menu 3.2</a>
      </li>
      <li>
        <a href="#">Menu 3.3</a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

请试试这个。我已将position:relative提供给ul.nav和position:absolute;至ul.nav > li > ul子菜单。并且我添加了html标记<div class="clear"></div>以清除div，因为ul具有float:left属性。并添加一些其他的CSS请检查代码。

ul.nav {
  float: left;
  list-style: none;
  padding: 0;
  position: relative;
}

ul.nav>li {
  float: left;
}

ul.nav>li>a {
  color: white;
  padding:20px;
  background-color: red;
  display: block;
}

ul.nav > li > ul {
  background-color: blue;
  display: none;
  left: 0;
  list-style:none;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
}
ul.nav>li>ul>li>{
  display:block;
}

ul.nav>li>ul>li>a {
  color: white;
}

ul.nav>li>a:hover~ul {
  display: block
}
.clear{
  clear:both;
}

<ul class="nav">
  <li>
    <a href="#">Menu 1.0</a>
    <ul>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2.0</a>
    <ul>
      <li>
        <a href="#">Menu 2.1</a>
      </li>
      <li>
        <a href="#">Menu 2.2</a>
      </li>
      <li>
        <a href="#">Menu 2.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3.0</a>
    <ul>
      <li>
        <a href="#">Menu 3.1</a>
      </li>
      <li>
        <a href="#">Menu 3.2</a>
      </li>
      <li>
        <a href="#">Menu 3.3</a>
      </li>
    </ul>
  </li>
</ul>
<div class="clear"></div>

Answer 2

我认为这就是您要找的内容，我删除了子padding中的ul并将填充添加到a

ul.nav {
list-style: none;
    display: inline-block;
    padding: 0;
    background: #00f;
}

ul.nav>li {
  float: left;
}

ul.nav>li>a {
  color: white;
  padding:20px;
  background-color: red;
}

ul.nav>li>ul {
  list-style: none;
  display: none;
  background-color: blue;
  margin-top: 20px;
}
ul.nav>li>ul>li>{
  display:block;
}

ul.nav>li>ul>li>a {
  color: white;
  padding: 20px;
    display: inline-block;
}

ul.nav>li:hover ul {
  display: block;
      padding: 0;
}

<ul class="nav">
  <li>
    <a href="#">Menu 1.0</a>
    <ul>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2.0</a>
    <ul>
      <li>
        <a href="#">Menu 2.1</a>
      </li>
      <li>
        <a href="#">Menu 2.2</a>
      </li>
      <li>
        <a href="#">Menu 2.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3.0</a>
    <ul>
      <li>
        <a href="#">Menu 3.1</a>
      </li>
      <li>
        <a href="#">Menu 3.2</a>
      </li>
      <li>
        <a href="#">Menu 3.3</a>
      </li>
    </ul>
  </li>
</ul>