display inline-block in css menu - css

Question

I'm trying to make my website's menu elements next to each other with the display: inline-block. I've tried it in different parts of my CSS menu, like at the 'cssmenu li' etc, but it doesn't work. Somebody knows how to help me?
The CSS:
#cssmenu {
border: none;
border: 0px;
margin: -17px;
padding: 0px 0px 0;
font-family: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 19px;
font-weight: none;
float: left;
width: 600;
margin-left: 300px;
z-index: 999;
position: fixed;
}
#cssmenu ul {
background: #fff;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
display: block;
float: left;
padding: 0px;
}
#cssmenu li a {
background: #fff url('seperator.png') bottom right no-repeat;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #000;
}
#cssmenu ul ul a {
color: #000;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #fff url('hover.png') bottom center no-repeat;
color: #ddd;
text-decoration: none;
}
#cssmenu li ul {
display: none;
background: #fff;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;*/
/*left:0px;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
float: auto;
margin: 0px;
display: block;
padding: 0px;
width: 225px;
background: #hhh url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
}
#cssmenu li:hover li a {
background: none;
color: #000;
font: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #fff url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
text-decoration: none;
}
#cssmenu p {
clear: left;
}

Answer 1

You can make it with #cssmenu li {display: inline block;} and #cssmenu li a {padding: 0 16px;} but your html is wrong. Check your ul's and li's again. You need:
<div id="cssmenu">
<ul>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
</ul>
</div>