how to position two elements inside an anchor tag

Question

I'm trying to building an horizontal navigation bar in which every li tag has one element: the a tag; in this element the are other two elements one below the other, the first on top and the second on bottom. These two elements are a p tag and a div tag.

This is my attempt:

Here is the code:

<div class="nav">
<ul id="menu-navigation-bar" class="menu">
<li class="menu-item-72"><a href="http://localhost:8888/wordpress/about/"><p>About</p><div></div></a></li>
<li class="menu-item-71"><a href="http://localhost:8888/wordpress/services/"><p>Services</p><div></div></a></li>
<li class="menu-item-70"><a href="http://localhost:8888/wordpress/work/"><p>Work</p><div></div></a></li>
<li class="menu-item-69"><a href="http://localhost:8888/wordpress/contact/"><p>Contact</p><div></div></a></li>
</ul>
</div>

The CSS:

/*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;
    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;
    position: absolute;
}

.nav .menu li a div {
    position: absolute;
    width: 150px;
    height: 100px;
    background-color: red;
    display: inline;
}

What did I do wrong?
Thanks!

Answer 1

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:

Demo Fiddle