下拉菜单无法正确显示

Question

我尝试制作下拉菜单，但我不知道为什么当ul悬停而不是下拉li时没有正确显示我使用z-index并使用位置相对。请检查这在顶部菜单上。

Css

#menu > ul  > li:hover ul {
 display:inline;
   }
#menu ul li ul{
position:relative;
display:none;
list-style: none;
margin:0px;
width:200px;
z-index:1000;}

Html

<div id="menu">
<div class="home-icn">
    <a href="<?php echo $home; ?>"><i class="icon-home"></i></a>
</div>
<ul >
   <li><a id="print_menu" href="">Printing</a>
         <ul id="drop_menu_f">
         <li><a>Business Cards</a></li>
         <li><a>Brochure</a></li>
         <li><a>Door Hangers</a></li>
         <li><a>Envelopes</a></li>
         <li><a>Flyers</a></li>
         <li><a>Invoice Books</a></li>
         <li><a>Magnet Cards</a></li>
         <li><a>Note Pads</a></li>
         <li><a>Post Cards</a></li>
         <li><a>Plastic Cards</a></li>
         <li><a>Posters</a></li>
         <li><a>Presentation Folders</a></li>
          </ul>
         </li>
     </ul>
   </div>

Answer 1

http://jsfiddle.net/hnTyB/1/

<div id="menu">
    <ul>
        <li>My Menu
            <ul>
                <li>thing</li>
                <li>thing2</li>
            </ul>
        </li>
    </ul>
</div>

我做了一个js小提示你想要做的事情。完全复制你的CSS，这似乎对我有用。可能是你的html和css没有正确匹配？

Answer 2

我检查了您的网站soniprinting.com（在屏幕截图中看到了网址），看起来您错过了z-index中的#menu ul。

添加大于幻灯片显示的z-index，您应该能够看到下拉列表。