Выпадающий элемент меню перемещает другие элементы вправо

Question

Я пытаюсь создать это основное меню с нуля, но у меня есть небольшая проблема: всякий раз, когда я нахожу меню «Категории» (например, выпадающий элемент) , элементы справа автоматически перемещаются еще дальше.

HTML:

<div id = "navbar"> 
    <ul> 
     <li>News</li> 
     <li>News</li> 
     <li>News</li> 
     <li>News</li> 
     <li>Market</li> 
     <li class = "navbar_multiple">&nbsp;&nbsp;Categories 
      <ul> 
       <li>Travel</li> 
       <li>Entertainment</li> 
       <li>Fun</li> 
      </ul> 
     </li> 
     <li>Fun</li> 

    </ul> 
</div> 

CSS: видимо слишком долго - но включены в jsFiddle ниже

Вот jsFiddle: http://jsfiddle.net/ktvde9qo/4/

Я хочу сделать так, чтобы, когда пользователь парит над элемент «Категории», он создаст выпадающее меню под ним, но сохранит его измерение так, как было. Как я могу это сделать?

Answer 1

Я хотел бы попробовать следующий подход, используя следующий CSS:

#navbar > ul > li 
{ 
float: left; 
margin-left: 21px; 
font-family: 'Open Sans', sans-serif; 
font-size: 14px; 
text-transform: uppercase; 
color: #fff; 
border-top: 2px solid transparent; 
padding-top: 8px; 
    position: relative; 
    line-height: 1.5; 
    height: 24px; 
} 

#navbar > ul > li > ul { 
list-style: none; 
position: absolute; /* change this */ 
margin-left: 0px; 
padding-left: 0px; 
    margin-top: -5px; /* this can control the whitespace... */ 
} 

Добавить position: relative к элементам li в вашей основной навигации и добавьте значения высоты и высоты строки по мере необходимости.

Для второй навигации, чтобы изменить положение absolute на ul и настройки верхнее поле, чтобы закрыть какие-либо пробелы.

Смотрите демы на: http://jsfiddle.net/audetwebdesign/adw5hp84/

, используя абсолютное позиционирование вторичного меню, вы берете их из потока главного меню и вам не придется беспокоиться о том, что длина этикетки будет влиять основной макет навигации.

Обратите внимание, что, возможно, необходимо выполнить более подробную работу по стилизации интервала между ссылками и т. Д.

Answer 2

Избавиться от width в #navbar > ul > li.navbar_multiple:hover > ul > li:

#navbar > ul > li.navbar_multiple:hover > ul > li { 
    display:block; 
    height:20px; 
    padding-left: 10px; 
    margin-left: 0px; 
} 

Обновлено вашей скрипкой: http://jsfiddle.net/ktvde9qo/11/

EDIT: Для того, чтобы сделать все пункты подменю имеют одинаковую ширину, просто удалите (или закомментируйте) в следующих строках, в качестве альтернативы изменить их для ваших нужд:

#navbar > ul > li > ul > li:first-child { 
    margin-top: 8px; 
    padding-top: 9px; 
    width: 100%; 
} 

Fiddle обновление: http://jsfiddle.net/ktvde9qo/13/

EDIT 2: Для того, чтобы пункты подменю больше, чем основной пункт меню, просто добавьте длинную ширину в пункт подменю и укорочением к основным:

подменю пункт :

#navbar > ul > li > ul > li { 
    padding-left: 0px; 
    display: none; 
    text-transform: none; 
    font-size: 12px; 
    padding: 4px 4px 8px 6px; 
    padding-top: 10px; 
    border-top: 1px solid #39718e; 
    background-color: #316885; 
    width:200px; /* changed this */ 
} 

Главное меню:

#navbar > ul > li.navbar_multiple { 
    margin-left: 13px; 
    width:100px; /* changed this */ 
} 

Окончательное обновление скрипку: http://jsfiddle.net/ktvde9qo/18/

Answer 3

Вы можете попробовать?

Если содержимое будет добавить в выпадающий список, как развлечение Entertaiment Ежедневные программы и это будут представлены работы

#navbar > ul > li > ul{ 
width:150px; 
} 

Answer 4

Я думаю, что вы ищете что-то вроде этого:

Css

#navbar { 
height: 35px; 
background-color: #4c9fcd; 
position: relative; 
top: 0px; 
z-index: 1001; 
} 

#navbar > ul { 
list-style: none; 
text-align: left; 
padding-left: 25px; 
margin-top: 0px; 
} 

#navbar > ul > li 
{ 
float: left; 
margin-left: 21px; 
font-family: 'Open Sans', sans-serif; 
font-size: 14px; 
text-transform: uppercase; 
color: #fff; 
border-top: 2px solid transparent; 
padding-top: 8px; 
} 

#navbar > ul > li:first-child { 
margin-left: 0px; 
} 

#navbar > ul > li.navbar_multiple { 
margin-left: 13px; 
//padding-left: 5px; 
} 

#navbar > ul > li:hover { 
border-top: 2px solid white; 
cursor: pointer; 
//background-color: #316885; 
} 

#navbar > ul > li > ul { 
list-style: none; 
position: relative; 
margin-left: 0px; 
padding-left: 0px; 
} 

#navbar > ul > li > ul > li { 
padding-left: 0px; 
display: none; 
text-transform: none; 
font-size: 12px; 
padding: 4px 4px 8px 6px; 
padding-top: 10px; 
border-top: 1px solid #39718e; 
background-color: #316885; 
} 

#navbar > ul > li > ul > li:first-child { 
margin-top: 8px; 
padding-top: 9px 
} 

#navbar > ul > li > ul > li:last-child { 
border-bottom: 3px solid #4c9fcd; 
} 

#navbar > ul > li.navbar_multiple:hover > ul > li { 
display: block; 
height:20px; 
padding-left: 10px; 
margin-left: 0px; 
} 

#navbar > ul > li.navbar_multiple > ul > li:hover { 
background-color: #0d3f5a; 
} 

#navbar > ul > li.navbar_multiple:hover { 
background-color: #316885; 
padding-right: 0px !important; 
} 

fiddle