You are absolutely positioning the child elements and expecting them to behave like they are relatively positioned, you're also making your list items display inline
, not inline-block
which is creating unanticipated behaviour.
Demo Fiddle
Change your CSS to (see below for alternative):
/*navigation*/
.nav {
width: 100%;
height: 200px;
margin: 0 auto;
position: absolute;
}
.nav .menu {
height: 200px;
list-style-type: none;
text-align: center;
}
.nav .menu li {
letter-spacing: 0.1em;
display: inline-block;
padding-left: 110px;
padding-right: 110px;
position: relative;
}
.nav .menu li.current_page_item a {
text-decoration: underline;
}
.nav .menu li a:hover {
color: #929292;
}
.nav .menu li a p {
font-size: 1em;
}
.nav .menu li a div {
width: 150px;
height: 100px;
background-color: red;
display:
}
That said, the padding on your items is spacing them pretty distantly, you may want to remove it: