CSS example Tutorial: basic knowledge of creating a CSS horizontal menu with ul list

In the previous article, I learned "basic knowledge of creating CSS horizontal menus with ul list"/article. asp? Id = 395. We can understand the implementation principle, but such menus are far from satisfying our needs. We need to make a more beautiful menu. Today we learn to make the menu have a rectangular background, and it can be changed when the mouse is activated ). Let's get started!
<Ul id = "nav">
<Li> <a href = "http://www.111cn.net/"> Div + CSS tutorial </a> </li>
<Li> <a href = "http://www.111cn.net/"> CSS layout instance </a> </li>
<Li> <a href = "http://www.111cn.net/"> CSS2.0 tutorial </a> </li>
<Li> <a href = "http://www.111cn.net/"> CSS cool site views </a> </li>
<Li> <a href = "http://www.111cn.net/"> CSS template download </a> </li>
</Ul>
These lines of HTML code are familiar to everyone. They are the foundation of menus. With them, we can customize styles through CSS.
# Nav {
Font-size: 12px;
Margin: 0;
Padding: 0;
White-space: nowrap;
}
We define that the margin and padding of the unordered nav are both zero and the font size is 12 px.
We do not want the menu to start another line before it ends. We force all texts to be displayed in the same line until the text ends or the br object is encountered.
# Nav li {
Display: inline;
List-style-type: none;
}
# Nav li {
Padding: 5px 8px;
Line-height: 22px;
}
Display: inline; inline (in the row), restrict li to one line for display;
List-style-type: none; list items are marked as none by default;
Padding: 5px 8px; set the link filling, up or down to about 5px to 8px;
Line-height: 22px; set the row height of the link to 22px.