css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <nav>
  <ul>
    <li><a href="https://www.moonwards.com/index.html">Mission</a>
      <ul>
        <li><a>Timeline</a></li>
        <li><a>Model</a></li>
        <li><a>Project</a>
          <ul>
            <li><a>Blogger</a></li>
            <li><a>Forum</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a>Colonies</a>
      <ul>
        <li><a>Lalande</a>
          <ul>
            <li><a>Site</a>
              <ul>
                <li><a>Rockiness</a></li>
                <li><a>Thorium</a></li>
                <li><a>Crater Model</a></li>
              </ul>
            </li>
            <li><a>Structures</a></li>
          </ul>
        </li>
        <li><a>Peary</a>
          <ul>
            <li><a>First Polar Hab</a></li>
          </ul>
        </li>
        <li><a>Orbital</a></li>
      </ul>
    </li>
    <li><a>Machines</a>
      <ul>
        <li><a>Robots</a></li>
        <li><a>Building</a>
          <ul>
            <li><a>Basalt Fiber</a></li>
            <li><a>Melt-In-Place</a></li>
            <li><a>Hangars</a></li>
          </ul>
        </li>
        <li><a>Power</a>
          <ul>
            <li><a>Solar Thermal</a></li>
            <li>
              <li><a>Nuclear Reactors</a></li>
          </ul>
          </li>
          <li><a>Mining</a>
            <ul>
              <li><a>Minerals</a></li>
              <li><a>Refining</a></li>
              <li><a>Excavation</a></li>
            </ul>
          </li>
          <li><a>Transport</a>
            <ul>
              <li><a>Nuclear Shuttles</a></li>
              <li><a>Cargo Ship</a></li>
              <li><a>Vertical Tethers</a></li>
            </ul>
          </li>
      </ul>
      </li>
      <li><a>Learn</a>
        <ul>
          <li><a>Try It</a>
            <ul>
              <li><a>Suborbital Hop</a></li>
              <li><a>Lunar Elevator</a></li>
            </ul>
          </li>
          <li><a>Orbital Mechanics</a>
            <ul>
              <li><a>Transfer Orbits</a></li>
              <li><a>Escape Velocity</a></li>
            </ul>
          </li>
        </ul>
      </li>
  </ul>
</nav>
            
          
!
            
              html {
  margin: 0;
  color: #f7f7dc;
  font: 1rem/1.6rem "Titillium Web", sans-serif;
  background: #000 url(http://www.moonwards.com/img/tycho-mod.png) no-repeat fixed right 250px;
  padding: 0;
  background-size: 1600px; }

/* This is where the good part starts, what's above is just to give a certain look */

