Simple horizontal css menu

Steps:

<html>

<head>

<title>test</title>

<style type="text/css">
#navcontainer ul
{
    list-style-type: none;    /* 1: to remove the html list bullets  */
    
    margin: 0;                /* 2: to remove left-indentation consistently across all browsers, set both padding and margins to 0 for ul. */
    padding: 0;
    
    text-align: center;       /* 8: to center the list, add "text-align: center;" to the 'ul'. */
}

#navcontainer ul li { display: inline; }   /* 3: to force the list into one line */

#navcontainer ul li a
{
    text-decoration: none;    /* 4:  to remove the text underline (it is a common practice for navigation not to have underlines) */
    
    padding: .2em 1em;        /* 5: to make each list item into a box, you need to add padding to the 'a' element */
    
    color: #fff;              /* 6: at this point a background color and border can be applied.  Modify here to taste...*/
    background-color: #036;
}

#navcontainer ul li a:hover   /* 7: use 'a:hover' to set a second background color, as a rollover. */
{
    color: #fff;
    background-color: #369;
}        
    
</style>

</head>

<body>
    <div id="navcontainer">
        <ul>
            <li><a href="#">Milk</a></li>
            <li><a href="#">Eggs</a></li>
            <li><a href="#">Cheese</a></li>
            <li><a href="#">Vegetables</a></li>
            <li><a href="#">Fruit</a></li>
        </ul>
    </div> 
</body>

</html>

Eg: as above without the commented steps:

<html>

<head>

<title>test</title>

<style type="text/css">
#navcontainer ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}

#navcontainer ul li a:hover
{
    color: #fff;
    background-color: #369;
}        
    
</style>

</head>

<body>
    <div id="navcontainer">
        <ul>
            <li><a href="#">Milk</a></li>
            <li><a href="#">Eggs</a></li>
            <li><a href="#">Cheese</a></li>
            <li><a href="#">Vegetables</a></li>
            <li><a href="#">Fruit</a></li>
        </ul>
    </div> 
</body>

</html>

Outputs:

css-horizontalmenu1

For more information, see here.