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

Question

I'm making a simple ebook site so me and my friends can access my ebooks and all that jazz. My menu has this black box or space on the end and I'm not sure why. I tried resizing the overall menu and I don't know any way I can make the box act like the home button. It's perfect, there's no space near it. Just at the end. html and css for reference.

<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>

And the 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/

I don't understand which black box, all I see is there is black background to complete page, can you highlight the box you're talking about — Tushar, Sep 01 '15 at 06:15

score 0 · Answer 1 · answered Sep 01 '15 at 06:23

0

Just add the following CSS in your file

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

answered Sep 01 '15 at 06:23

SaviNuclear

886
1
7
19

score 0 · Answer 2 · answered Sep 01 '15 at 06:24

0

it's not a black box it is the background of your ul element you can simply change the width of your ul to remove this black area:

ul {
  width: 488px;
}

answered Sep 01 '15 at 06:24

Moneer Kamal

1,837
16
25

Thanks. Changing it to 501px instead seems to have fixed it. But you were right. Also connexo, happy? Changed the name. – johan Sep 01 '15 at 06:33

Praveen Raj · Answer 3 · 2015-09-01T06:39:56.960

0

ul have margin top and bottom, because of that it has black space.So give like this,it will work.

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

Working Demo

edited Sep 01 '15 at 06:39

answered Sep 01 '15 at 06:34

Praveen Raj

1,014
1
8
12

score 0 · Answer 4 · answered Sep 01 '15 at 06:46

0

If you don't need to reduce the width of ul, then you should set the width of li.

 ul li{   width: 103px; }

answered Sep 01 '15 at 06:46

Ahmer Khan

747
1
10
31

score 0 · Accepted Answer · answered Sep 01 '15 at 06:49

If you don't want to have to worry about getting down to exact pixel numbers, and/or making each item the same width, you should be able to add the following declarations, though I'm not sure how well it's supported by all the browser versions (it's been a while since I've looked into it):

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

Example with those added to your code: https://jsfiddle.net/nfqs0j0u/

score 0 · Answer 6 · answered Sep 01 '15 at 06:54

0

Please try this one:

Css code like this:

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

    }

Demo

answered Sep 01 '15 at 06:54

Ivin Raj

3,448
2
28
65

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

6 Answers6