Question

I’ve run into a problem with css + lists.

For my list i have the following code:

<ul class="subMenuUL">
    <li>SUBMENU ITEM 1</li>
    <li>SUBMENU ITEM 2</li>
    <li>SUBMENU ITEM 3</li>
    <li>SUBMENU ITEM 4</li>
    <li>SUBMENU ITEM 5</li>
    <li>SUBMENU ITEM 6</li>
    <li>SUBMENU ITEM 7</li>
</ul>

With the CSS:

.subMenuUL
{
    margin-left: 20px;
    width: 250px;
}

.subMenuUL li
{
    border-top: 1px solid #edbb98;
    color: #5f5f5f;
}

The problem is that i want the border to extend above the list image, however it only goes over the text. Is there any way to solve this to cause the border to extend to the left?

Answer 1

Use:

.subMenuUL li {
    border-top: 1px solid #edbb98;
    color: #5f5f5f;
    list-style-position: inside;
}