CSS гамбургер Dropdown используя: проверка не работает

Question

Я пытаюсь реализовать раскрывающийся список для мобильных устройств, используя значок гамбургера с флажком "Взлом". Я нашел несколько примеров этого. Вот тот, который использует радио с вкладками jsfiddle. Я знаю, что это в основном та же самая идея, и я видел другие примеры на этой странице css-tricks. Проблема в том, что я попробовал почти каждую комбинацию, чтобы заставить ее работать, и она не будет. Могут ли некоторые увидеть, что в моем коде чего-то не хватает? Заметьте, я использовал слово гамбургер вместо символа для глифа, так как он недоступен.

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
input[type="checkbox"]:checked ~ label ~ ul {
  display: block;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="col-xs-12 nav">
  <div class="mobile-bar">
    <label for="hamburger">
      <input type="checkbox" id="hamburger">
    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#">ABOUT US</a>
    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>
      <ul>
        <li><a href="#">WEB SITES</a>
        </li>
        <li><a href="#">PRINT GRAPHICS</a>
        </li>
        <li><a href="#">VIDEO</a>
        </li>
      </ul>
      <li><a href="#">BLOG</a>
      </li>
      <li><a href="#">CONTACT US</a>
      </li>
  </ul>
</div>

Answer 1

Невозможно выбрать родительский элемент с помощью чистого CSS.

Решения:

Изменить структуру HTML

Jsfiddle

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
input[type="checkbox"]:checked ~ ul {
  display: block;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="col-xs-12 nav">
  <input type="checkbox" id="hamburger" />
  <div class="mobile-bar">
    <label for="hamburger">

    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>

    </li>
    <li><a href="#">ABOUT US</a>

    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>

      <ul>
        <li><a href="#">WEB SITES</a>

        </li>
        <li><a href="#">PRINT GRAPHICS</a>

        </li>
        <li><a href="#">VIDEO</a>

        </li>
      </ul>
      <li><a href="#">BLOG</a>

      </li>
      <li><a href="#">CONTACT US</a>

      </li>
  </ul>
</div>

Jquery

Jsfiddle

$(document).ready(
  function() {
    $('#hamburger').click(function() {
      $(this).closest('.mobile-bar').toggleClass('selected');
    });
  });

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav .selected + ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="col-xs-12 nav">

  <div class="mobile-bar">
    <label for="hamburger">
      <input type="checkbox" id="hamburger" />
    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>

    </li>
    <li><a href="#">ABOUT US</a>

    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>

      <ul>
        <li><a href="#">WEB SITES</a>

        </li>
        <li><a href="#">PRINT GRAPHICS</a>

        </li>
        <li><a href="#">VIDEO</a>

        </li>
      </ul>
      <li><a href="#">BLOG</a>

      </li>
      <li><a href="#">CONTACT US</a>

      </li>
  </ul>
</div>

Answer 2

Попробуй это:

input{
  display:none;
}
input:checked + label + ul{
  display:none;
}
label{
  display:block;
  position:relative;
  width:64px;
  height:64px;
}
top,middle,bottom{
  position: absolute;
  background:black;
  width:64px;
  height:12px;
  transition: top 0.2s, transform 0.2s;
}
top{
  border-radius: 6px 6px 0px 0px;
  top:0px;
}
middle{
  top:24px;
}
bottom{
  top:48px;
  border-radius: 0px 0px 6px 6px;
}

input:not(:checked) + label top{
  transform:rotate(55deg);
  top:24px;
}
input:not(:checked) + label bottom{
  transform:rotate(-55deg);
  top:24px;
}

<input type="checkbox" id="ham" checked="checked" />
<label for="ham">
  <top></top>
  <middle></middle>
  <bottom></bottom>
</label>
<ul>
  <li><a href="www.google.com">Google.com</a></li>
  <li><a href="www.google.com">Google.com</a></li>
  <li><a href="www.google.com">Google.com</a></li>
</ul>