Плавающая моя панель навигации вниз

-1

У меня возникли проблемы с подключением навигационной панели. Вот желаемый результат для моей навигационной панели: example.Плавающая моя панель навигации вниз

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

Однако второй уровень моей навигационной панели просто плавает. Как я могу его стилизовать?

Это мой HTML:

<div id="menubar"> 
    <ul id="menu"> 
     <li class="selected"><a href="">Home</a></li> 
     <li><a href="">Volunteers</a> 
     <ul> 
     <li><a href="">Add</a></li> 
     <li><a href="">View</a></li> 
     <li><a href="">Update</a></li> 
     </ul> 
     </li> 
     <li><a href="">Packaging Session</a> 
     <ul> 
     <li><a href="">Add</a></li> 
     <li><a href="">View</a></li> 
     <li><a href="">Update</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div>

И это мой CSS:

#menubar 
{ width: 900px; 
    height: 72px; 
    padding: 0; 
    background: #1293EE;} 

ul#menu, ul#menu li 
{ float: left; 
    margin: 0; 
    padding: 0;} 

ul#menu li 
{ list-style: none;} 

ul#menu li a 
{ letter-spacing: 0.1em; 
    font: normal 100% arial, sans-serif; 
    display: block; 
    float: left; 
    height: 37px; 
    padding: 29px 26px 6px 26px; 
    text-align: center; 
    color: #FFF; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover 
{ color: #FFF; 
    background: #0D66A5;} 

ul#menu li ul li a 
{ 
display: none; 
height: auto; 
margin: 0; 
padding: 0; 
position:absolute; 
}

В Google Chrome:

enter image description here

В Internet Explorer:

enter image description here

источник

2013-12-12 I Was So Lost

Я не уверен, что вижу соединение с C#. Вы можете уточнить? – Baldrick

Извините, я добавил неверный тег. Он должен быть html –

Вы должны поместить jsfiddle вверх, с вашей последней версией кода, показывающим проблему. Я не получаю поведение в ваших изображениях, в IE, используя HTML/CSS, которые вы опубликовали. – ANeves

Вместо того, чтобы скрываться каждый a тег в раскрывающемся списке, а скрыть весь ul, и использовать его в качестве позиции элемента, и стиль li «S и a» S, как и любой другой элемент.

Пример: http://jsfiddle.net/gd2SX/

Посмотрите на область, которая говорит "Добавлены стили".

источник

2013-12-12 13:58:15 Kao

Но как же, когда я просматриваю с помощью google chrome, панель навигации перепутана. И когда я просматриваю Firefox, выпадающее меню вообще не отображается. А в IE, падение вниз поплавок? –

Он выглядит так же, как в IE и Chrome. Я бы сказал, что вы, вероятно, должны начать все сначала, используя технику, которую я использовал в своей скрипке. – Kao

HTMLDog сделал очень интересную и всеобъемлющую статью о плавающих меню: Sons of Suckerfish.

Вас особенно интересует the part about dropdowns, и в частности the sample they provide.

Это поможет вам исправить гораздо больше, чем просто вашу проблему с плавающей запятой.

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

/* Lists directly inside list-items. */ 
li>ul { 
    display: none; 
} 
/* Lists directly inside hovered list-items. */ 
li:hover>ul, 
li.selected>ul { 
    display: block; 
}

Тогда вам будет намного легче исправить ситуацию.

источник

2013-12-12 14:16:21 ANeves

См. Обновленную часть –

Плавающая моя панель навигации вниз

ответ

Смежные вопросы