Html Css导航下拉列表显示在悬停的左下角

我有一个PHP、HTML和CSS的导航菜单 但是下拉代码有一些问题 菜单位于顶部，有子项，悬停时显示子菜单 但当我悬停时，子菜单项出现在左下角的底部，看起来很糟糕。 如何添加此代码的下拉列表

HTML代码

<div class="header">
<div class="logo"><a href="index.php"><img src="images/logo_chrome.gif" alt="Logo Chrome" /></a></div>
<div class="navi">

<ul>
<li><?PHP if($pagename == "index"){ ?><a href="index.php" class="home active"> </a><?PHP }else {?> <a href="index.php" class="home"> </a> <?PHP } ?></li>

<li><?PHP if($pagename == "service"){ ?><a href="service.php" class="service active"> </a><?PHP }else {?> <a href="service.php" class="service"> </a> <?PHP } ?>

<ul>


       <li>         <a href="#">Service one</a>       </li>    
          <li>      <a href="#">Service three</a></li>
             <li>    <a href="#">Service four</a></li>
   </ul>                     



</li>
<li><?PHP if($pagename == "contacts"){ ?><a href="contacts.php" class="contacts active"> </a><?PHP }else {?> <a href="contacts.php" class="contacts"> </a> <?PHP } ?></li>
</ul>
</div>
</div>

---

在你的css中试试这个

.navi ul li{
    margin:0;
    padding:0;
    display:block;
    float:left;
    position:relative;
}

---

请试着制作一个演示，这样我们可以重现这个问题。我应该怎么做，因为菜单项包含图像，如果我在JSFIDLE中粘贴代码，它会显示图像。下面是它的屏幕截图。是css的全部代码，htmlYou可以尝试将图像作为外部资源添加到左侧的面板中。对以下css进行更改-nav ul li>ul{top:100%；left:0；}谢谢@creativeNitish我照你说的做了，它对菜单部分有效，但与图像横幅重叠。我的意思是图片横幅在前面，菜单在后面。很抱歉打扰你。给图片横幅以下css:'z-index:-9999'

.navi ul li{
    margin:0;
    padding:0;
    display:block;
    float:left;
    position:relative;
}