Выпадающего окна не работает в HTML-странице с помощью CSS

, когда я двигаю курсор в главном меню («например: Меню 2»), я могу увидеть мой выпадающий список подВыпадающего окна не работает в HTML-странице с помощью CSS

example menu

После когда я двигаю курсор submenu1 он не отображается, и я не могу выбрать его слишком

вот мой пример кода:

<style type="text/css"> 

ul#menu, ul#menu ul.sub-menu { 
    padding:0; 
    margin: 0; 
} 
ul#menu li, ul#menu ul.sub-menu li { 
    list-style-type: none; 
    display: inline-block; 
} 
/*Link Appearance*/ 
ul#menu li a, ul#menu li ul.sub-menu li a { 
    text-decoration: none; 
    color: #fff; 
    background: #666; 
    padding: 5px; 
    display:inline-block; 
} 
/*Make the parent of sub-menu relative*/ 
ul#menu li { 
    position: relative; 
} 
/*sub menu*/ 
ul#menu li ul.sub-menu { 
    display:none; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100px; 
} 
ul#menu li:hover ul.sub-menu { 
    display:block; 
} 

</style> 

<div id="menu" align="left"> 

<ul id="menu"> 
    <li> 
     <a href='<%=request.getContextPath()%>/auth/gs.page'>Menu1</a> 
    </li> 
    <li><a>Menu2</a> 

     <ul class="sub-menu"> 
      <li> 
       <a href='<%=request.getContextPath()%>/auth/view.page'>submenu1</a> 
      </li> 
     </ul> 
    </li> 

</div>

Просьба предоставить мне идею разрешить ее

источник

2013-09-24 Yellow Flash

Почему Java ?????? –

Я делаю это веб-приложение с помощью java –

Итак, как вы думаете, java вызывает эти проблемы? –

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

Из-за того, как вы его настроили, есть небольшой промежуток (1-3px в зависимости от браузера и стилей пользователя по умолчанию), что означает, что он теряет статус hover (и, следовательно, скрывает подменю), так как вы «не открываете» «верхний уровень навигационного элемента, когда вы переходите через этот пробел.

Если это то, что вы видите, самый простой способ исправить это, чтобы удалить значение top из ul#menu li ul.sub-menu (вы его установить в 30px) и добавить в эквивалентном padding к li в подменю, чтобы она выглядела правильно.

ul#menu li ul.sub-menu { 
    display:none; 
    position: absolute; 
    left: 0; 
    width: 100px; 
} 


ul#menu li ul.sub-menu li { 
    padding-top: 2px; 
}

Вот скрипка с этим изменением: http://jsfiddle.net/adnrw/J44NJ/

источник

2013-09-24 05:58:41 adnrw

он работает !!! благодаря –

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

источник

2013-09-24 05:51:56 Jazcash

Я не могу выбрать подменю1 –

И по выбору вы имеете в виду просто нажимать на него? См. Здесь: http://jsfiddle.net/R9UZv/ Я могу просто щелкнуть подменю1. – Jazcash

ul#menu li:hover ul.sub-menu

, вероятно, следует:

ul#menu li:hover ul.sub-menu, ul#menu li ul.sub-menu:hover

источник

2013-09-24 05:52:56 Aurand

Выпадающего окна не работает в HTML-странице с помощью CSS

ответ

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