LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

How it works


ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

Using relative positioning for the parent li allows it to be used as a container for absolutely positioned child elements.


li ul {
  display: none; 
}

This hides the dropdown menus until hovering over a parent li.


li:hover > ul {
  display: block; 
  position: absolute;
}

This displays the dropdown ul when hovering over a parent li, using li:hover ul for the selector without the > child combinator selector will work for single level dropdowns.


ul ul ul {
    left: 100%;
    top: 0;
}

Poisitions the second level dropdowns to the right of the first level dropdown.

CSS
ul {
  list-style: none; 
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}
ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}
/* This hides the dropdowns */
li ul {
  display: none;
}
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
ul li a:hover {
  background: #2c3e50;
}
/* Display the dropdown */
li:hover > ul {
  display: block; 
  position: absolute;
}
/* Remove float from dropdown lists */
li:hover li {
    float: none;
}
li:hover a {
  background: #1bc2a2;
}
li:hover li a:hover {
  background: #2c3e50;
}
.main-navigation li ul li {
  border-top: 0;
}
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
  left: 100%;
  top: 0; 
}


/* Simple clearfix */

ul:before,
ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

ul:after {
    clear: both;
}
Host Instantly Drag and Drop Website Builder

 

Description

A simple, multilevel CSS dropdown menu.
Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID