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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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>Не пытались ли вы хоть раз записать собственные мысли о деньгах? Возможно, иногда приходится говорить что-то вроде: <em>«Я не могу себе это позволить», «Я не умею обращаться с деньгами», «Богатство портит людей», «Денег на счету недостаточно».</em></p>
    <p>Каждая из этих фраз несет негативную энергию и просто отталкивает деньги. Более того, ваши слова — это команды, которые будут действовать в будущем. Нужно своевременно выявлять и прорабатывать эти негативные подсознательные денежные программы.</p>
    <p>Манера обращения с деньгами является не менее важной, чем ваши мысли.</p>
    <ul><li>Тратите вы деньги с благодарностью за предоставленные услуги или с досадой?</li>
      <li>Возможно, вы стараетесь не платить по счетам?</li>
    <li>Переживаете ли вы из-за недостатка денег?</li>
    <li>Случалось ли вам «жадничать» и скупиться на деньги для других из-за опасений, что в будущем в нужде окажетесь вы?</li>      
    </ul>
    <p>Если такие мысли вам знакомы, самое время изменить и усилить ваши денежные программы. Результаты данного способа привлечения денег вас порадуют.</p>
    <p><strong style="font-size: 1.385em;">1. Замечайте и устраняйте каждую негативную установку, связанную с деньгами</strong></p>
    <p>Все они неразумны. Деньги — это просто средство для покупки товаров и услуг, не так ли? И если вам кажется, что вы недостойны иметь деньги, просто «выбросьте» их из условий уравнения. Подумайте, неужели вы не достойны иметь те вещи и впечатления, которые можно купить за деньги? Хорошая одежда, жилье, еда, отдых… Разумеется, всё это вы можете себе позволить. </p>
    <p>И если ваши прежние установки говорят обратное, попробуйте такое упражнение: <br />Будьте благодарны за всё, что имеете, и радуйтесь тому, что уже у вас есть. Однозначно, вещь или опыт, о котором вы так мечтаете, великолепны, но у вас УЖЕ есть ТАК МНОГО причин быть благодарным. Благодарность за то, что уже есть, откроет вас для получения нового.</p>
    <p><strong style="font-size: 1.385em;">2. Фокусируйте энергию или желание не на привлечении самих денег, а на том, что вы хотите получить благодаря им</strong></p>
    <p>Возможно, для получения желаемого не придется потратить ни копейки*, например, именно предмет мечтаний вам подарят или передадут по наследству. Не стоит концентрироваться только на деньгах. Важно, чтобы ваша энергия желания шла из благодарности: <em>«У меня уже есть так много, и я приглашаю в свою жизнь вещь или событие, о которых мечтаю, чтобы жизнь стала еще лучше».</em> </p>
    <p><strong style="font-size: 1.385em;">3. Никогда не просите с позиции человека, у которого ничего нет</strong></p><p>Если просить иногда приходится, никогда не делайте это с позиции жалости к себе самому. Когда вы давите на эмоции, вы преуменьшаете собственную значимость, показываете себя со стороны жалкого неудачника. </p><p>Чем больше вы показываете себя «просителем», тем сложнее выбраться из этого положения. В подсознании закрепиться мысль: «Если что-то не получится, я всегда смогу попросить помощи». </p><p>Это приведет к двум серьезным последствиям:</p>
    <ul>
      <li>Во-первых, чувствуя подобный «запасной вариант» вы не будете использовать все свои силы и ресурсы, чтобы достичь своих целей. Это входит в привычку, и снова научиться работать с полную силу будет тяжело.</li>
    <li>Во-вторых, во время очередной сложной ситуации вы будете просить помощи. Чем больше помощи вы просите – тем больше зависимы от нее. Это становится причиной новых сложных ситуаций и новых просьб о помощи. Этот замкнутый круг очень непросто разорвать. Для этого необходимо прикладывать максимум усилий, что весьма непросто из-за первого пункта. И ситуация может легко докатиться до полного краха.</li>   
    </ul>
    <p>В этом случае вы фокусируетесь на статусе неудачника и именно нужду привлекаете те в свою жизнь.</p>
    <p><strong style="font-size: 1.385em;">4. Меняйте свои мысли, что бы привлекать деньги</strong></p>
    <p>Придется поработать и быть настойчивым, чтобы каждый раз останавливать нежеланные мысли и замещать их убеждениями с более высокими вибрациями. Например, плохую установку: <em>«Я не умею обращаться с деньгами и трачу их быстрее, чем зарабатываю. Поэтому никогда не имею достаточно денег»,</em> - замещайте утверждением: <em>«Я учусь управлять моими деньгами. Меня переполняет изобилие, и я благодарен за все, что у меня есть».</em> Вы наверняка знаете, в каком из этих утверждений больше счастья.</p>
    <p>Этот принцип изменения денежных установок называется «аффирмации». Наверняка, вы уже слышали про этот метод, но срабатывает он не всегда! </p>
    <p><strong style="font-size: 1.385em;">5. Деньги также являются энергией</strong></p><p>А наша Вселенная так устроена:  чтобы получить что-либо, нужно отдавать. Не обязательно расставаться с деньгами, но отдавать все равно нужно: время, энергию, талант, мудрость и т.д. Идеально, если вы можете делать то, что любите, но если пока это не удается и ваша нынешняя работа вам не нравится, поменяйте свое к ней отношение. </p>
    <p>Создайте бизнес, используя правильный подход. Будьте благодарны за возможность учиться. Будьте довольны, что можете сделать свой вклад во что-то большее. Будьте счастливы тем, что уже есть у вас, и это счастье сделает ваш мир больше и обязательно привлечет деньги (или вещи, о которых вы мечтаете).</p>
    <p><strong style="font-size: 1.385em;">6. Представьте все многообразие способов, которыми деньги можно потратить, а не привлечь</strong></p>
    <p>В особенности подумайте, как благодаря деньгам вы сможете сделать мир лучше. И не обязательно для этого деньги отдавать, — вы можете развивать свои таланты или заниматься любимым делом, и это уже станет подарком для мира. Представьте, как приятно будет иметь деньги, насколько позитивным человеком вы себя почувствуете, усильте свое воображаемую картинку положительными эмоциями. </p>
    <p>Если перестанете фокусироваться на собственном выживании, для которого именно деньги нужны в современном обществе, ваше внимание будет обращено на то, чтобы делать что-то более важное в своей жизни. Представьте, что именно этим вы и занимаетесь. </p>
    <p><strong style="font-size: 1.385em;">7. Проконсультируйтесь со своим «высшим Я»</strong></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>&nbsp; | &nbsp;<a href="http://html-plus.in.ua/wordpress-megamenyu-with-jquery-plugin/">Ссылка на статью</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 –– */
