Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2011, 13:25
Аватар для Duda.Ml1986@gmail.com
Профессор
Отправить личное сообщение для Duda.Ml1986@gmail.com Посмотреть профиль Найти все сообщения от Duda.Ml1986@gmail.com
 
Регистрация: 01.09.2011
Сообщений: 263

Как прижать 3ий уровень меню к потолку?
Всем привет. Есть вот такое меню на сайте порше

и у меня возник такой вопрос, как сделать так чтобы все пункты 3его уровня прижимались к потолку?
Сам вижу такую возможност только в прописывании по ай ди margin-top для всех пунктов 3-его уровня, но чт ото мне подсказывает что есть способ куда проще.
Вот что я натворил (Сырое демо + исодники ) : http://duvanov.net/123.html

Код:
	 ul.porshe4
		 {
			  padding: 0;
              margin: 0;
              list-style: none;
		 }
		 ul.porshe4 li:last-child
		 {
			  border-bottom:1px solid #CCC;
		 }
		  ul.porshe4 li a
		  {
			   text-decoration:none;
			   display:block;
				height:35px;
				background-image:url(01boxster.gif);
				background-repeat:no-repeat;
				background-position:top;
				 
		  }
		 ul.porshe4 li
		 {
			
            background:url(hg.jpg);
			background-repeat:no-repeat;
			background-position:right;
            border:1px solid #CCC;
			border-bottom:none;
			border-left:none;
			border-right:none;
            display: block;
            width: 223px;
           
			height:47px;  
			
		 } 	
		 ul.porshe4 li ul
		 {
			 visibility: hidden;
			 position: absolute;
			 left: 223px;
			 top:-2px;
		 }
		 ul.porshe4 li ul li
		 {
			 height:20px;
			 background:url(fon.png);
			 
			
			 
		 }
		  ul.porshe4 li ul li a
		  {
			  background-image:none;
		  }
		 .porshe4 li:hover {
					position: relative;
				}
		.porshe4 li:hover > ul {
					visibility: visible;
				}
	 ul.porshe4 li ul li:hover
	 {
		 position:relative;
		 background-color:#FF0;
	 }
	 ul.porshe4 li ul li > div
	 {
		 visibility:hidden;
		 left:223px;
		  
		  position:inherit;
		  margin:0px;
		  padding:0px;
		  background:#000;
		  height:300px;
	 }
	 ul.porshe4 li ul li:hover >div
	 {
		 visibility:visible;
		
	 }
	 img
	 {
		 margin:0px;
	 }
<div style="  width:223px; background:url(fon.png); padding:10px;">      
                <ul class="porshe4" >
                <img src="logo.gif" width="223" height="128" />
          <li><a href="#"> </a> 
              <ul class="porsheone" >
                  <li><a href="#">Уровень 2 п 1</a><div style="margin-top:-150px;"><img src="logo.gif" width="223" height="128" /></div></li>
                  <li><a href="#">Уровень 2 п 2</a><div><img src="logo.gif" width="223" height="128" /></div></li>
                  <li><a href="#">Уровень 2 п 3</a><div><img src="logo.gif" width="223" height="128" /></div></li>
              </ul>
          </li>
          <li><a href="#"> </a>
             <ul class="porshetwo" >
                  <li><a href="#">Уровень 2 п 1</a><div><img src="logo.gif" width="223" height="128" /></div> </li>
                  <li><a href="#">Уровень 2 п 2</a><div><img src="logo.gif" width="223" height="128" /></div></li>
                  <li><a href="#">Уровень 2 п 3</a><div><img src="logo.gif" width="223" height="128" /></div></li>
              </ul>
          </li>
          <li><a href="#"> </a>
         	   <ul class="porshethree" >
                  <li><a href="#">Уровень 2 п 1</a><div><img src="logo.gif" width="223" height="128" /></div> </li>
                  <li><a href="#">Уровень 2 п 2</a><div><img src="logo.gif" width="223" height="128" /></div></li>
                  <li><a href="#">Уровень 2 п 3</a><div><img src="logo.gif" width="223" height="128" /></div></li>
              </ul>
          </li>
        </ul>
        </div>
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2011, 14:32
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>…</title>
    <style>
        nav {
            position: relative;
        }
        nav .preview {
            display: none;
            position: absolute;
            top: 0;
            left: 400px;
            width: 300px;
            height: 300px;
            background: #9C9;
        }
        nav ul, nav li {
            display: block;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        nav .menu a {
            display: block;
        }
        nav .menu li > a {
            width: 200px;
            background: #CFC;
        }
        nav .menu li:hover > a {
            background: #FFC;
        }
        nav .menu > li {
            zoom: 1;
        }
        nav .menu > li:after {
            display: block;
            overflow: hidden;
            clear: both;
            height: 0;
            content: ".";
        }
        nav .menu > li > a {
            float: left;
        }
        nav .sub-menu {
            display: none;
            float: left;
            height: 0;
        }
        nav .menu > li:hover .sub-menu {
            display: block;
        }
        nav .sub-menu > li:hover .preview {
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <ul class="menu">
            <li>
                <a href="#">menu item 1</a>
                <ul class="sub-menu">
                    <li>
                        <a href="#">sub menu item 1</a>
                        <div class="preview">preview 1</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 2</a>
                        <div class="preview">preview 2</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 3</a>
                        <div class="preview">preview 3</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 4</a>
                        <div class="preview">preview 4</div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">menu item 2</a>
                <ul class="sub-menu">
                    <li>
                        <a href="#">sub menu item 5</a>
                        <div class="preview">preview 5</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 6</a>
                        <div class="preview">preview 6</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 7</a>
                        <div class="preview">preview 7</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 8</a>
                        <div class="preview">preview 8</div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">menu item 3</a>
                <ul class="sub-menu">
                    <li>
                        <a href="#">sub menu item 9</a>
                        <div class="preview">preview 9</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 10</a>
                        <div class="preview">preview 10</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 11</a>
                        <div class="preview">preview 11</div>
                    </li>
                    <li>
                        <a href="#">sub menu item 12</a>
                        <div class="preview">preview 12</div>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2011, 14:38
Аватар для Duda.Ml1986@gmail.com
Профессор
Отправить личное сообщение для Duda.Ml1986@gmail.com Посмотреть профиль Найти все сообщения от Duda.Ml1986@gmail.com
 
Регистрация: 01.09.2011
Сообщений: 263

Супер, спасибо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Как "переключать" картинки в меню навигации? KirTer (X)HTML/CSS 5 24.06.2009 17:38
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Подскажите как сделать меню как на mail.ru? dakdak Элементы интерфейса 3 02.01.2009 19:43
Раскрывающееся меню, как переставить на другую сторону? Resager Events/DOM/Window 8 22.08.2008 21:56