位置 - 一個下拉菜單 - 一次

Question

我有一個下拉菜單樣訂做 - 這些鏈接中3行顯示：

<div> 
<ul> 
<li> 
</li> 
</ul> 
</div> 

，如果有一個sibbling菜單（下拉）另一個<div>放在父母<li>。一切都是用PHP實現了從數據庫Opencart的模板的一部分：

<div id="menu" class="third_color_bg grid_12"> 
    <ul> 
    <?php foreach ($categories as $category) { ?> 
    <li><a class="sixth_color_bg" href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a> 
     <?php if ($category['children']) { ?> 
     <div class="sixth_color_border"> 
     <?php for ($i = 0; $i < count($category['children']);) { ?> 
     <ul> 
      <?php $j = $i + ceil(count($category['children'])/$category['column']); ?> 
      <?php for (; $i < $j; $i++) { ?> 
      <?php if (isset($category['children'][$i])) { ?> 
      <li><a class="secondary_color" href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li> 
      <?php } ?> 
      <?php } ?> 
     </ul> 
     <?php } ?> 
     </div> 
     <?php } ?> 
    </li> 

    <div class="categories_spacer"></div> 
    <?php } ?> 
    </ul> 
</div> 

問題在於，從第一行中的鏈接的下拉從第二行作爲這樣一個鏈接下方顯示的：

http://www.3aracing.com.au/test/image/menu.jpg

這是CSS：

/* menu */ 
#menu { 
    /*height: 46px;*/ 
    margin-bottom: 15px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -khtml-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
    -webkit-box-shadow: 0px 2px 2px #DDDDDD; 
    -moz-box-shadow: 0px 2px 2px #DDDDDD; 
    box-shadow: 0px 2px 2px #DDDDDD; 
} 
#menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#menu > ul > li { 
    background: url("../image/tabs-border-image.png") no-repeat scroll right center transparent; 
    float: left; 
    position: relative; 
    z-index: 20; /* default: 20 !!! */ 
    } 

#menu > ul > li:hover { 

} 
#menu > ul > li > a { 
    display: block; 
    font-size: 13px; 
    font-weight: bold; 
    line-height: 14px; 
    padding: 8px 12px 8px 12px; 
    position: relative; 
    text-decoration: none; 
    z-index: 6; /* default: 6 !!! */ 
} 
#menu > ul > li > div { 
    background: none repeat scroll 0 0 #FFFFFF; 
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    display: block; 
    padding: 5px 10px; 
    position: absolute; /* !!! */ 
    z-index: 9999; /* !!! */ 
    border:3px solid; 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
} 
#menu > ul > li:hover > div { 

} 
#menu > ul > li > div > ul { 
    padding-left:15px; 
    list-style: disc outside url("../image/list1.png"); 
    display: table-cell; 
} 
#menu > ul > li ul + ul { 
    padding-left: 20px; 
} 
#menu > ul > li ul > li > a { 
    text-decoration: none; 
    padding: 4px; 
    display: block; 
    white-space: nowrap; 
    min-width: 120px; 

} 
#menu > ul > li ul > li > a:hover { 
color:white; 
} 
#menu > ul > li > div > ul > li > a { 

} 

/*#menu > ul > li:first-child { 
    margin-left: 4px; 

} 
I don't need it 
*/ 

我試圖與z-index，position等工作Ø ñ，但它並沒有改變一件事...是否有可能讓一個父母div出現在s 012 div以下？也許這是問題？下拉應該超過1級鏈接...

http://jsfiddle.net/bo2nz7y8/1/ 對不起，在它的一些廢話 - 從整個代碼。

在此先感謝您的任何提示！

Answer 1

我不知道你是否需要，但我從#menu ul li評論position: relative。

http://jsfiddle.net/bo2nz7y8/2/