CSS menu child align

Question

Нужна помощь с выпадающим меню. Я сделал скрипку здесь: http://jsfiddle.net/bLL0rmbd/
Я хочу, чтобы выровнять подменю парения, как на картинке:

HTML:

<div id="wrapper"> 
    <div id="navbar"> 
     <ul> 
      <li><a href="#">Menu 1</a></li> 
      <li><a href="#">Menu 2</a></li> 
      <li><a href="#">Menu 3</a> 
       <ul> 
        <li><a href="#">SubMenu 1</a></li> 
        <li><a href="#">SubMenu 2</a></li> 
        <li><a href="#">SubMenu 3</a></li> 
       </ul>  
      </li>     
     </ul> 
    </div> 
</div> 

CSS:

<style> 
    #wrapper {padding: 0; margin: 30px} 

    #navbar ul { 
     padding: 0; 
     margin:0px; 
     list-style: none; 
     float:left; 
     background:#FF6; 
    } 
    #navbar ul li { display: inline-block; margin-right:20px;} 
    #navbar ul li a {text-decoration:none;} 
    #navbar ul ul { 
     position:absolute; 
     display: none; 
    } 
    #navbar ul ul li {display:block;} 

    #navbar ul li:hover > ul { 
     display: block; 
     background-color:#CFC; 
    } 
</style> 

Answer 1

я надеюсь, что это работает для вас.

 #navbar ul { 
padding: 0; 
    margin:0px; 
    list-style: none; 
float:left; 
    background:#FF6; 
    position: relative; 

     } 
    #navbar ul ul { 
position:absolute; 
display: none; 
    right: 0; 
top: 100%; 
    } 

Я только что применил 3 строки кода pos: относительный по ul и абсолютное значение в раскрывающемся списке.

Или вы можете установить pos: относительно #navbar li и изменить абсолютное значение для раскрывающегося списка для желаемого.

Приветствия

Link to fiddle

Answer 2

Добавить отрицательный margin-left в подменю, и он должен работать:

#navbar ul li:hover > ul 
{ display: block; 
    background-color:#CFC; 
    margin-left:-25px;            
} 

Обновлено скрипка: http://jsfiddle.net/bLL0rmbd/3/

Answer 3

Вам это CSS здесь

#navbar ul { 
    padding: 0; 
    margin:0px; 
    float:left; 
    background:#CFC; 
    position: relative; 
    } 

#navbar ul ul { 
    position:absolute; 
    display: none; 
    right: 0; 
    top: 100%; 
    } 

Check the fiddle here

Answer 4

Добавьте этот CSS стиль для вашего недавнего вопроса:

li:hover{background-color:#CFC;} 

#navbar ul li:hover > ul 
{ display: block; 
    background-color:#CFC; 
    margin-left:-25px;            
} 

Проверить эту скрипку: http://jsfiddle.net/bLL0rmbd/11/

Answer 5

try this demo

#navbar ul { 
padding: 0; 
margin:0px; 
list-style: none; 
float:left; 
background:#FF6; 
position: relative; 
} 
#navbar ul ul { 
position:absolute; 
display: none; 
right: 0; 
top: 100%; 
}