Question

CSS and HTML Code is as shown below. I used eric meyer’s reset script.. I edited out the one which I think is relevant.

    /* reset CSS script */

ol, ul {
    list-style: none;
}

/* End of reset CSS script */

#navbar {
    border: 5px solid red;
    margin: -580px 0 0 160px;
    width: 1500px; 

    font-size: 26px;
    font-family: 'Conv_LITHOSPRO-REGULAR';
}
#navbar ul li {     
        display:inline;
        padding:0 35px 0 0; 
        list-style-type:disc;
        }

This is the HTML code.

        <nav id="navbar">
            <ul id="hli">
                <li id="OP"><a  href="Orders.html">Your Order</a></li>
                <li id="MP"><a  href="Menu.html">Menu</a></li>
                <li id="CUP"><a  href="ContactUs.html">Contact Us</a></li>
                <li id="JP"><a  href="Jobs.html" target="_blank">Jobs</a></li>
                <li id="TCP"><a  href="TC.html">Terms & Conditions</a></li>
            </ul>   
        </nav>

Answer 1

The list-style-type property applies to elements with display: list-item only. So if you want to put some markers before list items that you have turned to inline elements, you have to add markers into the content directly, or via generated content. E.g., the following puts a bullet “•” and a space before each item:

#navbar ul li:before {
   content: "\2022  "
}