Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / не могу вывести субменю горизонтального меню на экран / 1 сообщений из 1, страница 1 из 1
09.06.2018, 18:22
    #39659054
bastibubu
bastibubu
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
не могу вывести субменю горизонтального меню на экран
в div-е "nav" (навигационный панель) есть субменю, которое скрыто при загрузке сайта(top:-9999em;) но она не выводится на экран при наведений мауса на элемент меню.

пишу:
Код: css
1.
2.
3.
   .nav_main_ul li a:hover .submenu{
         top:150;
 }


но не выводится. Всё правильно работало до того момента пока не начал применять flexbox.


HTML

Код: 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>



CSS

Код: css
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;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / не могу вывести субменю горизонтального меню на экран / 1 сообщений из 1, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 256ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444140]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 170ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 28ms
get tp. blocked users:
 2ms
others: 13ms
total:  256ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]