Cascading Style Sheets (CSS) is a name used to describe the way a Hyper Text Markup Language (HTML) or Extensible Markup Language (XML) document is formatted. It can be used for any type of XML document, but it is most often used with web pages written in HTML. CSS can be used to create drop down menus on web pages. Drop down CSS menus have a single text item shown until the visitor uses the mouse to hover over the menu, at which point the entire list of items is shown. The menu is created using the CSS identification and class tags.
Drop down CSS menus start with the ID selector. This selector looks like #. It is followed by the name of the ID. You can name the ID anything, but it should be descriptive so that others can read your code. For example, a drop down menu can use the code #drop1.
Create the class for the first item in the drop down menu by using the class selector, which looks like a period. The class will be part of the HTML list element. The list element is designated by the characters "li." Create the top level class by typing "li.top." The class description is contained between two curly braces.
The following example shows the entire CSS code for the first item in the list:
#drop1 li.top {font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: #FF00FF;}
Next, create a class for the items that will be hidden beneath the first item in the CSS menu. The class will describe the HTML unordered list, which is designated with the characters "ul." The description will look essentially the same as the top-level menu item, with the addition of the words "display:none#59" at the beginning of the description. This indicates that the items in the unordered list will be hidden until the pointer hovers over the drop down CSS menu.
The following is an example of this portion of the CSS code:
#drop1 ul.link {
display:none#59
font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: #FF00FF;}
You will want to the drop down CSS menu to appear over the rest of the HMTL document. Otherwise, when the visitor hovers over the menu, it will push the rest of the document down the page to make room for the list. Setting the position element to absolute, will do this.
The code to set the position is:
#drop1{position:absolute;}
That is all that is needed for the CSS portion of the drop down menu. The rest of the drop down CSS menu is created in the HTML document using the "div," "id," "class," "li" and "ul" elements. The "div" tag separates the menu portion of the document. Type <div id="drop1"> to create the drop down menu portion. Then start the unordered list using the HTML "ul" element.
Add the top class to the first list item, and the link class for the rest of the items. The HTML code should look similar to:
<div id="drop1">
<li class="top">Top Item</li>
<li class="link"><a href="#">Item</a></li>
<li class="link"><a href="#">Item</a></li>
<li class="link"><a href="#">Item</a></li>
</ul> </div>
When you open the document in a web browser, the drop down CSS menu will appear as a single item on the page. When you move your mouse over the top item, the rest of the menu will appear. The rest of the text on the page will not move, but a portion will be hidden by the menu.