Выпадающее меню CSS + HTML, перекрывающее проблему

Question

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

HTML код:

<div id="main_category_menu"> 
<ul id="menu"> 
     <li> 
      <a href="#">Category</a> 
      <div class="menu-container"> 
      <h3>Text goes here</h3> 
      Items count: tralala<hr/> 
      <ul class="menu_category"> 
       <li class="menu_subcategory"> 
        <a href="browse.php?id=76"> 
         Advertising(0) 
        </a> 
       </li> 
       <li class="menu_subcategory"> 
        <a href="browse.php?id=76"> 
         Blalala(0) 
        </a> 
       </li> 
       <li class="menu_subcategory"> 
        <a href="browse.php?id=76"> 
         Super megatron(0) 
        </a> 
       </li> 
      </ul> 
      </div> 
     </li> 
</ul> 
</div> 

CSS код:

#main_category_menu{ 
width: 100%; 
} 

#menu ul, #menu li { 
    line-height:22px; 
    text-align:left; 
    font-size:14px; 
} 

#menu { 
    list-style:none; 
    width:100%; 
    margin:0 auto; 
    height:45px; 
    padding:5px 30px; 
} 

#menu li { 
    float:left; 
    display:block; 
    position:relative; 
    text-align:center; 
    padding:4px 10px; 
    margin:7px 30px 0 0; 
    border:none; 
} 
#menu li:hover { 
    border:1px solid #b7b7b7; 
    border-bottom: none; 
    padding:4px 9px; 
    background: yellow; 
     border-radius:5px 5px 0 0; 
    -moz-border-radius:5px 5px 0 0; 
    -webkit-border-radius:5px 5px 0 0; 
    z-index: 10; 
} 
#menu li a { 
    font-size:14px; 
    color: #444444; 
    display:block; 
    outline:0; 
    text-decoration:none; 
} 
#menu li:hover a { 
    color:#161616; 
} 

#menu .menu-container{ 
    margin:0px auto; 
    float:left; 
    position:absolute; 
    left:-999em; 
    text-align:left; 
    padding:10px 5px; 
    border:1px solid #b7b7b7; 
    background-color: #ffffff; 

     border-radius:0 5px 5px 5px; 
    -moz-border-radius:0 5px 5px 5px; 
    -webkit-border-radius:0 5px 5px 5px; 
} 
#menu .menu-container { 
    width:280px; 
    background: transparent url('logo.gif') no-repeat right bottom; 
} 
#menu li:hover .menu-container{ 
    top:auto; 
    left:-1px; 
} 

#menu p, #menu h2, #menu h3, #menu ul li { 
    line-height:21px; 
    font-size:12px; 
    text-align:left; 
} 
#menu p { 
    line-height:18px; 
    margin-bottom:10px; 
    color:#F2E8E8; 
} 
#menu h3, #menu h2 { 
    font-size:11px; 
    margin:7px 0 14px 0; 
    padding-bottom:5px; 
    text-transform:uppercase; 
    color: #999999; 
} 
#menu li:hover div a { 
    color: #666666; 
    font-size: 11px; 
    padding-left: 6px; 
} 
#menu li:hover div a:hover { 
    color: #FAFAFA; 
    background:#99DE00; 
} 
#menu li ul { 
    list-style:none; 
    padding:0; 
    margin-bottom:12px; 
} 
#menu li ul li { 
    float: none; 
    font-size: 12px; 
    line-height: 24px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    text-align: left; 
    width: 100%; 
} 
#menu li ul li:hover { 
    background: none; 
    border: medium none; 
    margin: 0; 
    padding: 0; 
} 

Мне нужно, чтобы это было как: Result image example

Пробовал добавление z-индекса; но это не работает для меня. Любое предложение будет назначено. Спасибо! :)

Answer 1

вопрос с стека (ING) порядка.

Поскольку li содержит .menu-container и li имеет контекст стэка уже .menu-container создает подкаталог контекст внутри него и никогда не может быть показано ниже него. Что вам нужно сделать, это взять li из-за порядка укладки, а затем дать .menu-container минус z-index за него. Однако, если ни один из предков li не находится в контексте стекирования, ваш .menu-container может отображаться ниже содержимого страницы. Таким образом, вероятно, у вас должен быть родитель li, у которого есть z-index и сопутствующее положение, чтобы поместить его в порядок укладки.

Я не уверен, правильно ли это работает на IE6/IE7 или нет. не

Here is a forked JSFiddle showing the changes. (li больше не имеет z-index и .menu-container теперь имеет отрицательное z-index, также родительский ul#menu теперь введены в порядок наложения так что .menu-container не отображается ниже содержимого страницы)

Answer 2

#menu li:hover { 
    border:1px solid #b7b7b7; 
    border-bottom: none; 
    padding:4px 9px; 
    padding-bottom: 0px !important; 
    background: yellow; 
    border-radius:5px 5px 0 0; 
    -moz-border-radius:5px 5px 0 0; 
    -webkit-border-radius:5px 5px 0 0; 
    z-index: 10; 
} 

его легко попробовать это один: FIDDLE

Answer 3

Что потребность фона ?:

background: transparent url('logo.gif') no-repeat right bottom; 

FIDDLE

Answer 4

Вы можете добиться этого с помощью :after псевдо элемента например:

#menu > li:hover:after { 
    content: ''; 
    background: yellow; 
    position: absolute; 
    top: 100%; 
    width: 100%; 
    height: 4px; 
    left: 0; 
    margin-top: -4px; 
    z-index: 2; 
} 

Вместо :after вы можете использовать дополнительный элемент, такой как span div, который вы можете добавить в разметку.

http://jsfiddle.net/ncqke/7/

Answer 5

Что-то вроде частичной границы с использованием до или после того, как поможет вам проверить эту скрипку

#menu .menu-container:before{ 
    content: ''; 
width: 222px; 
margin-left: 64px; 
height: 1px; 
background: #b7b7b7; 
position: absolute; 
top: -0.5px; 
} 

http://jsfiddle.net/ncqke/9/