如何删除菜单末尾的黑色 space/box

Question

我正在制作一个简单的电子书网站，这样我和我的朋友就可以访问我的电子书和所有爵士乐。我的菜单末尾有这个黑框或 space，我不确定为什么。我尝试调整整个菜单的大小，但我不知道有什么方法可以使该框像主页按钮一样工作。太完美了，附近没有 space。就在最后。 html 和 css 供参考。

<body>
<img src="logo2.png" class="logo" />
<div class="br" />
<ul class="menu">
<li class="list"><a href="#">Home</a></li>
<li><a href="#">Ebooks</a>
<ul class="dropdown1">
        <li><a href="#">Case studies, theses, academia, educational</a></li>
   </ul>
</li>
<li><a href="#">Extras</a>
   <ul class="dropdown2">
      <li><a href="#">test</a></li>
   </ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Site map</a></li>
</ul>
<div class="content">
<br>
<p>test</p>
<br>
</div>
</body>
</html>

和css：

body{
background-color:#0e0d0d;
}

@font-face {
font-family: Lato-Light;
src: url('Lato-Light.ttf');
}

@font-face {
font-family: Lato-Light-Italic;
src: url('Lato-LightItalic.ttf');
}

img.logo {
width: 500px;
height: auto;
display: block;
margin-left: auto;
margin-top:60px;
margin-right: auto
}

div.br {
margin-top:60px;
}

ul{
padding:0px;
font-family:Lato-Light;
background: #000000;
color:#f9a724;
width:535px;
margin-left:auto;
margin-right:auto;
}

ul li{
padding:0px;
margin:0px;
display: inline-block;
position: relative;
line-height: 21px;
text-align: center;
}

ul li a{
display: block;
padding: 8px 25px;
color: #f9a724;
text-decoration: none;
}

ul li a:hover{
color: #000000;
background: #f9a724;
}

ul li ul.dropdown1 {
min-width: 150px; /* Set width of the dropdown */
max-width:350px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}

ul li ul.dropdown2 {
min-width: 150px; /* Set width of the dropdown */
max-width:200px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}

ul li:hover ul.dropdown1 {
display: block; /* Display the dropdown */
}

ul li ul.dropdown1 li {
display: block;
}

ul li:hover ul.dropdown2 {
display: block; /* Display the dropdown */
}

ul li ul.dropdown2 li {
display: block;
}

div.content {
width:535px;
background: #000000;
margin-left:auto;
margin-right:auto;
}

p {
color: #f9a724;
text-align:center;
word-wrap: break-word;
margin-right:50px;
margin-left:50px;
font-family:Lato-Light;
}

https://jsfiddle.net/mncvhoz9/

Answer 1

只需在您的文件中添加以下内容CSS

ul li a{
    display: block;
    padding: 9px 29.5px;
    color: #f9a724;
    text-decoration: none;
}

Answer 2

它不是黑框，它是你的 ul 元素的背景你可以简单地改变你的 ul 的宽度来删除这个黑色区域：

ul {
  width: 488px;
}

Answer 3

ul 顶部和底部都有边距，因为它有黑色 space.So 像这样给，它会起作用。

div.br ul.menu{
  margin-bottom:0px
}

工作Demo

Answer 4

如果你不需要减少ul的宽度，那么你应该设置li的宽度。

 ul li{   width: 103px; }

Answer 5

如果您不想担心精确的像素数，and/or 使每个项目具有相同的宽度，您应该能够添加以下声明，但我不会确定所有浏览器版本对它的支持程度（自从我研究它以来已经有一段时间了）：

ul {
  display: table;
}
li {
  display: table-cell;
}

添加到您的代码的示例：https://jsfiddle.net/nfqs0j0u/

Answer 6

请试试这个：

Css 代码如下：

ul{
    padding:0px;
    font-family:Lato-Light;
   background: #000000;
   color:#f9a724;
   width:488px;
   margin-left:auto;
   margin-right:auto;

    }

Demo

如何删除菜单末尾的黑色 space/box

how do I remove this black space/box at the end of my menu

html

css

menu

box