Создание выпадающего меню по клику CSS

В дополнение к уже упомянутому взлому checkbox, вы также можете использовать кнопку в качестве пунктов меню и использовать состояние :focus для отображения выпадающего меню. Преимущество заключается в том, что меню закроется, если вы нажмете за его пределами. Некоторые HTML-элементы естественным образом не получают Фокус при щелчках; для них можно добавить атрибут "tabindex", чтобы они могли получить фокус.

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}

<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>

Конечно, я опаздываю, но:

Вы можете вызвать css-клик, используя Хак!!

Работайте с флажком!!

Пример:

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }

    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

Вы можете использовать переходы, чтобы анимировать эффект show an hide :) Это всего лишь очень простой пример!!

Примечание: это хак CSS3, если вам нужна поддержка borwser для старых браузеров, это не работает.

На самом деле, есть возможность получить эту работу с чистым CSS и поведением элементов браузера, используя checkbox hack, однако на момент написания этого, он толкает то, что должно быть сделано с CSS против того, что может быть сделано с CSS. Также это может вызвать какой-то довольно страшный семантический код (ведь есть причина, по которой он обычно указывается как checkbox HACK).

Сказав это, вы могли бы использовать его, если бы у вас были только требования к современным браузерам, давая ограниченные функциональность для других, и я сам использовал это в производственном коде, на изолированном проекте chrome только, и это довольно весело играть.

Вот ссылка, чтобы прочитать больше об этом:

Http://css-tricks.com/the-checkbox-hack/

Но еще раз подчеркну, как и другие уже здесь, что функциональное поведение действительно должно быть сделано с помощью JavaScript. Если вы на самом деле не хотите решение меню на основе наведения, то это другой вопрос все вместе!

Вам нужно будет сделать это с помощью javascript и зарегистрировать обработчик событий click для выполнения вашего действия.

Если вы новичок во всем, то вы должны искать некоторые учебники javascript (не используйте W3Schools, посмотрите в другом месте), а затем посмотрите на некоторые учебники jQuery, поскольку jQuery упрощает подобные задачи.

Есть много фреймворков, которые вы можете использовать с хорошо выглядящими меню для ваших нужд, не говоря уже о том, что они поддерживают все устройства (планшеты, телефоны и ПК).

Например, в фреймворке Twitter bootstrap есть именно то, что вам нужно, проверьте этот учебник: Twitter bootstrap-Navs

Прочитайте весь раздел Nav, в конце они говорят о Nav с выпадающим списком для получения дополнительных опций. Меню самого учебника построено с помощью фреймворка Twitter bootstrap.

Чистое css решение вашей проблемы выглядит следующим образом

Демо: http://jsfiddle.net/HyGZf/1/

Вам нужно input и label, и вы должны удалить href на портфолио, если вы хотите использовать только css

Вы можете добавить transition: all 1s Easy-in-out; в подменю , Если хотите, чтобы оно было анимированным

/**Navigation */
nav{
    border: 1px solid red ;
    float: left;
    margin-right:35px;
    min-height:280px;
    }


nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}   
/**Content */
#section{
    background-color: ;
    border: 1px solid;
    font: normal 12px Helvetica, Arial, sans-serif; 
    margin-left:180px;
 }



 .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;

}
#Portfolio:checked +ul ul#submenu{
 height:80px;   
}
#submenu{
    overflow:hidden;
    height:0px;
    margin:0;
}
a[accesskey="2"]{
    color:blue;
    cursor:pointer;
    text-decoration:underline;
}

Разметка

    <div class="clearfix"></div>
<nav>
    <input id="Portfolio" type="checkbox" name="menu" hidden>
    <ul>
        <li><a href="index.html" accesskey="1"> Home </a> </li>
        <li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>

        <ul id=submenu type="list">
              <li><a href="Commercial.html">Commercial</a> </li>
              <li><a href="Residential.html">Residential</a> </li>
              <li><a href="heritage.html">Heritage</a> </li>
              <li><a href="Rennovations.html">Rennovations</a> </li>
        </ul>

        <li><a href="services.html" accesskey="3"> Services </a> </li>
        <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
        <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
     </ul>
</nav>

 $('#open').on('click', function(e) {
   simple_showpopup("popup", e);
 });

 function simple_showpopup(id, evt) {
   var _pnl = $("#" + id);
   _pnl.show();
   _pnl.css({
     "left": evt.pageX - ($("#" + id).width() / 2),
     "top": (evt.pageY + 10)
   });

   $(document).on("mouseup", function(e) {
     var popup = $("#" + id);
     if (!popup.is(e.target) && popup.has(e.target).length == 0) {
       popup.hide();
       $(this).off(e);
     }
   });
 }

 $("#popup").hide();

.defa-context-panel {
  border: 1px solid black;
  position: absolute;
  min-width: 200px;
  min-height: 150px;
  background-color: #f8f8f8;
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Open&nbsp;&nbsp;&nbsp;&nbsp;<span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>

<div id="popup" class="defa-context-panel">Content
  <div>DIV inside</div>
</div>