в div-е "nav" (навигационный панель) есть субменю, которое скрыто при загрузке сайта(top:-9999em;) но она не выводится на экран при наведений мауса на элемент меню.
пишу:
1.
2.
3.
.nav_main_ul li a:hover .submenu{
top:150;
}
но не выводится. Всё правильно работало до того момента пока не начал применять flexbox.
HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="header">
<div id="nav">
<ul class="nav_main_ul">
<li><a href="">Main</a>
<ul class="submenu">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</li>
<li> <a href="#">News</a>
<ul class="submenu">
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
</ul>
</li>
<li><a href="#">About us</a>
<ul class="submenu">
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul class="submenu">
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
</ul>
</li>
<li><a href="#">Contacts</a>
<ul class="submenu">
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
</ul>
</li>
</ul>
</div>
<div id="wrapper">
<div id="sidebar"> </div>
<div id="content-wrapper">
<div id="content"> </div>
<div id="footer"> </div>
</div>
</div>
</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
* {
margin: 0;
padding: 0;
list-style:none;
}
html, body {
height: 100%;
}
#header{
left:0; top:0;
height:70px;
width:100%;
background:yellow;
}
#wrapper {
display: flex;
}
#content-wrapper {
display: flex;
flex-direction: column;
min-height: 1000px;
flex-grow: 1;
}
#sidebar {
width: 200px;
background-color:#00004d;
border: 1px solid black;
box-sizing: border-box;
}
#content {
background:white;
}
#footer {
background-color: yellow;
margin-top: auto;
min-height: 100px;
}
#nav{
left:0; top:120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul{
position:relative;
margin: 0px 0 0 400px;
}
#nav ul{
height:50px;
list-style:none;
background-color: #00004d;
}
#nav li{
display:block;
float:left;
font-family:Arial, sans-serif;
font-size:20px;
position:relative;
}
#nav li a{
color:#fff;
display:block;
height:50px;
padding:0 10px;
text-decoration:none;
line-height:50px;
}
.nav_main_ul li a:hover{
background:#000080;
}
.nav_main_ul li a:hover .submenu{
top:20em;
}
.submenu{
position:absolute;
width:250px;
top:-9999em;
}
.submenu li{
width:100%;
height:40px;
background:#00004d;
}
.submenu li a{
line-height:50px;
height:50px;
transition: background 0.5s;
}
.submenu li a:hover{
background-color:red;
}
li:hover .submenu li{
display:block;
z-index: 100;
}
