Question

I am trying to redesign my websites menu configuration a bit.

I am using a list to display the menu options and the list has a style type of circle.

Here is a picture:

And here is the code:

<li class='category'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li.listCategory {
    list-style-type: circle;
    margin-left: 17px;
}

What i want to do with this, is have the entire row highlighted in yellow, once the person has selected this section of the navigation menu.

All of the code relating to this is working, but the problem that I am having is in regard to the styling of this row, or <li> tag.

My first attempt at this produces an unwanted effect:

<li class='category' id='selectedCat'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li#selectedCat {
    background-color: #FFCC00;
    list-style-type: disc;
}

So I remove the margin set in the category class and in turn end up with this:

Notice that now my nice list style that shows too that this option has been selected has just disappeared…

So what I am basically trying to do is to style this area:

Does anyone have any suggestions or ideas on how I could accomplish this task?

Thanks in advance for taking the time to read through this!!

Answer 1

You need an additional list-style-position: inside; to move the bullet inside the list item.

https://developer.mozilla.org/en/CSS/list-style-position