Навигация второго уровня вниз

Question

Как показано на рисунке ниже подменю1, белое заполнение слева находится под подменю и не падает на том же уровне, что и подменю. Я ошибаюсь в CSS. Может кому-то помочь. Благодарю.

IMG http://i42.tinypic.com/2mms5dz.png

Код ниже

 <div class="nav" style="height:40px;"> 
        <ul> 
         <li style="width: 65px; height: 40px;"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 85px; height: 40px"><a href="~/" runat="server">menu</a> 
          <ul> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
          </ul> 
         </li> 
         <li style="width: 125px; height: 40px"><a href="#" runat="server">menu</a> 
          <ul> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu</a> 
           <ul> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
            <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
            <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
           </ul> 
           </li> 
          </ul>        
         </li> 
         <li style="width: 95px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 65px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 110px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 145px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 180px; height: 40px"><a href="~/" runat="server">menu</a></li></ul>      
        </div> 


CSS: 

    .nav ul, li 
    { 
     margin: 0; 
     padding: 0;   
     font-family: Tahoma; 
     font-size: 10pt; 
     text-decoration: none; 
     line-height: 40px; 
     list-style :none; 
    }  

    .nav ul 
    { 
     position: relative; 
     text-align : center; 
    } 


    .nav ul li 
    { 
     float: left; 
     list-style: none; 
     border-right: gray thin solid; 
     border-bottom: gray thin solid; 
     background-image: url(Images/Icons/top-nav-back.jpg); 
     display:inline-block;    
    } 

    .nav ul li ul 
    { 
     display: none; 
     background-color: #F1F1F1; 
     z-index:1002; 
    } 

.nav ul li:hover 
    { 
    background-image: url(Images/Icons/nav-back.jpg); 
    } 

.nav ul li:hover ul 
    { 
    display: block; 
    position: absolute; 
    } 

.nav ul li:hover ul li 
    { 
    clear: left; 
    } 

.nav ul li ul li ul li 
    { 
    display: none; 
    background-color: #F1F1F1; 
    z-index:1002; 
    } 

.nav ul li ul li:hover ul li 
    { 
    display: block; 
    position: relative; 
    left:100%; 
    top:0;   
    }  

.nav a 
    { 
    color: #000000; 
    display:block;  
    } 

.nav a:hover 
    { 
    color: white; 
    }  

Answer 1

без переписывания ваших изменений CSS:

.nav ul li ul li:hover ul li { 
    display: block; 
    position: relative; 
    left:100%; 
    top:0;   
} 

для:

.nav ul li ul li:hover ul { 
    display: block; 
    position: relative; 
    left:100%; 
    padding:0; 
    margin-top: -40px; 
} 
.nav ul li ul li:hover ul li { 
    display: block; 
} 

Answer 2

Вам нужно добавить top:0 к вашему стилю для вложенных элементов ул и сделать ваши Lī элементы position:relative. Это переместит ul в верхнюю часть li, которая ее содержит.

Вы также можете уменьшить свой код css с помощью селектора direct-child. Если вы сделаете ваши ул элементы получить следующее:

.nav ul li>ul {display:block} 

Он будет показывать только ЛУ непосредственно после того, как Ли вы парить на, а не дальнейшие меню.

Answer 3

См this fiddle (третий пункт меню).

Вы можете сделать это ammending код так:

.nav ul li ul 
{ 
    ... 
    height:0px; 
    ... 
} 

.nav ul li ul li:hover ul li 
{ 
    ... 
    top:-40px; 
    ... 
}