Css導航下拉菜單出現在懸停的左下角

Question

我在PHP，HTML和CSS中有一個導航菜單 但下拉代碼有一些問題 菜單位於頂部並且有子項目並且在懸停時顯示爲子菜單菜單 但是，當我懸停子菜單項出現在底部左下角看起來不好。 如何在此代碼上添加下拉菜單？在你的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

body img{ margin:0; padding:0; border:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#737373; } 
UL, OL { margin:0; padding:0; list-style: none;} 
li { margin:0; padding:0; list-style-type:none;} 

A { color:#00558e; text-decoration:none; border: none;} 
/*A:visited{ text-decoration:none; color:#;}*/ 
A:hover {color:#9ed101; text-decoration:none; outline:none; border:0;} 
/*A:active { text-decoration:none; color:#;}*/ 
A:focus {outline:none;} 
.clr {clear: both;} 
/*LAYOUT*/ 
#wrap{ margin:0 auto; padding:0; width:996px;} 
.header{ margin:0; padding:0px 10px 0 10px; width:976px; height:92px; float:left; } 
.logo{ margin:0; padding:0; width:152px; height:89px; float:left; border-bottom:red 0px solid;} 
.navi{ margin:0; padding:15px 0 0 0; width:712px; height:71px; float:right; } 
.navi ul{ margin:0; padding:0; width:712px; float:left;} 
.navi ul li{ margin:0; padding:0; display:block; float:left;} 
.navi ul li a.home{ margin:0; padding:0; display:block; float:left; width:50px; height:56px; background:url(../images/home.gif) no-repeat top;} 
.navi ul li a.home:hover{ margin:0; padding:0; display:block; float:left; width:50px; height:56px; background-position:bottom;} 
.navi ul li a.home.active{ margin:0; padding:0; display:block; float:left; width:50px; height:56px; background-position:bottom;} 






/*Custom CSS for Sub Menu*/ 
nav ul li > ul:before { 
    content: ""; 
    border-style: solid; 
    border-width: 0 9px 9px 9px; 
    border-color: transparent transparent #2C3E50 transparent; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 15px; 
    top: 5px; 
} 

nav ul li > ul { position: absolute; left: 14px; top: 80%; padding-top: 13px; background: none; width: 150px; z-index: -9999; opacity: 0; -webkit-transition: 0.3s ease-out; } 
nav ul li:hover > ul { display: block; z-index: 100; opacity: 1; top: 95%; } 

nav ul li > ul li:first-child { border-radius: 4px 4px 0 0; padding-top: 3px; } 
nav ul li > ul li:last-child { border-radius: 0 0 4px 4px; } 
nav ul li > ul li { padding: 0 3px 3px; background: #2C3E50; width: 100%; } 
nav ul li > ul li a .service{ display: block; padding: 6px 9px; border-radius: 2px; font-size: 14px; } 
nav ul li > ul li:hover > a { color: #FFF; background: #3498DB; } 
nav ul li > ul li.active > a { color: #FFF; background: #2980B9; } 



/* SUB SUB MENU */ 
nav ul li > ul li > ul:before { 
    content: ""; 
    border-style: solid; 
    border-width: 0 9px 9px 9px; 
    border-color: transparent transparent #2C3E50 transparent; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 0; 
    top: 15px; 
    -webkit-transform: rotate(270deg); 
} 

nav ul li > ul li > ul { top: 0; left: 90%; padding: 0; padding-left: 13px; -webkit-transition: 0.3s ease-out; } 
nav ul li > ul li:hover > ul { display: block; opacity: 1; z-index: 100; top: 0; left: 100%; } 

Answer 1

嘗試了這一點

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