html - CSS Dropdown留空格后掉落(Snap Attached)如何消除空格？

Question

我创建了一个下拉菜单，我试图摆脱我在下拉列表开始时在父组件及其子组件之间获得的小空间，如下面的屏幕截图所示:

我希望下拉菜单从选项卡开始的地方开始，如下所示:

--------
| Parent
-----------
| Child
------------

请在下面找到代码片段:

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 25px;
  padding-right: 10px;
  position: absolute;
}

li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}

li a {
  display: block;
  min-width: 138.7px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
}

li:hover a {
  background: green;
}

li:hover ul a {
  background: grey;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

li:hover ul a:hover {
  background: green;
  color: #fff;
}

li ul {
  display: none;
}

li ul li {
  display: block;
  float: none;
}

li ul li a {
  width: auto;
  min-width: 100px;
}

ul li a:hover+.hidden,
.hidden:hover {
  display: block;
  width: auto;
}

#menu {
  text-align: center;
}

<ul class="menu">
  <li><a href="#">Somthing</a></li>
  <li> <a href="#">something</a>
    <ul class="hidden">
      <li><a href="#">somethoing</a></li>
      <li><a href="#">something</a></li>
    </ul>
  </li>
</ul>

提前致谢。

Answer 1

将隐藏类的填充设置为 0。 .hidden{padding: 0;} 并删除 li ul li a{width:auto;最小宽度:100px； JSFiddle我更改了您的媒体查询，以便可以在此处查看。

    ul {
        list-style-type:none;
        margin:0;
        padding-left: 25px;
        padding-right: 10px;
        position: absolute;
        }
    li {
        display:inline-block;
        float: left;
        margin-right: 1px;

    }
    li a {
        display:block;
        min-width:138.7px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #fff;
        background: #2f3036;
        text-decoration: none;
        padding-left: 10px;
        padding-right: 10px;

    }
    li:hover a {
        background:green ;
    }
    li:hover ul a {
        background: grey;
        color: #2f3036;
        height: 40px;
        line-height: 40px;
         text-align:center;

    }
    li:hover ul a:hover {
        background: green;
        color: #fff;
    }
    li ul {
        display: none;
    }
    li ul li {
        display: block;
        float: none;
    }
 
    .hidden{
      padding: 0;
    }
    ul li a:hover + .hidden, .hidden:hover {
        display:block;
        width: auto;
    }
        #menu{
             text-align:center;
        }
    @media screen and (max-width : 460px){
        ul {
            position: static;
            display: none;
        }

        li {
            margin-bottom: 1px;
        }

        ul li, li a {
            width: 100%;
        }

        .show-menu {
            display:block;
        }
    }

 <ul class="menu">
      <li><a href="#">Something</a></li>
      <li> <a href="#">something</a>
        <ul class="hidden">
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        </ul>
      </li>
</ul>