Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="header-block">
<div class="container">
    <header id="masthead">    
      <div class="blog-info">
        <a href="#" class="custom-logo-link" rel="home"><img src="http://html-plus.in.ua/wp-content/uploads/2019/12/logo_for_menu.png" alt="Logo" width="160" height="70" class="custom-logo"></a>
      </div>
      <div class="menu-container">
        <div class="menu">
          <ul id="menu-main" class="menu"><li><a href="/">Главная</a></li>
        <li class="menu-dropdown-icon"><a href="/category/family-psihology/">Cемейная психология</a>
          <ul class="sub-menu">
            <li><a href="/category/family-psihology/about-family/">Что такое семья?</a>
              <ul class="sub-menu">
                <li><a href="/otnosheniya-v-semie/">Отношения в семье</a></li>
                <li><a href="/vybor-zheny-muzha/">Выбор жены/мужа</a></li>
                <li><a href="/semeynye-krizisy/">Семейные кризисы</a></li>
                <li><a href="/semeynye-traditsii/">Семейные традиции</a></li>
                </ul>
              </li>
              <li><a href="/category/family-psihology/konflikty-v-semie/" aria-current="page">Конфликты в семье</a>
                <ul class="sub-menu">
                  <li><a href="/prichiny-konfliktov/">Причины конфликтов</a></li>
                  <li><a href="/obedy-i-pretenzii/">Обиды и претензии</a></li>
                  <li><a href="/vyhod-iz-konfliktov/">Выход из конфликта</a></li>
                </ul>
            </li>
              </ul>
              </li>
              <li class="menu-dropdown-icon"><a href="/category/money-psihology/">Психология денег</a>
            <ul class="sub-menu">
              <li><a href="/category/money-psihology/how-much-you-cost/">Cколько вы стоите?</a>
                <ul class="sub-menu">
                  <li><a href="/kak-podnyat-svoyu-tcenu/">Как поднять свою цену?</a></li>
                  <li><a href="/vybor-professii/">Выбор профессии</a></li>
                  <li><a href="/pervie-shagi-v-storonu-deneg/">Первые шаги в сторону денег</a></li>
                </ul>
              </li>
              <li><a href="/category/money-psihology/tayni-i-tabu/">Тайны и табу </a>
                <ul class="sub-menu">
                  <li><a href="/dengi-ne-dlya-menya/">Деньги - это не для меня</a></li>
                  <li><a href="/problemy-psihologii-deneg/">Проблемы психологии денег</a></li>
                  <li><a href="/strah-ostatcya-bez-deneg/">Страх остаться без денег</a></li>
                </ul>
              </li>
              <li><a href="/category/money-psihology/privlekaem-dengi/">Привлекаем деньги</a>
                <ul class="sub-menu">
                  <li><a href="/psihologia-privlecheniya-deneg/">Психология привлечения денег</a></li>
                  <li><a href="/7-zakonov-vselennoy/">
7 основных законов Вселенной</a></li>
                  <li><a href="/zakon-prityazheniya/">Как использовать закон притяжения</a></li>
                <li><a href="/affirmatsii-na-dengi-i-bogatstvo/"> Аффирмации на деньги и богатство</a></li>
                </ul>
              </li>
            </ul>
            </li>
            <li><a href="/contacts/">Контакты</a></li>
          </ul>			
        </div>
      </div>
     </header>
  </div><!--/.container -->
</div>
<div class="container">
  <div class="content">
    <h1>Отношения в семье</h1>
    <h2>Для чего нужна семья?</h2>
<p>Вполне логично, что перед созданием семьи нужно понять, а для чего же она нужна. Одной из важных функций семьи является ускорение эволюционного (духовного) развития супругов. Когда муж и жена обладают определёнными знаниями и близким уровнем развития, то они обогащают друг другу жизненной силой (или энергиями) во время близости. Этот процесс и называется любовью и он помогает гармонично развиваться. Без такого обмена энергиями развитие сущности может сильно затормозиться, причём и у мужчин, и у женщин.</p>

<p>Правда это не означает, что нужно заниматься сексом сутки напролёт, считая «чем больше секса, тем больше развития». Частый секс ни к чему хорошему не приводит, так как во время него супруги расходуют определённое количество своей жизненной силы (энергии). И частый секс неизбежно начинает пагубно сказываться на здоровье.</p>

