Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2010, 03:57
Аспирант
Отправить личное сообщение для adelante Посмотреть профиль Найти все сообщения от adelante
 
Регистрация: 26.01.2010
Сообщений: 44

Выпадающее меню неправильно выпадает
Есть горизонтальное меню, при наведении на ссылку которого, выпадающее из него меню в виде строчки ссылок должно "выпадать" чуть выше первого. На практике имеем косяк в виде увеличения "родительского" 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>

Последний раз редактировалось adelante, 19.02.2010 в 05:51.
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2010, 08:05
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

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

Последний раз редактировалось sysya, 19.02.2010 в 08:44. Причина: изменить
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2010, 13:49
Аспирант
Отправить личное сообщение для adelante Посмотреть профиль Найти все сообщения от adelante
 
Регистрация: 26.01.2010
Сообщений: 44

Скажите, размеры чего конкретно надо задать? li первого уровня или второго? или ul?
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2010, 15:38
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Сообщение от adelante Посмотреть сообщение
Скажите, размеры чего конкретно надо задать? li первого уровня или второго? или ul?
Размер тут пока не самое главное. Не жмитесь добавьте стили для дива navmenu, размеры и тудым сюдым... Дальше закройте тег ul. Отредактируйте тестовую страницу, чтоб можно было посмотреть её обновлённую.
__________________
Нет предела совершенству...
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2010, 17:53
Аспирант
Отправить личное сообщение для adelante Посмотреть профиль Найти все сообщения от adelante
 
Регистрация: 26.01.2010
Сообщений: 44

Стиль для слоя сделал, добавил бэкграунды для наглядности и размеры, ul закрыл. Что дальше?
Ответить с цитированием
  #6 (permalink)  
Старый 20.02.2010, 17:55
Аспирант
Отправить личное сообщение для adelante Посмотреть профиль Найти все сообщения от adelante
 
Регистрация: 26.01.2010
Сообщений: 44

Ссылка та же: http://romaadelante.ru/t/test.html
Ответить с цитированием
  #7 (permalink)  
Старый 20.02.2010, 19:53
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Далее position:absolute; для .navmenu ul и .navmenu ul ul
Должно лучше работать
__________________
Нет предела совершенству...
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2010, 03:29
Аспирант
Отправить личное сообщение для Urfin Посмотреть профиль Найти все сообщения от Urfin
 
Регистрация: 22.07.2009
Сообщений: 85

Родительской li-шке нужно задавать position:relative;,
a дочерней ul-ке position:absolute.
Ответить с цитированием
  #9 (permalink)  
Старый 21.02.2010, 17:01
Аспирант
Отправить личное сообщение для adelante Посмотреть профиль Найти все сообщения от adelante
 
Регистрация: 26.01.2010
Сообщений: 44

вроде заработало всё, спасибо.
Ответить с цитированием
  #10 (permalink)  
Старый 21.02.2010, 17:53
Аспирант
Отправить личное сообщение для adelante Посмотреть профиль Найти все сообщения от adelante
 
Регистрация: 26.01.2010
Сообщений: 44

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Jquery выпадающее меню Коля jQuery 4 26.01.2011 17:00
Выпадающее меню theo_ Общие вопросы Javascript 18 05.10.2009 11:34
Выпадающее меню ! Подскажите пожалуйста 123 Общие вопросы Javascript 0 08.01.2009 22:56
Сделать выпадающее меню по аналогу SerG Общие вопросы Javascript 1 05.11.2008 15:05
выпадающее меню AniStark Общие вопросы Javascript 12 11.05.2008 20:24