There are a ton of dropdown menu plugins, examples, downloads, and places to find them. Still, many of them are tricky to implement and often require a lot of customization to get them to work with WordPress. So, here is my version, which in my opinion, gives a dropdown menu in a very simplistic form. This will work with WordPress without any extra effort and can also be used with Bootstrap, Tailwind, Foundation or another CSS framework.
Working Example
The CSS
/* ===== Top ===== */
#navigation ul {
list-style:none;
margin:0;
padding:1px 0;
}
#navigation ul li{
display:inline-block;
}
/* ===== First Level ===== */
#navigation ul li {
position:relative;
padding:0;
margin:0;
border-right:1px solid #999;
background: #aaa;
}
#navigation ul ul li {
border:none;
background: #777;
}
#navigation ul li a {
display:block;
text-decoration:none;
font-size:18px;
color:#fff;
padding:0 30px;
line-height:43px;
}
#navigation ul li:hover a {
position:relative;
background:#777;
color:#fff;
}
#navigation ul ul, #navigation ul li:hover ul ul {
position:absolute;
display:none;
}
#navigation ul ul li:hover ul, #navigation ul li:hover ul li:hover ul {
display:block;
top:0px;
left: 100%;
}
/* ===== Second and Third Level ===== */
#navigation ul li:hover ul {
display:block;
position:absolute;
left:0;
top:100%;
width:auto;
height:auto;
margin:0;
padding:0;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
#navigation ul ul {
background:#777;
}
#navigation ul ul ul {
background:#e4e4e4 !important;
border-color:#e4e4e4 !important;
margin-left:-14px;
}
#navigation ul ul li a {
float:none;
width:180px;
line-height:normal;
font-variant:normal;
font-weight:normal;
font-size:14px;
color:#fff;
text-transform:none;
padding:6px 10px;
background:none !important;
}
#navigation ul ul ul li a {
color:#fff;
font-weight:bold;
}
#navigation ul ul li:hover>a {
background:#fff !important;
color:#999 !important;
}
#navigation ul ul ul li:hover>a {
background:#eee !important;
color: #777 !important;
}
The HTML
<div id="navigation">
<ul>
<li><a href="">About</a></li>
<li><a href="">Home</a></li>
<li><a href="">Services</a>
<ul>
<li><a href="">Construction</a></li>
<li><a href="">Home Building</a></li>
<li><a href="">Wood Work >></a>
<ul>
<li><a href="">Deck Building</a></li>
<li><a href="">Custom Cabinets</a></li>
</ul>
</li>
<li><a href="">Welding</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
You can use this dropdown menu with WordPress or any modern CSS framework.
Leave a Reply