CHAPTER 15. LISTS AND MENUS 161
border-radius: 15px 15px 0 0; padding: 5px 10px;
color: black; background-color: silver; }
#menu li:hover { color: white; background-color: black; }
#menu li li { text-align: left; border-radius: 0; width: 200px; }
#menu li ul { left: -6px; padding: 5px; }
When we refresh our webpage, we will see the contents are pretty much as
they were before, but greatly beautified. Also, the hover attribute has been
activated to highlight the menu item under the mouse.
Phase Four:The only thing left is to make the drop-down menus disap-
pear until we want to see them. We do this by manipulating the display:
attribute. We do “display: none” by default, and “display: block” when we
hover.
#menu li ul { display: none; }
#menu li:hover ul { display: block; }
And we are done! We have a drop-down menu system.
Exam Question 285(p.353): What styling attribute makes an element
disappear?
Acceptable Answer:display: none;
display: block;creates a vertical column of blocks.
display: inline-block;creates a horizontal row of blocks, similar to what
float: left;would do.
Exam Question 286(p.353): What styling attribute makes an element
(re)appear?
Acceptable Answer:display: block;
15.7 For Further Study
http://www.w3schools.com/tags/tag_ol.asphas more on ordered lists.
http://www.w3schools.com/tags/tag_ul.asphas more on unordered lists.
http://www.w3schools.com/cssref/pr_list-style.asphas list styling
options.