Навигационное меню не сбрасывается правильно

Question

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

Спасибо!

EDIT: Я сузил его до того, что CSS-таблица стилей вызывает проблему. Я почти уверен, что это основная таблица стилей в этот момент (style.css).

Answer 1

Итак, в вашем случае будет проще объяснить, как это сделать, а не пытаться разобрать ваш сайт и посмотреть, что не так (быстрые уведомления были: ul не установлено и, похоже,).

Вот ваша структура перестроена (имена классов различны, и т.д., но его же формат):

<nav> 
    <ul> 
    <li class="link"> 
     <a href="#">Hover over Me</a> 
     <ul class="subnav"> 
      <li>subnav 1</li> 
      <li>subnav 1</li> 
      <li>subnav 1</li> 
     </ul> 
    </li> 
</ul> 
</nav> 

Что вам нужно сделать, это стиль обертка в subnav, которая является ul. Вам необходимо установить его на position: absolute и display: none. Позиция абсолютная будет удалить его из потока документа, так что он не будет влиять на остальную часть ваших пунктов навигационных, когда вы показываете его:

ul.subnav{ 
    display: none; 
    position: absolute; 
    background: blue; 
    color: #FFF; 
} 

Но absolute изображений по своей природе относительно документа, с тем, чтобы содержать эту subnav вам нужно установить его родителей (li) в position: relative так, что он содержит этот элемент:

li.link{ 
    position: relative; 
} 

Наконец вы можете показать на :hover состояние родителя ваше скрытое меню:

.link:hover .subnav{ 
    display:block; 
} 

FIDDLE