Fluid div中的CSS导航问题

Question

I am trying to create a navigation with an image above each list item instead of an individual image per item. It looks fine when I am full screen but when I minimize the screen expecting the list items to stack nicely they stack over one another. Below is a list of my code:

#nav ul, #nav li {
list-style: none;
font-size: 1.2em;
text-transform:uppercase;
}

#nav ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background: url(images/navico.jpg) no-repeat center;
padding-top: 50px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 6px;
}

This is a link to the page http://ecoairofswfl.com/Bush2/

Answer 1

Try this,

#nav ul li {
  background: url("images/navico.jpg") no-repeat scroll center center transparent;
  display: block;
  float: left;
  list-style: none outside none;
  padding: 50px 4px 0 6px;
}

I changed them to block elements and floated them to the left; inline doesn't work as intended with stacking.

Answer 2

Solution is
#nav ul li {
    display: inline-block;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    background: url(images/navico.jpg) no-repeat center;
    padding-top: 50px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 6px;
    }