aziu aziu - 4 months ago 11
CSS Question

Fix DropDown Menu On Right Side And Nav Menu

I Have Two Question with my Dropdown Menu


  1. When I Open My Drop Down Menu its on Right Not On Bellow . How To Change ?
    Sub-Menu Was Right its Okay



How To Chang Position to Bellow


  1. When I open With PC its Okay , but its glitch with mobile mode ( Android ) How to Fix My Nav Menu , Its Transparat, Make Background be Balck ?



How To Fix Transparat Nav-Menu

You Can My Edit Here :


Url = jsfiddle.net/3Lj9b2n9/

Url = codepen.io/aziu/pen/zBmWaW


Btw, what Tool you use to troubelshooting HTML and CSS ? Im newbie

Answer

EDIT: To meet your needs you would need to split the sub menu and the sub-sub menu into different classes so that you can style them differently. See updated code this change.

As far as the tool to use Stack Overflow recommends using the built in Code Snippet tool that you'll see below. To correct your spacing issue you need to get rid of the 180px you set and use something dynamic such as a percentage. In this case setting it to 100% of the width corrects that problem.

Please include more code to look into the mobile issue.

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>