Creating Lists - Learn to Code HTML and CSS: Develop and Style Websites - page 167

Navigational List Example
We'll often develop, and find, navigation menus using unordered lists. These lists are com-
monly laid out as horizontal lists, using either of the two techniques previously mentioned.
Here is an example of a horizontal navigation menu marked up using an unordered list with
<li> elements displayed as inline-block elements (see Figure 8.13 ).
Figure 8.13 A navigation menu marked up using an unordered list
HTML
Click here to view code image
1. <nav class="navigation">
2. <ul>
3. <li><a href="#">Profile</a></li><!--
4. --><li><a href="#">Settings</a></li><!--
5. --><li><a href="#">Notifications</a></li><!--
6. --><li><a href="#">Logout</a></li>
7. </ul>
8. </nav>
CSS
Click here to view code image
1. .navigation ul {
2. font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
3. margin: 0;
4. padding: 0;
5. text-transform: uppercase;
6. }
7. .navigation li {
8. display: inline-block;
9. }
10. .navigation a {
11. background: #395870;
12. background: linear-gradient(#49708f, #293f50);
13. border-right: 1px solid rgba(0, 0, 0, .3);
14. color: #fff;
15. padding: 12px 20px;
16. text-decoration: none;
17. }
18. .navigation a:hover {
19. background: #314b60;
20. box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
21. }