Css導航子菜單移動不工作

Question

我正在建立一個只有CSS（媒體查詢）和HTML子菜單導航菜單。

它工作很好看，但問題是： 在手機瀏覽器上，當我點擊任何子菜單時，它不會工作，有時它只是重定向到第一個菜單地址，有時它不甚至重定向。在電腦瀏覽器上也可以正常工作。

這裏是我的代碼：

#nav{ 
    position: relative; 
    height: 100%; 
} 

#nav ul{ 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
} 


#nav ul li{ 
    list-style: none; 
    float: left; 
    height: 100%; 
    border-right: black solid 2px; 
    text-align: center; 
    padding: 0px 15px 0px 15px; 
} 

#nav ul li:hover{ 
    background: #47350e; 
} 

#nav ul li a{ 
    position: relative; 
    font-family: 'Oswald'; 
    font-size: 18px; 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    top: 15px; 
} 

#nav ul li a:hover{ 

} 

#nav ul li .children li{ 
    border: 0px; 
} 

#nav ul li .children li a{ 
    font-size: 13px; 
    top: 5px; 
    font-weight: normal; 
} 


#nav ul li .children li a:hover{ 
    text-decoration: underline; 
} 

#nav ul li .children{ 
    display: none; 
    position: absolute; 
    left: 0px; 
    top: 46px; 
    height: 30px; 
    width: 100%; 
    background: #47350e; 
    padding-left: 120px; 
    z-index: 5; 
} 

#nav ul li:hover .children{ 
    display: block; 
} 

和HTML

<div id="nav"> 
      <ul id="nav-items"> 

       <li> 
        <a href=#>option 1</a> 
       </li> 
       <li> 
        <a href=#>option 2</a> 
        <ul class="children"> 
         <li> 
          <a href=#>option 3</a> 
         </li> 
         <li> 
          <a href=#>option 4</a> 
         </li> 

        </ul> 
       </li> 

      </ul> 
     </div> 

Answer 1

也許你#nav ul li a {規則創建的一塌糊塗。

position: relative; 
top: 15px; 

正在爲兩個層次，即方案1和方案3

檢查，如果這是問題。如果不解決請與您的代碼分享鏈接。

Answer 2

對於手機版本你可以使用選擇菜單。

<div id="mobile_menu"> 
    <select> 
<option>option1</option> 
<option>option2</option> 
<option>option3</option> 
</select> 
    </div> 

CSS是 在正常的CSS

#mobile_menu{display:none;} 

對於移動

@media only screen and (min-width: 320px) and (max-width: 479px) { 
    #mobile_menu{display:block;} 
#nav{display:none;} 
}