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

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">
<b>Eco-Fashion</b>
<ul>
<li>Tops
</li>
<li>Bottoms
</li>
<li>Outwear
</li>
<li>Shoes
</li>
<li>Jewelry
</li>
</ul>
</li>
<li>&nbsp &nbsp </li>
<li class="GreenBeauty">
<b>Green Beauty</b>
<ul>
<li>Soy Makeup
</li>
<li>Soy Blush
</li>
<li>Soy
</li>
</ul>
</li>
<li>&nbsp &nbsp </li>
<li class="GreenLifestyle">
<b>Green Lifestyle</b>
<ul>
<li>Leaf Pants
</li>
<li>Coconut Bra
</li>
<li>Wilson Volleyball
</li>
</ul>
</li>
<li>&nbsp &nbsp </li>
<li class="Sale">
<b>Sale</b>
</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