<p>Неспособность контролировать свои инстинкты является признаком животных, а человек должен во всём придерживаться определённых рамок, которые помогают ему оставаться здоровым и счастливым. Считается, что нескольких раз в месяц «обмена энергиями» вполне достаточно для полноценного эволюционного развития и сохранения высокого творческого потенциала.</p>

<p>Впервые описал все эти нюансы психологии семейных отношений в своих книгах Николай Левашов.</p>

<p>Также ещё одной важной функцией семьи является рождение и воспитание гармоничных и разумных детей.</p>
  </div>
</div>
<footer class="top">
  <div class="container">
   <h5 class="text-center">Features:</h5>
  <div class="d-flex">
    <ul>
      <li>Совместим с IE8 (за счет jquery-анимации)</li>
      <li>Нет классов для выпадающих списков</li> 
    </ul>
    <ul>
      <li>Разумный - понимает, когда нужно отобразить мегаменю</li>
      <li>100% адаптивный</li>
    </ul>
    <ul>
      <li>Простая интеграция в Wordpress</li>
      <li>Лицензия MIT!</li>
    </ul>
  </div>
 </div>
</footer>
<footer class="bottom text-center">
  <a  target="_blank" href="https://github.com/marioloncarek/megamenu-js">Скачать плагин</a>
</footer>

              
            
!

CSS

              
                /* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
- Change styles - http://html-plus.in.ua
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  font-family: 'Montserrat', sans-serif;
}

* {
  box-sizing: border-box;
}

a {
  color: #303030;
}

.d-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top {
  background-color: #202020;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 20px;
}
.top a, .bottom a {color: #fff;}
.text-center {text-align: center;}
.bottom {
  background-color: #333;
  padding: 20px 0;
}

header#masthead {
    margin-bottom: 1em;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
}
.header-block {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
}
.blog-info {
    width: 180px;
}
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container::before, .container::after {
  content: '';
  display: table;
}
.container::after {clear: both;}
.content {
  max-width: 850px;
  margin: auto;
  line-height: 1.5;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu a {
    color: #303030;
}

.menu-container {
    float: right;
    width: 80%;
    text-align: right;
}

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    font-size: 2.5rem;
    content: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22menu%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%20344.339%20344.339%22%20style%3D%22enable-background%3Anew%200%200%20344.339%20344.339%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%09%3Crect%20y%3D%2246.06%22%20width%3D%22344.339%22%20height%3D%2229.52%22%2F%3E%0A%09%3Crect%20y%3D%22156.506%22%20width%3D%22344.339%22%20height%3D%2229.52%22%2F%3E%0A%09%3Crect%20y%3D%22268.748%22%20width%3D%22344.339%22%20height%3D%2229.531%22%2F%3E%09%0A%3C%2Fsvg%3E');
    width: 30px;
    height: 30px;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-mobile.mobile-close:after {
    content: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20241.171%20241.171%22%20style%3D%22enable-background%3Anew%200%200%20241.171%20241.171%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%2230%22%20height%3D%2230%22%3E%0A%09%3Cpath%20id%3D%22Close%22%20d%3D%22M138.138%2C120.754l99.118-98.576c4.752-4.704%2C4.752-12.319%2C0-17.011c-4.74-4.704-12.439-4.704-17.179%2C0%0A%09%09l-99.033%2C98.492L21.095%2C3.699c-4.74-4.752-12.439-4.752-17.179%2C0c-4.74%2C4.764-4.74%2C12.475%2C0%2C17.227l99.876%2C99.888L3.555%2C220.497%0A%09%09c-4.74%2C4.704-4.74%2C12.319%2C0%2C17.011c4.74%2C4.704%2C12.439%2C4.704%2C17.179%2C0l100.152-99.599l99.551%2C99.563%0A%09%09c4.74%2C4.752%2C12.439%2C4.752%2C17.179%2C0c4.74-4.764%2C4.74-12.475%2C0-17.227L138.138%2C120.754z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.menu-dropdown-icon > a::after {
    content: '';
    background: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20256%20256%22%20style%3D%22enable-background%3Anew%200%200%20256%20256%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpolygon%20points%3D%22225.813%2C48.907%20128%2C146.72%2030.187%2C48.907%200%2C79.093%20128%2C207.093%20256%2C79.093%22%20stroke%3D%22gray%22%20fill%3D%22gray%22%20%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fsvg%3E') no-repeat right 11px;
    background-size: 10px;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 21px;
}

.menu-dropdown-icon:hover > a::after {
    background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%22284.929px%22%20height%3D%22284.929px%22%20viewBox%3D%220%200%20284.929%20284.929%22%20style%3D%22enable-background%3Anew%200%200%20284.929%20284.929%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20d%3D%22M282.082%2C195.285L149.028%2C62.24c-1.901-1.903-4.088-2.856-6.562-2.856s-4.665%2C0.953-6.567%2C2.856L2.856%2C195.285%0A%09%09C0.95%2C197.191%2C0%2C199.378%2C0%2C201.853c0%2C2.474%2C0.953%2C4.664%2C2.856%2C6.566l14.272%2C14.271c1.903%2C1.903%2C4.093%2C2.854%2C6.567%2C2.854%0A%09%09c2.474%2C0%2C4.664-0.951%2C6.567-2.854l112.204-112.202l112.208%2C112.209c1.902%2C1.903%2C4.093%2C2.848%2C6.563%2C2.848%0A%09%09c2.478%2C0%2C4.668-0.951%2C6.57-2.848l14.274-14.277c1.902-1.902%2C2.847-4.093%2C2.847-6.566%0A%09%09C284.929%2C199.378%2C283.984%2C197.188%2C282.082%2C195.285z%22%20%20stroke%3D%22gray%22%20fill%3D%22gray%22%2F%3E%0A%3C%2Fg%3E%0A%0A%3C%2Fsvg%3E');
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
    color: #303030;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em;
    display: block;
}
.menu > ul > li > a {
	font-weight: bold;
}
.menu > ul > li:last-child a {
    padding-right: 0;
}

.menu > ul > li:hover > a{
	color: #00CFE7;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #fff;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    /*    width: 25%;*/
    width: 32%;
    margin-right: 1%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li > a {
	font-weight: bold;
}

