Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выпадающее меню неправильно выпадает (https://javascript.ru/forum/jquery/7780-vypadayushhee-menyu-nepravilno-vypadaet.html)

adelante 19.02.2010 03:57

Выпадающее меню неправильно выпадает
 
Есть горизонтальное меню, при наведении на ссылку которого, выпадающее из него меню в виде строчки ссылок должно "выпадать" чуть выше первого. На практике имеем косяк в виде увеличения "родительского" li до величины "дочернего", что рушит всю разметку и ещё парочку неприятных "следствий".

Думаю, я что-то неправильно пишу в css, но что -- не понимаю.

Страница: http://romaadelante.ru/t/test.html

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title>
   <script type="text/javascript" src="js/jquery.js"></script>
 
	
	<script language="javascript">

	$(document).ready(function(){
		
	  $('.navmenu ul li').hover(
        function() {
        	
           $(this).find('ul').slideDown();
        },
        function() {
                  
            $(this).find('ul').slideUp('fast');
        }
    );
    
	});
	
</script>
<style type="text/css">
	

.navmenu ul {

	padding: 0;
	margin: 0;
	display:inline;
	list-style: none;
	
}

.navmenu li {

	display: inline;
	margin:0;
	padding:0;
	float:left;
	

}

.navmenu ul ul{

	position:relative;
	top:-50px;
	padding:0;
	margin:0;
	display: inline;
}	 
	 
</style> 
   
</head>
  
<body>
 	<div class="navmenu" style="position:absolute;top:100px;left:100px;">
            <ul>
              <li> <a href="#">toplink1</a>
                <ul style="display: none;">
                  <li><a href="#">link1</a> / <a href="#">link2</a> / <a href="#">link3</a></li>
                </ul>/
              </li>
              <li> <a href="#">toplink2</a>
                <ul style="display: none;">
                      <li><a href="#">link21</a> / <a href="#">link22</a> / <a href="#">link23</a></li>
                </ul>/
              </li>
             	
   </div>
  
  
 </body>
 </html>

sysya 19.02.2010 08:05

Надо размеры задать, display: none; вообще можно в стилях прописать. А увеличивается изза position: relative; в .navmenu ul ul
А вот примеры http://www.coolwebmasters.com/menu-a...evel-menu.html изучайте

adelante 19.02.2010 13:49

Скажите, размеры чего конкретно надо задать? li первого уровня или второго? или ul?

sysya 19.02.2010 15:38

Цитата:

Сообщение от adelante (Сообщение 45410)
Скажите, размеры чего конкретно надо задать? li первого уровня или второго? или ul?

Размер тут пока не самое главное. Не жмитесь добавьте стили для дива navmenu, размеры и тудым сюдым... Дальше закройте тег ul. Отредактируйте тестовую страницу, чтоб можно было посмотреть её обновлённую.

adelante 20.02.2010 17:53

Стиль для слоя сделал, добавил бэкграунды для наглядности и размеры, ul закрыл. Что дальше? ;)

adelante 20.02.2010 17:55

Ссылка та же: http://romaadelante.ru/t/test.html

sysya 20.02.2010 19:53

Далее position:absolute; для .navmenu ul и .navmenu ul ul
Должно лучше работать

Urfin 21.02.2010 03:29

Родительской li-шке нужно задавать position:relative;,
a дочерней ul-ке position:absolute.

adelante 21.02.2010 17:01

вроде заработало всё, спасибо.

adelante 21.02.2010 17:53

ан нет, не всё. если поднять меню второго уровня повыше, пикселей на 50, то очень неудобно -- пока мышь до него дойдет, оно исчезает.

это нужно увеличить высоту его (родительского высоту увеличивать нежелательно) или как ещё можно?


Часовой пояс GMT +3, время: 20:09.