баг в выпадающем меню! html+css

@bilenko · Регистрация: 22.03.2016

Студворк — интернет-сервис помощи студентам

помогите ! сделал меню выпадающие ! в коде баг - наводишь на уровень где появляется меню и оно отображается (на картинке)! наводишь на уровень (текст) и открывается меню , так быть не должно

<!DOCTYPE html>
<html>
<title>OREH</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" rel="stylesheet" type="text/css">

</head>
<body background: url("../img/bg.png") #e6e9e9; max-height: 1000px ; class="crl" >
<div id="logo">
<a href="index.html">
<img src="logo1.png" style=" padding-left: 480px; padding-top: 30px">
</a>
</div>
<div>
<img src="down1.png" style="padding-left: 480px; margin-top: -5px">
</div>
<div class="" >
<img src="img/FOTO.png" style="position:absolute;margin-top: -40px; margin-left: 617px">
<img src="img/tie.png" style="position:absolute;margin-top: -40px; margin-left: 700px">
<img src="img/kalendar.png" style="position:absolute;margin-top: -40px; margin-left: 823px">
<img src="img/dollar.png" style="position:absolute;margin-top: -40px; margin-left: 965px">
<img src="img/file.png" style="position:absolute;margin-top: -40px; margin-left: 1055px">
<img src="img/phone.png" style="position:absolute;margin-top: -40px; margin-left: 1145px; ">
</div>
<div><li style="position:absolute;margin-top: -33px; margin-left: 650px; ">
<a href="foto.html"><font size="4.5" color="#61839d" face="Impact">ФОТО</font></a>
</li></div>
<div><li style="position:absolute;margin-top: -33px; margin-left: 733px; ">
<a href="personal.html"><font size="4.5" color="#61839d" face="Impact">ПЕРСОНАЛ</font></a>
</li></div>
<div><li style="position:absolute;margin-top: -33px; margin-left: 856px; ">
<a href="time.html"><font size="4.5" color="#61839d" face="Impact">РАСПИСАНИЕ</font></a>
</li></div>
<div><li style="position:absolute;margin-top: -33px; margin-left: 1000px; ">
<a href="price.html"><font size="4.5" color="#61839d" face="Impact">ПРАЙС</font></a>
</li></div>
<div><li style="position:absolute;margin-top: -33px; margin-left: 1175px; ">
<a href="contact.html"><font size="4.5" color="#61839d" face="Impact">КОНТАКТЫ</font></a>
</li>
</div>
<div class="spisok1">
<div style="height: 18px; ">
<span><a href="#"><font style=" position:absolute;margin-top: -33px; left: 1085px" size="4.5"
color="#61839d" face="Impact">УСЛУГИ</font></a></span>
</div>
<div class="menu" style="width: 0px; height: 0px;">
<ul style=" left: 1055px; margin-top: -25px; width: 78px; height: 57px; position: absolute ; ">
<li style="outline: solid black 0.5px" id="vipad3"><a href="#">EXAMPLE</a></li>
<li style="outline: solid black 0.5px" id="vipad2"><a href="#">EXAMPLE</a></li>
<li style="outline: solid black 0.5px" id="vipad3"><a href="#">EXAMPLE</a></li>
</ul>
</div>
</div>
<div>
<img src="kek.png" border="0" style="position:absolute; left: 480px; bottom: 0px;" />
</div>
</body>
</html>

* {
margin: 0;
padding: 0;
outline: none;
}
body {
background: url("../img/bg.png") #e6e9e9

}
a {
text-decoration: none;
}
#aligne {
width: 1000px;
margin:35px auto;
background: #94d3ff
}
li {
list-style-type: none
}

.spisok1 ul {
/width: 78px; height: 53px;
display: none;
visibility: hidden*/
left: -9999px;
}
.spisok1:hover ul {
visibility: visible;
display: block;
position:absolute;
}
.menu ul {
width: 70px; height: 50px;
background: url("../img/masaz.png");
padding-left: 1050
height:57px;
width: 78;
padding: 0px 15px 2px;

}

@AmateR62 · 23.03.2016, 09:35

Да, меню у вас "веселое". Сами придумали? По вашему меню даже прокомментировать что то трудно. Попробуйте реализовать такую структуру:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="menu">
  <li><a>Пункт 1</a></li>
  <li><a>Пункт 2</a></li>
  <li>
     <a href="#">Пункт 3</a>
     <ul id="submenu">
       <li><a>Пункт 3.1</a></li>
       <li><a>Пункт 3.2</a></li>
       <li><a>Пункт 3.3</a></li>
     </ul>
  </li>
  <li><a>Пункт 4</a></li>