.menu > ul > li > ul > li a {
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .9em;
    color: #303030;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 1024px) {
    .menu-container {
        width: 80%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100
    }
    #menu-main {
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    .menu-mobile {
        display: block;
        color: transparent !important;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.2em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
        box-shadow: none;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
    .menu-dropdown-icon > a::after {
        display: none;
    }
    .menu-dropdown-icon::before {
        content: "+";
        cursor: pointer;
        float: right;
        padding-top: .8em;
        padding-right: .8em;
        font-weight: bold;
        font-size: 1.5em;
    }
}
              
            
!

JS

              
                (function($) {

    "use strict";

    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI


    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Menu </a>");

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
    //Done this way so it can be used with wordpress without any trouble

    $(".menu > ul > li").hover(
        function (e) {
            if ($(window).width() > 1024) {
                $(this).children("ul").fadeIn(150);
                e.preventDefault();
            }
        }, function (e) {
            if ($(window).width() > 1024) {
                $(this).children("ul").fadeOut(150);
                e.preventDefault();
            }
        }
    );
    //If width is more than 1024px dropdowns are displayed on hover


    //the following hides the menu when a click is registered outside
    $(document).on('click', function(e){
        if($(e.target).parents('.menu').length === 0)
            $(".menu > ul").removeClass('show-on-mobile');
    });

    $(".menu > ul > li").click(function() {
        //no more overlapping menus
        //hides other children menus when a list item with children menus is clicked
        var thisMenu = $(this).children("ul");
        var prevState = thisMenu.css('display');
        $(".menu > ul > li > ul").fadeOut();
        if ($(window).width() < 1024) {
            if(prevState !== 'block')
                thisMenu.fadeIn(150);
        }
    });
    //If width is less or equal to 1024px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)

    $(".menu-mobile").click(function (e) {
        $(".menu > ul").toggleClass('show-on-mobile');
		$(this).toggleClass('mobile-close');
        e.preventDefault();
    });
    //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)

})(jQuery);

              
            
!
999px

Console