* {
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

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, .bottom{color: #fff;}
footer ul {
  flex: 0 0 30%;
}
footer ul li {
  margin-bottom: 10px;
}
.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;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.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');
}
@media only screen and (min-width: 960px) {
  .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 1em;
    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{
		position: relative;
	}
    .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 .plus {
        cursor: pointer;
        padding: 15px 32px;
        font-weight: bold;
        font-size: 1.5em;
		    position: absolute;
		    top: -1px;
		    right: -10px;
		    width: 80px;
    }
}
            
          
!

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() > 943) {
                $(this).children("ul").fadeIn(150);
                e.preventDefault();
            }
        },
        function(e) {
            if ($(window).width() > 943) {
                $(this).children("ul").fadeOut(150);
                e.preventDefault();
            }
        }
    );
    //If width is more than 943px 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-mobile').removeClass('mobile-close');
        }
    });

    function addPlusLink() {
        if ($(window).width() < 960) {

            if(!$('.menu-dropdown-icon .plus').size()) $('.menu-dropdown-icon').prepend('<a href="#" class="plus">+</a>');
            $('.plus').click(function() {
                var plusText = $(this).text();
				$('.plus').text('+');
                $(this).text(plusText == '+'? '-' : '+');
            })
        } else {
            $('.plus').remove();
        }
    }
	addPlusLink();
	$(window).resize(addPlusLink);
    $(".menu > ul > li").on('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() < 943) {
            if (prevState !== 'block')
                thisMenu.fadeIn(150);
        }
        //		return $(window).width() < 960 ?  false : true;
    });
    //If width is less or equal to 943px 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