CeskyFrenchGermanItalianPortugueseTurkceSpanish

What do you think the average
05/16/2016
How to contact children plaid
05/16/2016

How to make a drop-down menu

How to make a drop-down menu

Beautiful, you can drop down menu to create not only in JavaScript, but also using the HTML standard tags.

This method of creating a drop-down menu will be useful to those who are just starting their first steps in the creation of sites and wants to simplify the job of creating the menu pages.

instructions

1

In the HTML code so the menu is an unnumberedlist with nested lists inside. To get started, create a style.css file and copy the following CSS-code necessary for registration, and menu format:

#nav, #nav ul {
list-style: none-
margin: 0-
padding: 0-
border: 1px solid # 000-
background: # 515151-
float: left-
width: 100% -
}
#nav li {
float: left-
position: relative-
background-color: # 003366-
background: none-
}
#nav li ul {
display: none-
position: absolute-
background-color: # 003366-
padding: 8px 0-
width: 138px-
}

2

Now we need to complement the menu items decor. Determine for their width and height, remove the underscore line, set a clear width of each link, and enter the desired color backgrounds.

3

All of these changes add the following code to the file:

#nav a {
color: # fff-
text-decoration: none-
display: block-
width: 120px-
padding: 4px 10px-
background-color: # 003366 repeat-y right-
}
#nav a: hover {
color: # 000-
background-color: # 0033FF-
}
#nav li: hover {
background-color: # 333333-
}

Then add the following piece of code to the final menu improvements:

#nav li: hover li ul {
display: none-
width: 138px-
top: -9px-
left: 133px-
}
#nav li: hover li: hover ul {
display: block-
}

4

In an embodiment of the common HTML unordered list menu looks like this? based on it, and create a menu, which was mentioned in the article.

& Lt-ul & gt-
& Lt-li & gt- & lt-a href = »# null» & gt-Home & lt- / a & gt- & lt- / li & gt-
& Lt-li & gt- & lt-a href = »# null» & gt-Directory & lt- / a & gt-
& Lt-ul & gt-
& Lt-li & gt- & lt-a href = »# null» & gt-All products & lt- / a & gt-
& Lt-ul & gt-
& Lt-li & gt- & lt-a href = »# null» & gt-Date & lt- / a & gt- & lt- / li & gt-
& Lt-li & gt- & lt-a href = »# null» & gt-Manufacturers & lt- / a & gt- & lt- / li & gt-
& Lt-li & gt- & lt-a href = »# null» & gt-Other & lt- / a & gt- & lt- / li & gt-
& Lt- / ul & gt-
& Lt- / li & gt-
& Lt- / ul & gt-
& Lt- / li & gt-
...
& Lt- / ul & gt-

Comments are closed.