CSS can format HTML and XML documents, and can create drop-down menus. To create a CSS drop-down menu, use ID and class selectors to designate the menu and its items, respectively. The menu is hidden until the visitor hovers over it, and the rest of the document can be positioned using the “position” element. The rest of the menu is created using HTML elements.
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 is most often used with web pages written in HTML. CSS can be used to create drop down menus in web pages. CSS drop-down menus have a single text element 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 CSS identification and class tags.
Dropdown 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 others can read your code. For example, a dropdown menu can use the code #drop1.
Create the class for the first item in the dropdown using the class selector, which looks like a dot. The class will be part of the HTML list item. The element of the list is designated by the characters “li”. Create the top-level class by typing “li.top”. The description of the class 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, Ginevra, san-serif;
font size: 100%;
color: #FF00FF;}
Next, create a class for the items that will be hidden under the first item in the CSS menu. The class will describe the unordered HTML list, which is designated with the characters “ul”. The description will look essentially the same as the top-level menu item, with the words “display:none#59” added to the beginning of the description. This indicates that items in the unordered list will be hidden until the pointer hovers over the CSS drop-down menu.
The following is an example of this part of the CSS code:
#drop1 ul.link {
display: none#59
font-family: Verdana, Ginevra, san-serif;
font size: 100%;
color: #FF00FF;}
You will need to display the CSS dropdown on the rest of the HTML 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 location is:
#drop1{position:absolute;}
That’s all that’s needed for the CSS portion of the dropdown menu. The rest of the CSS dropdown menu is created in the HTML document using the “div”, “id”, “class”, “li” and “ul” elements. The “div” tag separates the menu part of the document. type
When you open the document in a web browser, the CSS dropdown menu will appear as a single element 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 won’t move, but some will be hidden by the menu.
Protect your devices with Threat Protection by NordVPN
