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

              
                <!-- Thanks 
Axis Praxis , LettError, Jen Simmons for layoutland

-->


<nav class="menu">
  <ol>
    <li class="menu-item"><a href="#0">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Big Widgets</a></li>
        <li class="menu-item"><a href="#0">Bigger Widgets</a></li>
        <li class="menu-item"><a href="#0">Huge Widgets</a></li>
      </ol>
    </li>
    <li class="menu-item">
      <a href="#0">Kabobs</span></a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Shishkabobs</a></li>
        <li class="menu-item"><a href="#0">BBQ kabobs</a></li>
        <li class="menu-item"><a href="#0">Summer kabobs</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#0">Contact</a></li>
  </ol>
</nav>
              
            
!

CSS

              
                @font-face {
  font-family: "mutator";
  src: url("data:;base64,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")
    format("truetype");
}

html{
	font-family: sans-serif;
	font-family: "mutator";
	text-transform: uppercase;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-size: 10px;
    font-size: 62.5%;
}

*{
	transition: all 0.3s ease;
}
body, ol, li{
	margin: 0;
}

ol, li{
	list-style: none;
	padding-left: 0; 
}

nav > ol > li {
	background: #ccc;
}

a{
	text-decoration: none;
	color: black;
}

/*==================================
=            grid             =
==================================*/

nav > ol{
	display: grid;
	grid-template-rows: minmax(20vh, auto) minmax(30vh, auto) minmax(50vh, auto);
	grid-template-columns: minmax(1fr, 300px) minmax(1fr, 300px) minmax(1fr, 300px) minmax(1fr, 300px);
}

/*==================================
=            flex            =
==================================*/

nav > ol > li:nth-child(1), 
nav > ol > li:nth-child(2),  
nav > ol > li:nth-child(1) a, 
nav > ol > li:nth-child(2) a,  
nav > ol > li:nth-child(5),
nav > ol > li:nth-child(3),
nav > ol > li:nth-child(4),
nav > ol > li:nth-child(3) ol, 
nav > ol > li:nth-child(4) ol,
nav > ol > li:nth-child(3) ol li a,
nav > ol > li:nth-child(4) ol li a{
	display: flex;
}

nav > ol > li:nth-child(1), 
nav > ol > li:nth-child(2), 
nav > ol > li:nth-child(4), 
nav > ol > li:nth-child(5),
nav > ol > li:nth-child(3){
	-ms-align-items: center;
	align-items: center;
}

nav > ol > li:nth-child(1), 
nav > ol > li:nth-child(2), 
nav > ol > li:nth-child(1) a, 
nav > ol > li:nth-child(2) a,  
nav > ol > li:nth-child(4),
nav > ol > li:nth-child(5),
nav > ol > li:nth-child(3),
nav > ol > li:nth-child(3) ol li a,
nav > ol > li:nth-child(4) ol li a{
	justify-content: center;
}

