So let’s make this menu look a little nicer before we put it at the top of the page.
ul#menu {
background-color: tan;
border: solid .1em grey;
}
ul#menu h3 {
background-color: orange;
}
That’s starting to look interesting, but our list bullets are getting in the way.
ul#menu li {
list-style-type: none;
}
ul#menu {
background-color: tan;
border: solid .1em grey;
padding-left: 0;
}
Lists are usually displayed with padding on the left by default, so this gets rid of the padding on the top-level list, pushing the headline all the way to the right. The big deal, though, is that we’ve set the list-style-type to none to get rid of the bullets and numbering for any list item that is below the ul identified as “menu”.
List style types can also be discs, circles, squares, and decimals. And for “letters”, they can be lowercase or uppercase roman, latin, greek, and alpha(betical): lower-roman, upper-latin, lower-alpha, for example.
