Question

I have some list items with anchor tags, that are set to display block with background images and I am trying to set them up to display inline but right now they only stack on each other. The ul is being generated by wordpress. When I inspect the li’s they fill the entire parent div, but I’m not sure why.

link to active site password: springy88

CSS

.nav-bar li {display: inline; font-size: 2.66em;}
.shop a{background-image:url('../images/shopFull.png'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}
.shop a:hover { background-position: 0 -30px; }
.services a{background-image:url('../images/servicesFull.jpg'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}

HTML

<nav class="menu-main-nav-container"><ul id="menu-main-nav" class="nav-bar"><li id="menu-item-17" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.goodmorningmoon.ca/shop/">Shop</a></li>
<li id="menu-item-16" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.goodmorningmoon.ca/services/">Services</a></li>
<li id="menu-item-18" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://www.goodmorningmoon.ca/blog/">Blog</a></li>
<li id="menu-item-15" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.goodmorningmoon.ca/contact/">Contact</a></li>
</ul></nav>

Answer 1

You should add float propiety to the li selector.. try this.

.nav-bar li {display: inline; font-size: 2.66em; float: left;}

Adding some margin could help too

and remember to create a div with clear:both css proriety after the menu