{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несколько лет назад создание выпадающего меню на сайте было кошмаром для веб-мастеров. Без JavaScript-кода, который обычно состоял из нескольких сотен строк, никто бы даже не попытался реализовать такое решение. Сегодня, в эпоху CSS 3, создание выпадающего меню является чистым удовольствием и, что самое главное, нам не нужно использовать никакие скрипты, запущенные на стороне клиента.","type":"unstyled","key":"4fj7i"},{"data":{"image":{"id":"606f71f8c575c815f01dd22a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4b43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы начинаем создавать наше меню, конечно же, с создания скелета в HTML 5:","type":"header-three","key":"4k32e"},{"data":{"image":{"id":"606f7268f597d466f268b794"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3bgfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сам код:","type":"header-three","key":"95i9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* задаем цвет фона для контейнера nav. */\n\t\t\tnav {\n\t\t\t margin: 100px 0;\n\t\t\t background-color: E64A19;\n\t\t\t}\n\t\t\t\n\t\t\t/* убираем отступы и поля, а также list-style для \"ul\", \n\t\t\t * и добавляем \"position:relative\" */\n\t\t\tnav ul {\n\t\t\t padding:0;\n\t\t\t margin:0;\n\t\t\t list-style: none;\n\t\t\t position: relative;\n\t\t\t }\n\t\t\t\n\t\t\t/* применяем inline-block позиционирование к элементам навигации */\n\t\t\tnav ul li {\n\t\t\t margin: 0px -7px 0 0;\n\t\t\t display:inline-block;\n\t\t\t background-color: E64A19;\n\t\t\t }\n\t\t\t\n\t\t\t/* стилизуем ссылки */\n\t\t\tnav a {\n\t\t\t display:block;\n\t\t\t padding:0 10px;\n\t\t\t color:FFF;\n\t\t\t font-size:20px;\n\t\t\t line-height: 60px;\n\t\t\t text-decoration:none;\n\t\t\t}\n\t\t\t\n\t\t\t/* изменяем цвет фона при наведении курсора */\n\t\t\tnav a:hover {\n\t\t\t background-color: 000000;\n\t\t}","type":"unstyled","key":"4ulsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eb9hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После применения стилей у нас должно получиться нечто вроде этого:","type":"header-three","key":"1rbai"},{"data":{"image":{"id":"606f72bd92c2ad3ef6b45128"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fs7lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":60,"style":"BOLD"}],"text":"Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить

для пункта, в котором нужно скрыть выпадающий список:","type":"unstyled","key":"uedh"},{"data":{"image":{"id":"606f72d925e3fa2531e6440a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cmnc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n\t\t\t
- Home
- WordPress\n\t\t\t\n\t\t\t \n\t\t\t
  - Themes
  - Plugins
  - Tutorials
  \n\t\t\t\n\t\t\t
- Graphic Design
- Inspiration
- Contact
- About
\n\t\t
","type":"unstyled","key":"cm00b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a55qo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c7ao6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ih0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cc50q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8l0s2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"bYUejbAj7CeV5f9QbjWC"}],"entityMap":{}},"mentions":[]}