How do I get my menu links into my <nav> block? - html

Question

I'm really sorry if I didn't phrase my question correctly, I'm really new at all of this.
I want to put my menu items (I made an unordered list) within my nav block, but they are showing underneath it instead. It overlaps with my body content (not pictured), which is really problematic. Could someone help me?
The pink box is my nav block. I want to put my menu buttons inside it.
I know that the pink block is in fact the nav block?
HTML:
<header>
<h1>Header</h1><h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</nav>
CSS:
header{
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav{
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1, h2{
display: inline;
}
/*Set li as buttons*/
#menu li{
float: left;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
display: block;
}
/*display anchor tags as buttons*/
#menu a{
display: block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover{
color: white;
background-color: black;
}
Thank you!

Answer 1

There are many errors in your CSS:
list-style-type: none; goes on the list, not on its items. It's what disables default list-behavior and makes the list stand on one line.
float: left; will make the elements float, but will also make the parent shrink as if it didn't have any content, which is why the elements sit below the nav block.
display: block; on items makes them stand on their own line. If you want multiple elements to stand side-by-side yet still have margins and paddings like blocks, you need to use inline-block instead. This is much easier to maintain than floating elements.
The margins on the list items are also way too big, I got rid of those. Honestly though, I really don't get why people use lists anymore. You could very well just put the links in the nav directly and save a lot of code.
header {
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav {
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1,
h2 {
display: inline;
}
/*Set li as buttons*/
#menu {
list-style-type: none;
}
#menu li {
width: 5em;
margin: 0;
display: inline-block;
}
/*display anchor tags as buttons*/
#menu a {
display: inline-block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover {
color: white;
background-color: black;
}
<header>
<h1>Header</h1>
<h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha
</li>
<li>beta
</li>
<li>gamma
</li>
<li>delta
</li>
</ul>
</nav>

Answer 2

You need to clear the container of the floated elements, as they don't properly stretch the container.
Add the clearfix CSS to your sheets:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
and then add the clearfix class to menu:
<ul id="menu" class="clearfix">
fiddle
Alternatively, pick one of the other clearfix solutions from here (where I got the solution above).

Answer 3

Get rid of the float left under menu li and replace it with
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}
and if you want to move it over to the right a bit more
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}