</ul>

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
ul {
  list-style: none;
}
 
#menu {
  position: relative;
  
  width: 1000px;
  height: 40px;
  line-height: 40px;
  
  margin: 0 auto;
  padding: 0; 
  
  background-color: #94d3ff;
}
 
#menu > li {
  position: relative;
  float: left;
  width: 25%;
  text-align: center;
}
 
#menu li:hover ul {
  display: block;
}
 
#menu > li ul {
  position: absolute;
  display: none;
  
  z-index: 99999;
  left: 0;
  top: 100%;
  background: #BA1820;
  text-align: left;
  width: 100%;
  padding: 0;
}
 
#menu > li ul a {
  margin-left: 10px;
}

Песочница http://codepen.io/AmateR/pen/BKRQBY

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@bilenko 0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 1

	баг в выпадающем меню! html+css 22.03.2016, 21:33. Показов 684. Ответов 1 Метки нет (Все метки) помогите ! сделал меню выпадающие ! в коде баг - наводишь на уровень где появляется меню и оно отображается (на картинке)! наводишь на уровень (текст) и открывается меню , так быть не должно <!DOCTYPE html> <html> <title>OREH</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/main.css" rel="stylesheet" type="text/css"> </head> <body background: url("../img/bg.png") #e6e9e9; max-height: 1000px ; class="crl" > <div id="logo"> <a href="index.html"> <img src="logo1.png" style=" padding-left: 480px; padding-top: 30px"> </a> </div> <div> <img src="down1.png" style="padding-left: 480px; margin-top: -5px"> </div> <div class="" > <img src="img/FOTO.png" style="position:absolute;margin-top: -40px; margin-left: 617px"> <img src="img/tie.png" style="position:absolute;margin-top: -40px; margin-left: 700px"> <img src="img/kalendar.png" style="position:absolute;margin-top: -40px; margin-left: 823px"> <img src="img/dollar.png" style="position:absolute;margin-top: -40px; margin-left: 965px"> <img src="img/file.png" style="position:absolute;margin-top: -40px; margin-left: 1055px"> <img src="img/phone.png" style="position:absolute;margin-top: -40px; margin-left: 1145px; "> </div> <div><li style="position:absolute;margin-top: -33px; margin-left: 650px; "> <a href="foto.html"><font size="4.5" color="#61839d" face="Impact">ФОТО</font></a> </li></div> <div><li style="position:absolute;margin-top: -33px; margin-left: 733px; "> <a href="personal.html"><font size="4.5" color="#61839d" face="Impact">ПЕРСОНАЛ</font></a> </li></div> <div><li style="position:absolute;margin-top: -33px; margin-left: 856px; "> <a href="time.html"><font size="4.5" color="#61839d" face="Impact">РАСПИСАНИЕ</font></a> </li></div> <div><li style="position:absolute;margin-top: -33px; margin-left: 1000px; "> <a href="price.html"><font size="4.5" color="#61839d" face="Impact">ПРАЙС</font></a> </li></div> <div><li style="position:absolute;margin-top: -33px; margin-left: 1175px; "> <a href="contact.html"><font size="4.5" color="#61839d" face="Impact">КОНТАКТЫ</font></a> </li> </div> <div class="spisok1"> <div style="height: 18px; "> <span><a href="#"><font style=" position:absolute;margin-top: -33px; left: 1085px" size="4.5" color="#61839d" face="Impact">УСЛУГИ</font></a></span> </div> <div class="menu" style="width: 0px; height: 0px;"> <ul style=" left: 1055px; margin-top: -25px; width: 78px; height: 57px; position: absolute ; "> <li style="outline: solid black 0.5px" id="vipad3"><a href="#">EXAMPLE</a></li> <li style="outline: solid black 0.5px" id="vipad2"><a href="#">EXAMPLE</a></li> <li style="outline: solid black 0.5px" id="vipad3"><a href="#">EXAMPLE</a></li> </ul> </div> </div> <div> <img src="kek.png" border="0" style="position:absolute; left: 480px; bottom: 0px;" /> </div> </body> </html> * { margin: 0; padding: 0; outline: none; } body { background: url("../img/bg.png") #e6e9e9 } a { text-decoration: none; } #aligne { width: 1000px; margin:35px auto; background: #94d3ff } li { list-style-type: none } .spisok1 ul { /width: 78px; height: 53px; display: none; visibility: hidden*/ left: -9999px; } .spisok1:hover ul { visibility: visible; display: block; position:absolute; } .menu ul { width: 70px; height: 50px; background: url("../img/masaz.png"); padding-left: 1050 height:57px; width: 78; padding: 0px 15px 2px; } Миниатюры 0