Floatine menu help

I have a problem with my floating menu, in the fact that it doesn’t float!!! More problems that I want to fix are: have the menus on each line, currently they are placed where ever they feel like going!! 😡 and my menu over laps my center section where my text is!

My here is my code:

body{
background-color: #B0C4DE
}

h1 {
font-size: 20pt;
font-style: italic;
font-family: arial, helvetica, sans-serif;
text-align: left

}

h2 {
font-size: 16pt;
font-style: italic;
font-family: arial, helvetica, sans-serif;
text-align: left
}

h3 {
font-size: 14pt;
font-style: italic;
font-family: Times New Roman;
text-align: left
}

h4 {
font-size: 10pt;
font-style: italic;
font-family: Times New Roman;
text-align: left
}

h5 {
text-align: center;

}

body {
margin-left: 15%
}

p {
text-align: left;
}

p.initial {
text-align: center;
}

.header {
height: 50px;
padding-left: 50px
}

p.menu{
position: absolute;
float: left;
width:15%;
top:50px;
left:5px;
padding:0 10px;
color:#F0F8FF;
background:#1E90FF;

}
p.menu a{
color:#ffffff;
}

p.menu a:hover {
color: #a00;
background: #fff;
}

p.top {
margin-top: 0;
padding: 0.2em;
border-top: 3px;
color: white;
background: blue
}

Can any one please tell me where I am going wrong?

Also in #CSS _↴