/* The first part creates the dark grey bar the menu goes inside */
nav {
  width: 100%; /*it's as wide as the screen, but height is set later*/
  position: fixed; /*so it doesn't move*/
  top: 0;
  left: 0;
  z-index: 20; /*so it sits on top of other content*/
  background-color: #111; }

nav > ul /* this only affects the ul in the menu bar - the child of nav */{
  list-style-type: none; /* no dots beside list items */
  width: 100%; /* wide as its parent, nav */
  height: 1.8rem; /* this sets the height of the menu bar */
  margin: 0; /* margins - use them only when you have to */
  margin-bottom: 0.2rem; /* and here you have to so the words have a bit of space underneath*/
  padding: 0; /* same as margins - only when necessary, and set to 0 otherwise, or browsers shift things around */}

nav a {
  text-decoration: none; /* no underline on links */
  font-weight: 300;
  padding: 0.5rem; /* puts a little space around each link */
  color: #fac819; }
  nav a:visited {
    color: #fac819; }
  nav a:hover {
    color: yellow; 
    background-color: #3c3c0a; }
  nav a:active {
    color: yellow; 
    background-color: #3c3c0a; } 

nav li ul /* this covers all ul which are descendents of li which are descendents of nav. So, any ul in nav that is part of a li. That is all of them in the nav, except the ul that wraps them all, which is covered by nav > ul.*/{
  background-color: rgb(47, 52, 0);
  list-style-type: none; }

nav li ul a /* Similarly, this covers all the links except the links in the ul that wraps everything, in the menu bar*/{
  padding: 0.1rem 0.3rem 0.3rem 0.3rem; }

nav li ul a:hover /* This overrides the green background color on links created in the nav a rules, because otherwise words obcure other words when hovered */{
  background-color: transparent; }

nav > ul > li /* this says the li children of ul child of nav - it only covers the lis directly inside the ul that is the first one inside the nav tags, not the nested ones */{
  display: inline; /* this makes them go in a line horizontally, not vertically */
  font-size: 1.1rem;
  font-weight: 300;
  position: absolute;/* change position calculated from the edges of the parent element */
  top: 0.3rem; } /* put this space between the top edge of the parent element and the top of the lis */

/*The following rules using nth-child space the words in the menu bar along the width of the screen. Because position:absolute is in the previous set of rules, it  applies to everything to do with these lis. So, left measures from the left edge of ul, whichg= has width: 100%, and so does nav, so, from the left edge of the browser window. So divide 100 by the number of li in that ul, and that is the amount to add to each li after the first as a percent. And give the first one a little space on its left side.
After that, you have to undo that spacing on the ul inside each li so they stay inside the window and not too close to the edges. */

nav > ul > li:nth-child(1) {
  left: 1rem; }
  nav > ul > li:nth-child(1) > ul {
    position: relative;
    top: 0; }

nav > ul > li:nth-child(2) {
  left: 25%; }
  nav > ul > li:nth-child(2) > ul {
    position: relative;
    left: -25%; }

nav > ul > li:nth-child(3) {
  left: 50%; }
  nav > ul > li:nth-child(3) > ul {
    position: relative;
    left: -50%; }

nav > ul > li:nth-child(4) {
  left: 75%; }
  nav > ul > li:nth-child(4) > ul {
    position: relative;
    left: -75%; }

/* This targets the uls nested inside the first ul's li, hiding all nested content. The use of > allows the target to be specific. */
nav > ul > li > ul {
  display: none; /* hides the nested li, but not from devices to assist the visually impaired */
  width: 60vw; /* though they aren't shown, their properties can be defined. Here says they are 60 viewport units wide, meaning, 60/100 of the width of the browser window - not of the parent element. */ 
  height: auto; /*This property is what makes the height of the nested ul adjust to the tallest set of elements stacked inside it */
  padding: 0.2rem 1rem 1rem 1rem;
  border-radius: 15px;
  margin: 0; 
  border: 1px solid #50500f;
}

/* Then when those li are hovered over,  */
nav > ul > li:hover > ul {
  display: flex; /*now the child uls display - and in flexbox format, which is how they are made responsive with the remaining markup*/
  align-items: flex-start; /*pushes uls all to the top left*/
  flex-flow: row wrap; } /*gets uls to align in rows and wrap when they run out of space */

/*This section styles the li in the first-level of the menus that appear on hover*/
nav > ul > li > ul > li {
  flex: 1 1 9rem; /*start from a provisional width of 9rem, then shrink or grow as space allows*/
  font-size: 1.2rem;
  font-weight: 300;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start; }

/*This section targets all ul that are descendents of li in the menus that display on hover - so, all the nested uls.*/
nav > ul > li > ul > li ul {
  padding: 0 0.6rem 0.8rem 0.5rem; /*This nests each level in a way that distinguishes it from the parent by the space around it */
  margin: 0;
  margin-bottom: 0.8rem;
  font-size: 0.9em; /* rem units have been used in general, so they are consistent across devices, but here em is used, so that each time something is nested within another ul, the text is 90% the size of the parent ul. This will work with any number of nested levels, until the text is too small to read. */
  letter-spacing: 0.1rem;
  border-left: 2px solid #565610; /*The border on the left side of each ul is the final touch that helps keep the structure clear.*/
}

/*In order for this to work across all modern browsers and IE11, you will need the version with prefixes. I used Bourbon (www.bourbon.io) to insert those prefixes on the SASS version (sass-lang.com). I have another version here on CodePen, that has the prefixes, and doesn't have these comments. It is at https://codepen.io/kimholder/pen/jBBNOe*/


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console