important! The foreword is a must-read!
This chapter mainly studies the vertical navigation bar of CSS. First of all, you must know what tags are used to form the navigation bar. In HTML, it is implemented using list tags, that is, it is implemented using the unordered tags ul>li>a of the list. Note The list generated by default is with item tags, which requires us to use the list deletion attribute of css (list-style-type: none). The function of this attribute is to delete the item tags of the list. It must be added at the same time (margin: 0 and padding: 0) Used to delete the browser's default settings. Hyperlinks are underlined by default. If you need to remove the underline of hyperlink (a), please use the text decoration attribute (text-decoration: none). Pay attention to the vertical navigation bar to remove the element. Set it as a block element, that is, use the (display: block) attribute. The function of this attribute is to set the element as a block-level element so that it can be arranged vertically so that each navigation bar item occupies a whole row.
Vertical navigation bar:ul>li>a
Notice! The navigation bar is vertical by default, but a standard vertical navigation bar requires the use of the display: block attribute. display: block displays the element as a block element.
code diagram
renderings
Hover vertical navigation bar
Notice! Hovering a vertical navigation bar refers to using the anchor pseudo-class (:hover) on the navigation bar.
code diagram
renderings
