html - CSS：向左浮动的列表项之间的空格

Question

我是新人，请多多包涵。

我使用 ul 和 li 制作了一个导航菜单：这是我的菜单的 jsfiddle

我的问题是菜单和下拉菜单之间有空格

我很困惑代码的哪一部分在做这件事。我什至在我的 CSS 中添加了清除所有默认边距和填充。我猜它的html？如果是这样，您通常如何删除不需要的间距？

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

ul li {
  background-color: black;
  border: 1px solid white;
  width: 110px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: left;
}

ul li a {
  color: white;
  text-decoration: none;
}

ul li a:hover {
  background-color: red;
  display: block;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<link rel="stylesheet" type="text/css" href="style.css">
<ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 2</a></li>
      <li><a href="#">submenu 3</a></li>
    </ul>
  </li>
</ul>

标签： htmlcss

Answer 1

不是margin，它来自你的border: 1px solid white;

*{
    margin:0;
    padding:0;
}

ul{

    list-style: none;

}

ul li{
    background-color: black;
    /* border: 1px solid white; --- Here it is */
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
}

ul li a{
    color: white;
    text-decoration: none;
}

ul li a:hover{
    background-color: red;
    display: block;
}

ul li ul li {
    display: none;
}


ul li:hover ul li{
    display:block;
}

<link rel="stylesheet" type="text/css" href="style.css">

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
</ul>

JSFiddle