CSS: spaces between list items that are floated left

Question

I'm new, so please bear with me.

I made a navigation menu using ul's and li's: here is my jsfiddle of the menu

My problem was it had white spaces between the menu's... and the drop down menu's

I'm quite confused which part of the code was doing it. I even added clear all default margin and padding in my css. I'm guessing its the html? If so, how do you normally remove the unwanted spacing?

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

Answer 1

It's not margin , it comes from your 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

Answer 2

just Update this css code

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

it will remove white space between ul li

Answer 3

there is only one mistake. just remove

`border: 1px solid white;`

and add

 `border: none;`

your final code is

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