Greetings!
Tell me how to make a menu drop-down menu, preferably on CSS, with such a feature: The menu is removed not only by clicking on the link, but also to any space outside this menu. Example: Such menus are often found on Yandex and Google.
Answer 1, Authority 100%
Running menu by clicking
html code
& lt; a class = "Main-Item" href = "javascript: void (0);" tabindex = "1" & gt; open the submenu & lt; / a & gt;
& lt; ul class = "sub-menu" & gt;
& lt; li & gt; & lt; a href = "# 1" & gt; subparagraph 1 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 2" & gt; subparagraph 2 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 3" & gt; subparagraph 3 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
CSS code
.Sub-Menu.
{
Display: None;
}
.main-item: Focus ~ .sub-menu,
.main-item: Active ~ .sub-Menu,
.Sub-Menu: Hover
{
Display: Block;
}
Answer 2, Authority 50%
I once implemented a similar menu. It makes sense quite simple: we make the usual navigation menu. Once the menu falling – we make the first and second level (for example). The first level is always displayed, but the second is hiding using Display: None; . When you hover on a specific first-level menu item via a pseudo-class : Hover displays the links of the second level.
Here I properly set positioning for the second level. It is also very important (this is the problem forced me to suffer for a long time) to set for item, when you hover on which the submenu will appear, Padding more. In order to increase the reaction area to enlarge.
For greater clarity, my HTML code (simplified):
& lt;! doctype HTML Public "- // W3C / DTD // Xthml 1.0 Transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
& lt; html xmlns = "http://www.w3.org/1999/xhtm1" XML: Lang = "en" lang = "ru" & gt;
& lt; Head & gt;
& lt; Title & gt; & lt; / title & gt;
& lt; Link REL = "Stylesheet" Type = "text / css" href = "style.css" / & gt;
& lt; / Head & gt;
& lt; Body & gt;
& lt; ul id = "main_nav" & gt;
& lt; li & gt; & lt; a href = "#" & gt; About company & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; services & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "#" & gt; all types of ratings & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; autoexpertise & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; auto insurance & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Legal services & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt; & lt;! - End Sub_nav - & gt;
& lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; tariffs & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; news & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; contacts & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt; & lt;! - End Main_NAV - & gt;
& lt; / body & gt;
& lt; / html & gt;
and CSS code (also simplified):
# main_nav {
Position: relative;
Top: 15px;
margin-top: 14px;
margin-left: 280px;
}
#Main_Nav Li {
Display: INLINE;
Padding: 0 8px;
Border-Left: 1px dotted # 8B6619;
Position: relative;
z-index: 2;
}
#Main_Nav Li: first-child, #main_nav ul li {
Border-left: none;
}
#Main_Nav ul {
Display: None;
Position: Absolute;
Top: 19px;
left: 0;
z-index: 1;
width: 155px;
}
#Main_Nav Li A, #Main_Nav Li UL Li A {
Color: # 8B6619;
Font-Family: "Times New Roman", Serif;
Font-Size: 0.9em;
Font-Weight: Bold;
Text-Decoration: None;
Outline: none;
Padding-Bottom: 17px;
}
#Main_Nav Li A: Hover,
#Main_Nav Li Ul A: Hover {
Color: Black;
}
/ * -------------- Submenu -------------- * /
#Main_Nav Li: Hover UL {
Display: Block;
}
That’s all. Thanks for the voices!)
Answer 3, Authority 33%
& lt;! doctype HTML PUBLIC "- // W3C // DTD HTML 4.01 // en" "http: / /www.w3.org/tr/html4/strict.dtd">
& lt; html & gt;
& lt; Head & gt;
& lt; script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.4.3/jquery.min.js" & gt; & lt; / script & gt;
& lt; script type = "text / javascript" & gt;
$ (document) .ready (function ()
{
$ ('# Nav Li'). Hover (
Function () {
$ ('ul', this) .slidedown (100);
},
Function () {
$ ('ul', this) .slideUp (100);
}
);
});
& lt; / script & gt;
& lt; style Type = "text / css" & gt;
#NAV {
margin: 0;
Padding: 0;
List-Style: None;
}
#Nav Li {
Float: Left;
Display: Block;
width: 100px;
Background: #CCC;
Position: relative;
z-index: 500;
margin: 0 1px;
}
#NAV Li A {
Display: Block;
Padding: 8px 5px 0 5px;
font-weight: 700;
Height: 23px;
Text-Decoration: None;
Color: #FFF;
Text-Align: Center;
Color: # 333;
}
#NAV Li A: Hover {
Color: #FFF;
}
#Nav A.Selected {
Color: # F00;
}
#Nav ul {
Position: Absolute;
left: 0;
Display: None;
margin: 0 0 -1px;
Padding: 0;
List-Style: None;
}
#NAV UL Li {
width: 100px;
Float: Left;
Border-Top: 1px Solid #FFF;
}
#NAV UL A {
Display: Block;
Height: 15px;
Padding: 8px 5px;
Color: # 666;
}
#NAV UL A: HOVER {
Text-Decoration: Underline;
}
* HTML #Nav UL {
margin: 0 0 0 -2px;
}
& lt; / style & gt;
& lt; / Head & gt;
& lt; Body & gt;
& lt; ul id = "nav" & gt;
& lt; li & gt; & lt; a href = "#" & gt; parent 01 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" class = "selected" & gt; parent 02 & gt; & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "#" & gt; Item 01 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" class = "selected" & gt; item 02 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Item 03 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; parent 03 & gt; & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "#" & gt; Item 04 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Item 05 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Item 06 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Item 07 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; parent 04 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;