Отобразить встроенный блок в меню CSS

Question

Я пытаюсь сделать элементы меню моего сайта рядом друг с другом с помощью display: inline-block. Я пробовал это в разных частях моего меню CSS, например, в "cssmenu li" и т. Д., Но это не работает. Кто-нибудь знает, как мне помочь?

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

Вы можете сделать это с помощью #cssmenu li {display: inline block;} и #cssmenu li a {padding: 0 16px;}, но ваш html неверен. Проверьте свои ul и li снова. Тебе нужно:

<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>