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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<nav class="container">
<ul class="top-menu">
  <li><a href="">Главная</a></li>
  <li class="dropdown-standart"><a href="" class="dropdown">Страницы</a>
    <ul class="submenu-standart">
      <li><a href="">Элемент списка</a></li>
      <li><a href="">Элемент списка</a></li>
      <li><a href="">Элемент списка</a></li>
      <li><a href="">Элемент списка</a></li>
      <li><a href="">Элемент списка</a></li>
      <li><a href="">Элемент списка</a></li>
    </ul>
  </li>
  <li><a href="" class="dropdown">Магазин</a>
    <ul class="submenu">
      <li><h3>Колонка 1</h3>
        <ul>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
        </ul>
      </li>
      <li><h3>Колонка 2</h3>
        <ul>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
          <li><a href="">Элемент списка</a></li>
        </ul>
      </li>
      <li>
        <ul>
          <li>
            <a href="" class="link-image">
            <img src="https://html5book.ru/wp-content/uploads/2017/01/white-lady.jpg">
            </a>
          </li>
          <li><h3 class="image-header">Заголовок</h3></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="">Портфолио</a></li>
  <li><a href="">Блог</a></li>
</ul>
</nav>
<div class="content container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis semper nisl et lacinia. Morbi condimentum pretium sapien, eu lacinia eros. Phasellus vitae augue auctor, iaculis nisi quis, maximus orci. Proin ac luctus tellus, et gravida purus. Duis ac aliquet dolor. Nullam nunc est, commodo a orci sed, ullamcorper hendrerit mi. Aliquam dapibus, sem sed porta eleifend, velit justo faucibus justo, a lobortis magna massa id mi. Fusce hendrerit, velit ut pretium molestie, erat diam laoreet eros, eu blandit lectus nisi a elit. Vestibulum ut est lacus. Integer nec velit tellus. Donec egestas tellus sollicitudin felis lobortis, sed cursus felis laoreet. Phasellus vel mi sodales, porttitor mauris mattis, finibus mauris. Nulla gravida viverra lobortis.</p>
<p>Nunc at erat a dolor maximus efficitur aliquet at nisi. Aenean at tempor ex, in molestie ex. Praesent malesuada eleifend vestibulum. Duis nulla mi, volutpat ac porttitor ac, rhoncus ac enim. Donec non gravida risus. Nunc volutpat imperdiet ipsum. Nullam finibus mollis accumsan. Nulla facilisi. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rutrum convallis ornare. Duis pellentesque vestibulum vestibulum. Curabitur suscipit, elit nec bibendum posuere, odio justo hendrerit neque, dapibus pharetra magna libero non ligula. Morbi tempor at nibh quis luctus.</p>
<p>Integer dapibus nisi ac condimentum tincidunt. Aenean ex magna, tempor a eros nec, dignissim dapibus ligula. Fusce porttitor augue sit amet nunc tincidunt aliquam. Pellentesque maximus dui id est fringilla, ac scelerisque magna posuere. Phasellus ante metus, cursus a tortor a, pulvinar aliquet urna. Ut tempor interdum metus. Mauris diam orci, aliquet sit amet molestie ac, vestibulum non sem. Nunc vitae auctor dolor. In dignissim dapibus semper. Etiam ultricies urna suscipit velit convallis, vitae posuere velit venenatis. Nullam auctor mauris a sapien elementum mattis. Aenean posuere nec erat eu maximus.</p>
<p>Nam faucibus, lorem quis suscipit tempor, nulla enim euismod risus, ac luctus sapien tortor ac nunc. Morbi iaculis ipsum quis porta molestie. Duis laoreet fringilla velit, ullamcorper tempus nisi aliquam non. Vestibulum sollicitudin sem nec dolor pretium, quis sodales purus facilisis. Nam sed eros eget leo iaculis laoreet sit amet sit amet mauris. Suspendisse sed sapien a sapien gravida ullamcorper. Aenean id ante ornare, rhoncus odio eget, vestibulum purus. Praesent ut mi eget purus sagittis semper et vel nulla. Duis in magna vitae mauris fermentum pretium. Proin cursus vel dolor eu tincidunt. In nunc ipsum, fermentum in facilisis sollicitudin, consequat sit amet nulla.</p>
<p>Aenean ultricies placerat augue, vitae porttitor arcu rutrum et. Praesent consequat, mi ac ultricies bibendum, dui leo convallis nunc, nec faucibus dolor sapien et risus. Aenean tempor nisi a felis gravida, ut volutpat nisl feugiat. Praesent nec mauris eleifend, dapibus tortor vitae, varius risus. Nunc blandit dolor in erat molestie malesuada. In non diam velit. Morbi eu lectus accumsan, lacinia tellus sed, feugiat orci. Sed sed gravida magna, id luctus justo. Aliquam laoreet tortor nec quam iaculis, non volutpat nisl eleifend. Cras massa lorem, hendrerit et posuere non, faucibus ac risus. Sed accumsan lorem ut sem hendrerit tempor. Maecenas pharetra risus dolor. Mauris sagittis in nisi ac suscipit. Praesent nec magna ipsum.</p>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');
*{box-sizing: border-box;}
body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {text-decoration: none;}
.top-menu {
  background: white;
  position: relative;
}
.top-menu:after, .submenu:after {
  content: "";
  display: table;
  clear: both;
}
.top-menu > li {
  float: left;
}
.top-menu > li > a {
  display: block;
  padding: 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  transition: .2s linear;
}
.top-menu > li > a:hover {color: #B03062;}
.dropdown:after {
  content: "\f107";
  font-family: FontAwesome;
  margin-left: 4px;
  vertical-align: top;
}
.submenu, .submenu-standart {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,.07);
  background: white;
  padding: 25px 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,30px,0);
  transition: .5s ease-out;
  transform-origin: 0% 0%;
}
.submenu {width: 100%;}
.submenu-standart {
  min-width: 200px;
  padding: 10px 0;
}
.dropdown-standart {position: relative;}
.top-menu > li:hover .submenu, .top-menu > li:hover .submenu-standart {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
}
.submenu > li {
  float: left;
  width: calc(100% / 3);
  padding: 0 18px;
  border-right: 1px solid #e5e5e5;
}
.submenu-standart li {padding: 0 18px;}
.submenu > li:last-child {border-right: none;}
.submenu img {
  display: block;
  width: 100%;
}
.submenu li a, .submenu-standart li a {
  display: block;
  padding: 5px 0;
  color: #666;
  font-size: 13px;
}
.submenu li .link-image {padding: 0;}
.submenu li a:hover {color: #B03062;}
.submenu h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.content {
  margin: 20px auto;
  padding: 0 20px;
}
@media(max-width:670px) {
  .top-menu li {
    width: 100%;
    height: auto!important;
  }
  .top-menu > li {border-bottom: 1px solid #e5e5e5;}
  .top-menu > li > a {padding: 18px}
  .submenu,
  .submenu-standart {
    position: relative;
    display: none;
    box-shadow: none;
    padding: 0;
    background: rgba(0,0,0,.02);
  }
  .submenu-standart {padding: 10px 0;}
  .submenu > li {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding: 18px;
  }
  .submenu h3 {margin: 0 0 10px}
  .submenu .image-header {margin: 10px 0}
  .submenu li:last-of-type {border-bottom: none}
  .top-menu > li:hover .submenu,
  .top-menu > li:hover .submenu-standart {display: block;}
}
              
            
!

JS

              
                jQuery(document).ready(function($) {
  $('.submenu > li').matchHeight();
});
              
            
!
999px

Console