修復下拉菜單右側導航菜單

Question

我有我的下拉菜單

1. 兩個問題當我打開右邊我的下拉菜單中的，而不是下面。我該如何改變這一點？

子菜單是對的其好

當與我的PC打開它的確定，但其在移動模式（機器人）毛刺。如何解決我的導航菜單，其透明，我想使背景黑色？

你可以在這裏看到我的代碼：

`http://jsfiddle.net/3Lj9b2n9/` 

`http://codepen.io/aziu/pen/zBmWaW` 

順便說一句，你用什麼工具來troubelshoot HTML和CSS？我是一個新手。

Answer 1

編輯：爲了滿足您的需求，您需要將子菜單和子子菜單分成不同的類別，以便您可以對它們進行不同的設計。查看更新的代碼這個變化。

至於使用堆棧溢出建議使用內置的代碼片段的工具，你會看到下面的工具。要糾正你的間距問題，你需要擺脫你設置的180px，並使用動態的東西，如百分比。在這種情況下，將其設置爲寬度的100％即可糾正該問題。

請包含更多代碼來查看移動問題。

document.addEventListener('click', function(e) { 
 
    e = e || window.event; 
 
    var target = e.target || e.srcElement; 
 
    if (target.parentElement && target.parentElement.className.indexOf('has-submenu') > -1) { 
 
    e.target.parentElement.classList.toggle('open'); 
 
    } 
 
}, false);

#menu { 
 
    background: #000; 
 
    color: #eee; 
 
    height: 35px; 
 
    border-bottom: 4px solid #eeeded 
 
} 
 

 
#menu ul, 
 
#menu li { 
 
    margin: 0 0; 
 
    padding: 0 0; 
 
    list-style: none; 
 
    background: #0000ff; 
 
} 
 

 
#menu ul { 
 
    height: 35px 
 
} 
 

 
#menu li { 
 
    float: left; 
 
    display: inline; 
 
    position: relative; 
 
    font: bold 12px Arial; 
 
    text-shadow: 0 -1px 0 #000; 
 
    border-right: 1px solid #444; 
 
    border-left: 1px solid #111; 
 
    text-transform: uppercase; 
 
    background: #000; 
 
} 
 

 
#menu li:first-child { 
 
    border-left: none; 
 
} 
 

 
#menu a { 
 
    display: block; 
 
    line-height: 35px; 
 
    padding: 0 14px; 
 
    text-decoration: none; 
 
    color: #eee; 
 
} 
 

 
#menu li:hover > a, 
 
#menu li a:hover { 
 
    background: #111 
 
} 
 

 
#menu input { 
 
    display: none; 
 
    margin: 0 0; 
 
    padding: 0 0; 
 
    width: 80px; 
 
    height: 35px; 
 
    opacity: 0; 
 
    cursor: pointer 
 
} 
 

 
#menu label { 
 
    font: bold 30px Arial; 
 
    display: none; 
 
    width: 35px; 
 
    height: 36px; 
 
    line-height: 36px; 
 
    text-align: center 
 
} 
 

 
#menu label span { 
 
    font-size: 12px; 
 
    position: absolute; 
 
    left: 35px 
 
} 
 

 
#menu ul.submenu { 
 
    height: auto; 
 
    width: 180px; 
 
    background: #111; 
 
    position: absolute; 
 
    z-index: 99; 
 
    display: none; 
 
    border: 0; 
 
} 
 

 
#menu ul.submenu li { 
 
    display: block; 
 
    width: 100%; 
 
    font: 12px Arial; 
 
    text-transform: none; 
 
} 
 

 
#menu a.home { 
 
    background: #c00; 
 
} 
 

 
#menu a.prett { 
 
    padding: 0 27px 0 14px 
 
} 
 

 
#menu a.prett::after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-width: 6px 5px; 
 
    border-style: solid; 
 
    border-color: #eee transparent transparent transparent; 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 9px 
 
} 
 

 
#menu .has-submenu.open > a.prett::after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-width: 6px 5px; 
 
    border-style: solid; 
 
    border-color: transparent transparent #eee transparent; 
 
    position: absolute; 
 
    top: 9px; 
 
    right: 9px 
 
} 
 

 
#menu ul a:hover { 
 
    background: #c00; 
 
} 
 

 
#menu ul .submenu { 
 
    display: none; 
 
    position: absolute; 
 
    background: #111; 
 
    width: 180px; 
 
} 
 

 
#menu ul .subsubmenu { 
 
    display: none; 
 
    position: absolute; 
 
    background: #111; 
 
    width: 180px; 
 
    left:100%; 
 
    top: 0; 
 
} 
 

 
#menu ul.menus .submenu li { 
 
    background: #111; 
 
} 
 

 
#menu li.has-submenu.open > .submenu { 
 
    display: block; 
 
} 
 

 
#menu li.has-submenu.open > .subsubmenu { 
 
    display: block; 
 
}

<nav id='menu'> 
 
    <input type='checkbox' /> 
 
    <label>&#8801;<span>Navigation</span></label> 
 
    <ul id='menu'> 
 
    <li><a class='home' href='/'>Home</a></li> 
 
    <li class='has-submenu'><a class='prett' href='#!' title='Kategori Game'>Category Game</a> 
 
     <ul class='submenu'> 
 
     <li class='has-submenu'><a class='prett' href='#!' title='Kategori Game'>Category Game 1</a> 
 
      <ul class='subsubmenu'> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Terbaik Terpopuler'>GAME TERBAIK</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Android Gratis'>GAME GRATIS</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Android Berbayar'>GAME (PRO/PREMIMUM)</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Android Online'>GAME ONLINE</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Offline Android'>GAME OFFLINE</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game HD Android 3D'>GAME HD (3D)</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class='has-submenu'><a class='prett' href='#!' title='Kategori Game 2'>Category Game 2</a> 
 
      <ul class='subsubmenu'> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Petualangan RPG'>RPG (PETUALANGAN)</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Tembak FPS'>FPS (TEMBAK)</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Balap Racing'>RACING (BALAPAN)</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Laga Action'>GAME ACTION</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Android Strategi'>GAME STRATEGY</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Android Sports'>GAME SPORTS</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class='has-submenu'><a class='prett' href='#!' title='Kategori Game 3'>Category Game 3</a> 
 
      <ul class='subsubmenu'> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Simulasi'>GAME SIMULASI</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Musik'>GAME MUSIC</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Teka-Teki'>WORD/TEBAK KATA</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Puzzle'>GAME PUZZLE</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Pendidikan'>GAME PENDIDIKAN</a></li> 
 
      <li><a href='http://www.fullapkz.com/#' title='Game Untuk Anak'>GAME ANAK</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class='has-submenu'><a href='#!' title='Kategori Game'>Category Game</a> 
 
    </li> 
 
    </ul> 
 
</nav>