Main Content
Dropdown Styles
Standard Wireframing Elements
Dropdown Style 1
Close
HTML
<section class="dropstyle-1">
<div class="container">
<nav>
<div><!-- this div will be generated by wp menu -->
<ul>
<li><a href="#">Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</section>
CSS
/*************************/
/*** Dropdown Style 1 ***/
/************************/
.dropstyle-1{
min-height: 200px;
}
.dropstyle-1 nav > div > ul{
text-align: center;
}
.dropstyle-1 nav > div > ul > li{
position: relative;
max-width: 107px;
margin: 0 auto;
padding-bottom: 5px;
}
.dropstyle-1 nav > div > ul > li > a{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #009bbb;
font-size: 12px;
color: #fff;
display: block;
text-decoration: none;
padding: 11px 0;
max-width: 107px;
position: relative;
margin-bottom: 4px;
}
.dropstyle-1 nav > div > ul > li.drop_arrow > a:after{
display: block;
content: "";
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
position: absolute;
right: 8px;
top: 50%;
margin-top: -3px;
}
.dropstyle-1 nav > div > ul > li > ul.sub-menu{
position: absolute;
left: 0;
width: 152px;
height: auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #b1b1b1;
padding: 10px;
}
.dropstyle-1 nav > div > ul > li > ul.sub-menu > li{
display: block;
text-align: left;
}
.dropstyle-1 nav > div > ul > li > ul.sub-menu > li > a{
text-decoration: none;
display: block;
padding: 8px 0;
font-size: 12px;
color: #777;
}
/*************************/
/*** Dropdown Style 1 ***/
/************************/
CSS Mobile
Javascript
Dropdown Style 2
Close
HTML
<section class="dropstyle-2">
<div class="container">
<nav>
<div><!-- this div will be generated by wp menu -->
<ul>
<li><a href="#">Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</section>
CSS
/*************************/
/*** Dropdown Style 2 ***/
/************************/
.dropstyle-2{
min-height: 200px;
}
.dropstyle-2 nav > div > ul{
text-align: center;
}
.dropstyle-2 nav > div > ul > li{
position: relative;
max-width: 152px;
margin: 0 auto;
padding-bottom: 10px;
}
.dropstyle-2 nav > div > ul > li > a{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 12px;
color: #009bbb;
display: block;
text-decoration: none;
padding: 11px 15px;
max-width: 152px;
position: relative;
margin-bottom: 4px;
text-align: left;
}
.dropstyle-2 nav > div > ul > li > a:before{
display: block;
width: 100%;
height: 1px;
background: #009bbb;
content: "";
position: absolute;
left: 0;
bottom: 0;
}
.dropstyle-2 nav > div > ul > li.drop_arrow > a:after{
display: block;
content: "";
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #009bbb;
position: absolute;
right: 8px;
top: 50%;
margin-top: -3px;
}
.dropstyle-2 nav > div > ul > li > ul.sub-menu{
position: absolute;
left: 0;
width: 152px;
top: 47px;
height: auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #009bbb;
}
.dropstyle-2 nav > div > ul > li > ul.sub-menu > li{
display: block;
text-align: left;
}
.dropstyle-2 nav > div > ul > li > ul.sub-menu > li > a{
text-decoration: none;
display: block;
padding: 10px;
font-size: 12px;
color: #777;
border-top: 1px solid #009bbb;
position: relative;
}
.dropstyle-2 nav > div > ul > li > ul.sub-menu > li:first-child > a{
border-top: none;
}
/*************************/
/*** Dropdown Style 2 ***/
/************************/
CSS Mobile
Javascript
Dropdown Style 3
Close
HTML
<section class="dropstyle-3">
<div class="container">
<nav>
<div><!-- this div will be generated by wp menu -->
<ul>
<li><a href="#">Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</section>
CSS
/*************************/
/*** Dropdown Style 3 ***/
/************************/
.dropstyle-3{
min-height: 200px;
}
.dropstyle-3 nav > div > ul{
text-align: center;
}
.dropstyle-3 nav > div > ul > li{
position: relative;
max-width: 152px;
margin: 0 auto;
padding-bottom: 10px;
}
.dropstyle-3 nav > div > ul > li > a{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 12px;
color: #fff;
background-color: #009bbb;
display: block;
text-decoration: none;
padding: 11px 15px;
max-width: 152px;
position: relative;
margin-bottom: 4px;
text-align: left;
}
.dropstyle-3 nav > div > ul > li.drop_arrow > a:after{
display: block;
content: "";
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #009bbb;
position: absolute;
right: 8px;
top: 50%;
margin-top: -3px;
}
.dropstyle-3 nav > div > ul > li > ul.sub-menu{
position: absolute;
left: 0;
width: 152px;
top: 47px;
height: auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #009bbb;
padding: 10px 0;
}
.dropstyle-3 nav > div > ul > li > ul.sub-menu:after{
width: 0px;
height: 0px;
display: block;
content: "";
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 7px solid #009bbb;
position: absolute;
right: 8px;
top: -7px;
}
.dropstyle-3 nav > div > ul > li > ul.sub-menu > li{
display: block;
text-align: left;
}
.dropstyle-3 nav > div > ul > li > ul.sub-menu > li > a{
text-decoration: none;
display: block;
padding: 10px;
font-size: 12px;
color: #fff;
border-top: 1px solid #009bbb;
position: relative;
}
.dropstyle-3 nav > div > ul > li > ul.sub-menu > li:first-child > a{
border-top: none;
}
/*************************/
/*** Dropdown Style 3 ***/
/************************/
CSS Mobile
Javascript
Dropdown Style 4
Close
HTML
<section class="dropstyle-4">
<div class="container">
<nav>
<div><!-- this div will be generated by wp menu -->
<ul>
<li><a href="#">Button 1</a></li>
<li class="active"><a href="#">Button 2</a>
<div class="mega-menu">
<div class="mega-wrap">
<h2>Button 2</h2>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div>
</nav>
</div>
</section>
CSS
/*************************/
/*** Dropdown Style 4 ***/
/************************/
.dropstyle-4{
min-height: 500px;
}
.dropstyle-4 nav{
width: 100%;
height: auto;
background: #009bbb;
}
.dropstyle-4 nav > div > ul{
text-align: center;
position: relative;
font-size: 0;
}
.dropstyle-4 nav > div > ul > li{
display: inline-block;
vertical-align: top;
}
.dropstyle-4 nav > div > ul > li > a{
color: #fff;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
display: block;
padding: 19px 44px;
position: relative;
}
.dropstyle-4 nav > div > ul > li:hover > a,
.dropstyle-4 nav > div > ul > li.active > a{
background: #00728a;
}
.dropstyle-4 nav > div > ul > li > a:after{
display: block;
content: "";
background: #fff;
content: "";
width: 1px;
height: 50%;
position: absolute;
left: 0;
top: 50%;
margin-top: -9%;
}
.dropstyle-4 nav > div > ul > li.next-active > a:after,
.dropstyle-4 nav > div > ul > li.active > a:after{
display: none;
}
.dropstyle-4 nav > div > ul > li:first-child > a:after{
display: none;
}
.dropstyle-4 nav > div > ul > li .mega-menu{
position: absolute;
left: 0;
top: 50px;
width: 100%;
border: solid 1px #009bbb;
border-top: none;
text-align: left;
}
.dropstyle-4 nav > div > ul > li .mega-menu .mega-wrap{
width: 70%;
margin: 0 auto;
padding-top: 22px;
}
.dropstyle-4 nav > div > ul > li .mega-menu .mega-wrap h2{
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #009bbb;
border-bottom: 2px solid #009bbb;
padding: 18px 0;
}
.dropstyle-4 nav > div > ul > li .mega-menu .mega-wrap ul{
display: inline-block;
vertical-align: top;
width: 24%;
padding-top: 25px;
padding-bottom: 35px
}
.dropstyle-4 nav > div > ul > li .mega-menu .mega-wrap ul li a{
font-size: 12px;
color: #898989;
text-decoration: none;
display: block;
padding: 10px 0;
}
/*************************/
/*** Dropdown Style 4 ***/
/************************/
CSS Mobile
Javascript
Dropdown Style 5
Close
HTML
<section class="dropstyle-5">
<div class="container">
<nav>
<div><!-- this div will be generated by wp menu -->
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
</li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div>
</nav>
</div>
</section>
CSS
/*************************/
/*** Dropdown Style 5 ***/
/************************/
.dropstyle-5{
min-height: 500px;
}
.dropstyle-5 nav{
width: 100%;
height: auto;
border: solid 1px #009bbb;
}
.dropstyle-5 nav > div > ul{
text-align: center;
position: relative;
}
.dropstyle-5 nav > div > ul > li{
display: inline-block;
vertical-align: top;
position: relative;
}
.dropstyle-5 nav > div > ul > li > a{
color: #009bbb;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
display: block;
padding: 19px 44px;
}
.dropstyle-5 nav > div > ul > li > ul{
position: absolute;
left: 0;
top: 45px;
border-top: 4px solid #009bbb;
width: 100%;
}
.dropstyle-5 nav > div > ul > li > ul a{
display: block;
width: 100%;
border-top: 1px solid #009bbb;
background: #00728a;
color: #fff;
text-decoration: none;
font-size: 12px;
padding: 10px 0;
}
/*************************/
/*** Dropdown Style 4 ***/
/************************/
CSS Mobile
Javascript