Drop-down menus – also known as “suckerfish” menus – use a combination of HTML and CSS (Cascading Style Sheets) for structure and style. The HTML part of a drop-down menu consists of bullet lists and nested bullet lists. After you style the menu bar and main navigation links in CSS, you style the nested bullet lists as submenus. The “:hover” selector in CSS allows you to change a hidden submenu’s display property to “block” to make it reappear.
" and "" tags: Link 1 Link 2 Link 3 Add a clear-fix div before the end of the list. You will add a style to the “clearfix” class to make the menu’s background stretch down.
list-style: none; padding: 0; } Note that “#menu” matches the ID name of the example HTML code. list-style: none; padding: 0; background-color: darkblue; } float: left; } display: block; padding: 8px 15px; text-align: center; color: white; font-weight: bold; text-decoration: none; } Note that in “padding,” two values have been set. The first value is vertical padding while the second effects horizontal padding. position: absolute; list-style: none; padding: 0; } clear: left; } dipslay: block; } .clearfix { clear: both; } Tips Writer Bio
