Drop-down menus on site pages are used to save space and provide a logical presentation of the structure of a web resource. There are many ways to implement this element, one of the simplest is given below.
It is necessary
Basic knowledge of HTML and CSS languages
Instructions
Step 1
The HTML code of the menu uses nested list elements (UL and LI), inside which links to pages are placed. It does not contain any complex structures. The dynamics is implemented by means of CSS, the description block of which is placed directly in the source code of the page. There is also nothing special in it, besides, the text contains some explanations of the purpose of certain style blocks.
Step 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Drop-down menu * {
font-family: Verdana;
font-size: 14px;
} ul, li, a {
padding: 0;
display: block;
border: 0;
margin: 0;
} ul {
border: 1px solid #AAA;
width: 150px;
list-style: none;
background: #FFF;
} li {
background-color: #AAA;
position: relative;
z-index: 9;
padding: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
position: absolute;
top: 5px;
left: 111px; / * for IE browsers * /
}
li.folder> ul {left: 140px;} / * for other browsers * / a {
padding: 2px;
border: 1px solid #FFF;
text-decoration: none;
width: 100%; / * for IE browsers * /
color: # 000;
font-weight: bold;
}
li> a {width: auto;} / * for other browsers * / li a {
width: 140px;
display: block;
} li a.submenu {
background-color: yellow;
} / * Links * /
a: hover {
border-color: gray;
background-color: # FF0000;
color: black;
}
li.folder a: hover {
background-color: # FF0000;
} / * Folders * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Page
-
2. Folder
- 2.1 Page
-
2.2 Folder
- 2.2.1 Page
- 2.2.2 Page
- 2.2.3 Page
- 2.3 Page
-
3. Folder
- 3.1 Page
- 3.2 Page
- 3.3 Page
- 4. Page
Step 3
You can add support for older versions of Internet Explorer browsers to this code - it is implemented using JavaScript (by Peter Nederlof). You need to download the file with the required code, for example, from this link - https://peterned.home.xs4all.nl/htc/csshover3.htc. It must be placed in the same folder as the main page. And in the description of the styles of the main page, add a link to it - you can place it directly after the opening style tag: / * for old IE browsers *
body {behavior: url ("csshover3.htc");}