nav > ol > li:nth-child(1),
nav > ol > li:nth-child(2),
nav > ol > li:nth-child(3) ol, 
nav > ol > li:nth-child(4) ol{
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

nav > ol > li:nth-child(1) a,
nav > ol > li:nth-child(2) a,
nav > ol > li:nth-child(3) ol li a,
nav > ol > li:nth-child(4) ol li a{
  flex-direction: row;
}

nav > ol > li:nth-child(3) > a, 
nav > ol > li:nth-child(4) > a{
	-ms-align-self: center;
	align-self: center;
}


// text align
nav > ol > li:nth-child(3) ol li a,
nav > ol > li:nth-child(4) ol li a{
  text-align: center;
}

nav > ol > li:nth-child(5), nav > ol > li:nth-child(3) > a, nav > ol > li:nth-child(4) > a{
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-transform: uppercase;
}


/*==================================
=            grid sizes            =
==================================*/

/*home*/
nav > ol > li:nth-child(1){
	grid-row: 1 / span 1;
}

/*about*/
nav > ol > li:nth-child(2){
	grid-row: 1 / span 1;
}

/*widgets*/
nav > ol > li:nth-child(3){
	grid-row: 2 / span 1;
	grid-column: 1 / span 2;
}

/*kabobs*/
nav > ol > li:nth-child(4){
	grid-row: 3 / span 1;
	grid-column: 1 / span 2;
}

/*contact*/
nav > ol > li:nth-child(5){
	grid-row: 1 / span 3;
	grid-column: 3 / span 2;
}

/*==================================
=            styling            =
==================================*/

nav > ol > li:nth-child(1) a::before,
nav > ol > li:nth-child(1) a::after,
nav > ol > li:nth-child(2) a::before,
nav > ol > li:nth-child(2) a::after,
nav > ol > li:nth-child(3) ol li a::before,
nav > ol > li:nth-child(3) ol li a::after,
nav > ol > li:nth-child(4) ol li a::before,
nav > ol > li:nth-child(4) ol li a::after{
  flex-grow: 1;
  content: '\a0';
  background-color: white;
  position: relative;
  top: 0.5em;
}

nav > ol > li:nth-child(1) a::before,
nav > ol > li:nth-child(1) a::after,
nav > ol > li:nth-child(2) a::before,
nav > ol > li:nth-child(2) a::after{
  height: 10px;
}

nav > ol > li:nth-child(3) ol li:nth-child(1) a::before,
nav > ol > li:nth-child(3) ol li:nth-child(1) a::after{
	height: 10px;
}
nav > ol > li:nth-child(3) ol li:nth-child(2) a::before,
nav > ol > li:nth-child(3) ol li:nth-child(2) a::after{
	height: 10px;
}
nav > ol > li:nth-child(3) ol li:nth-child(3) a::before,
nav > ol > li:nth-child(3) ol li:nth-child(3) a::after{
	height: 10px;
}

nav > ol > li:nth-child(4) ol li a::before,
nav > ol > li:nth-child(4) ol li a::after{
  height: 10px;
}

nav > ol > li:nth-child(1) a::before,
nav > ol > li:nth-child(2) a::before,
nav > ol > li:nth-child(3) ol li a::before,
nav > ol > li:nth-child(4) ol li a::before{
  margin-right:10px;
}

nav > ol > li:nth-child(1) a::after,
nav > ol > li:nth-child(2) a::after,
nav > ol > li:nth-child(3) ol li a::after,
nav > ol > li:nth-child(4) ol li a::after{
  margin-left:10px;
}


/*==================================
=            borders            =
==================================*/

nav > ol > li{
	border-bottom: 2px dotted black;
	border-right: 2px dotted black;
}

/*home*/
nav > ol > li:nth-child(1){
	border-left: 2px dotted black;
	border-top: 2px dotted black;
}

/*about*/
nav > ol > li:nth-child(2){
	border-top: 2px dotted black;
}

/*widgets*/
nav > ol > li:nth-child(3){
	border-left: 2px dotted black;
}

/*kabobs*/
nav > ol > li:nth-child(4){
	border-left: 2px dotted black;
}

/*contact*/
nav > ol > li:nth-child(5){
	border-top: 2px dotted black;
}


/*==================================
=            width            =
==================================*/
nav > ol > li:nth-child(1) a, 
nav > ol > li:nth-child(2) a,
nav > ol > li:nth-child(3) ol, 
nav > ol > li:nth-child(4) ol,
nav > ol > li:nth-child(3) ol li a,
nav > ol > li:nth-child(4) ol li a{
	width: 90%;

	margin: 0 auto;	
}

/*==================================
=            padding            =
==================================*/

nav > ol > li:nth-child(3) ol, nav > ol > li:nth-child(4) ol{
	width: 100%;
	padding: 0 0 0 4rem;
}

nav > ol > li:nth-child(3) ol li, nav > ol > li:nth-child(4) ol li{
	padding: 10px 0;
}

// widget & kabob title

nav > ol > li:nth-child(5), 
nav > ol > li:nth-child(3) > a, 
nav > ol > li:nth-child(4) > a{
	writing-mode: vertical-rl !important;
	text-orientation: upright !important;
	text-transform: uppercase !important;
}

/*==================================
=            font variation        =
==================================*/

/*home*/
nav > ol > li:nth-child(1){
	font-variation-settings: "wght" 100, "wdth" 400;
}

/*about*/
nav > ol > li:nth-child(2){
	font-variation-settings: "wght" 100, "wdth" 400;
}

/*widgets*/
nav > ol > li:nth-child(3), 
nav > ol > li:nth-child(4) {
	font-variation-settings: "wght" 400, "wdth" 700;
}

/*widgets inner*/
nav > ol > li:nth-child(3) li:nth-child(1){
	font-variation-settings: "wght" 200, "wdth" 200;
}

nav > ol > li:nth-child(3) li:nth-child(2){
	font-variation-settings: "wght" 200, "wdth" 700;
}

nav > ol > li:nth-child(3) li:nth-child(3){
	font-variation-settings: "wght" 200, "wdth" 1000;
}

/*kabobs*/
nav > ol > li:nth-child(4){
	font-variation-settings: "wght" 400, "wdth" 700;
}

/*contact*/
nav > ol > li:nth-child(5){
	font-variation-settings: "wght" 100, "wdth" 700;
}

// widget & kabob title
nav > ol > li:nth-child(3) > a, 
nav > ol > li:nth-child(4) > a{
	font-variation-settings: "wght" 100, "wdth" 700;
}


/*==================================
=            font size            =
==================================*/

/*home*/
nav > ol > li:nth-child(1), nav > ol > li:nth-child(2){
	font-size: 3.6rem;
}

/*widgets inner*/
nav > ol > li:nth-child(3) li{
	font-size: 3.0rem;
}

/*kabobs*/
nav > ol > li:nth-child(4){
	font-size: 4.8rem;
}

/*contact*/
nav > ol > li:nth-child(5){
	font-size: 4.8rem;
}

nav > ol > li:nth-child(3) > a, 
nav > ol > li:nth-child(4) > a{
	font-size: 1.4rem !important;
	margin-left: 2rem;
	margin-right: 2rem;
}


/*==================================
=            hover        =
==================================*/

li:hover, li a:hover{
  background: cornflowerblue;
}

li:hover a{
  color: white;
}

nav > ol > li:nth-child(3) ol li:hover a, 
nav > ol > li:nth-child(4) ol li:hover a,
nav > ol > li:nth-child(5):hover a{
  font-variation-settings: "wght" 100, "wdth" 100;
  
}

/*==================================
=            mobile        =
==================================*/

@media screen and (max-width: 1000px){
	nav > ol > li:nth-child(5){
		font-size: 2rem;
	}
	nav > ol > li:nth-child(4){
		font-size: 1.4rem;
	}
	nav > ol > li:nth-child(3) li:nth-child(1){
		font-size: 1.4rem;
	}

	nav > ol > li:nth-child(3) li:nth-child(2){
		font-size: 1.4rem;
	}

	nav > ol > li:nth-child(3) li:nth-child(3){
		font-size: 1.4rem;
	}
	nav > ol > li:nth-child(1){
		font-size: 1.4rem;
	}
	nav > ol > li:nth-child(2){
		font-size: 1.4rem;
	}
	nav > ol > li:nth-child(3) ol, nav > ol > li:nth-child(4) ol{
		padding: 0 0 0 2rem;
	}
	
	nav > ol > li:nth-child(5) a{
		padding-right: 20px;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console