Why does my dropdown menus move left to right (HTML & CSS)

Question

The problem I have is when I go to the navigation menu and have the menu come down, instead of being one item per line it goes across the screen from left to right

I get [Item 1] [Item 2] [Item 3] instead of:

[Item 1]

[Item 2]

[Item 3]

I think it has something to do with the navigation bar with my drop down menu (or lack thereof) want to leave. Any suggestions?

#navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  width: 100%;
}
.nav {
  width: 1800px;
  height: 70px;
  margin: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #DD0205;
}
.margin {
  margin: 0;
  display: inline-block;
}
#searchbox {
  padding 5px;
  font-size: 1em;
  line-height: 100px;
}
#magnify-search {
  text-indent: -99999px;
  width: 25px;
  height: 25px;
  display: block;
  background: transparent url(magnify.jpg) 0 0 no-repeat;
}
ul.cssMenu,
ul.cssMenu ul {
  list-style: none;
  margin: 1;
  padding: 0;
  position: relative;
}
ul.cssMenu ul {
  display: none;
  ;
  /*initially menu item is hidden*/
  position: absolute;
}
/* Hover effect for menu*/

ul.cssMenu li:hover > ul {
  display: block;
}
li {
  display: inline;
}

<input type="search" id="searchbox" value placeholder="Search">
<div class="margin">
  <input type="button" id="magnify-search" />
</div>


<ul class="cssMenu">
  <li class="Eco-Fashion">
    <a href="Eco-Fashion"><b>Eco-Fashion</b></a> 
    <ul>
      <li><a href="Tops">Tops</a>
      </li>
      <li><a href="Bottoms">Bottoms</a>
      </li>
      <li><a href="Outwear">Outwear</a>
      </li>
      <li><a href="Shoes">Shoes</a>
      </li>
      <li><a href="Jewelry">Jewelry</a>
      </li>
    </ul>
  </li>
  <li>&nbsp &nbsp &nbsp;</li>
  <li class="GreenBeauty">
    <a href="GreenBeauty"><b>Green Beauty</b></a> 
    <ul>
      <li><a href="Soy1">Soy Makeup</a>
      </li>
      <li><a href="Soy2">Soy Blush</a>
      </li>
      <li><a href="Soy3">Soy</a>
      </li>
    </ul>
  </li>
  <li>&nbsp &nbsp &nbsp;</li>
  <li class="GreenLifestyle">
    <a href="GreenLifestyle"><b>Green Lifestyle</b></a> 
    <ul>
      <li><a href="LeafPants">Leaf Pants</a>
      </li>
      <li><a href="CocoBra">Coconut Bra</a>
      </li>
      <li><a href="Wilson">Wilson Volleyball</a>
      </li>
    </ul>
  </li>
  <li>&nbsp &nbsp &nbsp;</li>
  <li class="Sale">
    <a href="Sale"><b>Sale</b></a> 
  </li>
</ul>
</div>
</div>

Answer 1

What happened?

You have specified <li> to display as inline elements. This rule force all <li> elements to behave like a normal text. It means that it will appear in one line and will have white spaces between element (like between words in a paragraph).

Where is that piece of code?

You have CSS rule that looks like this

li {
  display: inline;
}

in a very bottom of your code snippet.

What to do?

If you want them to be under each other use display: block instead.

Anything else?

Yes. Your menu have very strange behavior and I'd recommend you to take a look at jQuery Accordion