Принудительная строка на панели навигации (неупорядоченный список)?

Моя панель навигации в настоящее время сжимает весь мой текст вместе. У меня есть «заголовки» для раскрывающегося списка, и заголовки не заставляют линию.

HTML-код выглядит следующим образом:

<li><p>Services</p><ul>
    <li id="ITServices"><p>IT Services</p></li>
    <li><a href="port_collab_work.html">Portals, Collaboration & Workflows</a></li>
    <li><a href="business_intel_dash.html">Business Intelligence & Dashboards</a></li>
    <li><a href="mobile_development.html">Mobile Development</a></li>
    <li><a href="custom_application_development.html">Custom Application Development</a></li>
    <li id="healthcare"><p>Healthcare Services</p></li>
    <li><a href="healthcare.html">EMR, ICD 10 and Healthcare Consulting</a></li>
</ul></li>

CSS выглядит так:

#healthcare p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

#ITServices p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

.navbar li:hover ul {
    left: 15px;
    top: 40px;
    background: #7FBA00;
    padding: 1px;
    width: 280px;
    border: none;
    text-align: left;
}

.navbar li:hover ul a {
    margin: -7px -10px -7px -15px;
    text-align: left;
    padding: 0px 0px 0px 10px;
    display: block;
    font-size: 11px;
    width: 259px;
    line-height: 25px;
    color: #000;
    background-color: #F0F0F0;
    text-decoration: none;
    border-left: 10px solid #7FBA00;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}

.navbar li:hover ul a:hover {
    background: #7FBA00;
    border-left: solid 10px #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    width: 260px;
}

Ааа! Верно? Я пытаюсь отобразить все это в списке с разрывами строк после каждого элемента li. Помощь?