TAILIEUCHUNG - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P7

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P7:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | Navigation 97 To produce multilevel navigation we can edit the example we saw in Figure adding a nested list and styling the colors borders and link properties of the new list s items DOCTYPE html PUBLIC - W3C DTD XHTML Strict EN http TR xhtml1 DTD html xmlns http 1999 xhtml lang en-US head title Lists as navigation title meta http-equiv content-type content text html charset utf-8 link rel stylesheet type text css href head body div id navigation ul li a href Recipes a ul li a href Starters a li li a href Main Courses a li li a href Desserts a li ul li li a href Contact Us a li li a href Articles a li li a href Buy Online a li ul div body html Download at 98 The CSS Anthology chapter04 navigation width 200px navigation ul list-style none margin 0 padding 0 navigation li border-bottom 1px solid ED9F9F navigation li a link navigation li a visited font-size 90 display block padding 0 border-left 12px solid 711515 border-right 1px solid 711515 background-color B51032 color FFFFFF text-decoration none navigation li a hover background-color 711515 color FFFFFF navigation ul ul margin-left 12px navigation ul ul li border-bottom 1px solid 711515 margin 0 navigation ul ul a link navigation ul ul a visited background-color ED9F9F color 711515 navigation ul ul a hover background-color 711515 color FFFFFF The result of these additions is shown in Figure . Download at Navigation 99 Discussion Nested lists are a perfect way to describe the navigation system that we re working with here. The first list contains the main sections of the site while the sublist under Recipes shows the subsections within the Recipes category. Even without any CSS styling the structure of the list is still clear and comprehensible as you can see in Figure . Recipes 0 Starters 0 Main Courses 0 Desserts Contact Us Articles Buy Online Figure . .