How to style elements for an element within a div tag?

Question

I know this is a question from someone that is new in the comunity, however I couldn't find the right answer anywhere. My html snippet looks like this:

<div id="navigation">
    <!--Create an unordered list in order to get the title bar of the site -->
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</div>

The idea is that I want to style the unordered list.

My css code looks something like this:

#navigation li {
    display: inline; 
}

Clearly this doesn't work, however I was hoping someone could guide me in the right direction of how to actually pin point an element within a div tag?

Edit: Well, sorry everyone I forgot to reference my css page in my HTML code... good grief!

Answer 1

HTML:

<div id="navigation">
    <!--Create an unordered list in order to get the title bar of the site -->
    <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="">Category3</a>
        </li>
        <li><a href="">Category4</a>
        </li>
    </ul>
</div>

CSS:

#navigation li {
    float: left;
    margin-right: 10px;
}
#navigation ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #3e3e3e;
}

See demo

Answer 2

This CSS code will, in fact, work. Your code now will apply to all li tags inside of divider(s) with the id of navigation.

Most likely, the reason you do not think it is working is because inline is the default value for the display property. Therefore, you are likely not changing any formatting or style of the <li> tags. Is there a specific style you are trying to apply to the <li> tags?