/    Sign up×
Community /Pin to ProfileBookmark

How do I add a dropdown menu to this standard horizontal menu?

Copy linkTweet thisAlerts:
Sep 04.2012

[code=html] <style type=”text/css”>/**/
#navigation-bar{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position:relative;
z-index:5;
height:40px;
-moz-box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
margin-bottom:40px;
display:block;
position:relative;
z-index:9999;
}
.ie #navigation-bar{
border-bottom:1px solid #E5E5E5
}

.touchdown-list {
display: block;
}
.touchdown {
display: none;
}
#primary-nav{
float:left

}
#primary-nav select.touchdown {
width:100%;
padding:7px 5px;
}
#primary-nav select.touchdown option{
color:#777;
padding:5px 10px;
display:block;
}
#primary-nav select.touchdown option:hover{
background-color:#D62831;
text-shadow:0 1px 0 rgba(0,0,0,0.3)
}

.ie7 .m-menu{
width:auto
}
.m-menu ul{
list-style-type: none;

}
.m-menu ul li{
position: relative;
z-index:9999;
display: inline;
float: left;
padding:0

}

.m-menu ul > li:hover > a{
color:#FFF;
text-decoration:none;

}
.m-menu ul > li.menu-item-home > a{
text-indent:-9999px;
width:25px;
height:22px;
background:url(../images/icon-home.png) no-repeat center 10px;

}
.m-menu ul > li.menu-item-home.current > a,.m-menu ul > li.menu-item-home:hover > a,.m-menu ul > li.menu-item-home.current-menu-item > a{
background-position:center -30px !important
}

.m-menu ul > li:first-child{
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.m-menu ul > li {
transition:color,background-color,text-shadow linear .2s;
-moz-transition:color,background-color linear .2s;
-webkit-transition:color,background-color linear .2s;
-o-transition:color,background-color linear .2s;
background-image:url(../images/light-overlay.png);
background-repeat:repeat-x;
background-position:left -100px;
/*text-shadow:0 1px 0 #FFF;*/

}
.m-menu ul li a{
padding:9px 15px;
display: block;
color:#777;

}
.m-menu ul > li:hover{
background-color:#555;
background-position:left 3px;
/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
}

.m-menu ul > li.current,.m-menu ul > li.current-menu-item,.m-menu ul > li.current_page_item,.m-menu ul > li.current-menu-ancestor,.m-menu ul > li.current-menu-parent{
background-color:#d62831;
background-position:left 3px;
box-shadow: inset 0 1px 0 rgba(0,0,0,.2), inset 0 -1px 0 rgba(0,0,0,.2), inset -1px 0 0 rgba(0,0,0,.1), inset 1px 0 0 rgba(0,0,0,.1);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.2), inset 0 -1px 0 rgba(0,0,0,.2), inset -1px 0 0 rgba(0,0,0,.1), inset 1px 0 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.2), inset 0 -1px 0 rgba(0,0,0,.2), inset -1px 0 0 rgba(0,0,0,.1), inset 1px 0 0 rgba(0,0,0,.1);

}
.m-menu ul > li.current > a,.m-menu ul > li.current-menu-item > a,.m-menu ul > li.current_page_item > a,.m-menu ul > li.current-menu-ancestor > a,.m-menu ul > li.current-menu-parent > a{

color:#FFF;
text-shadow:0 1px 0 rgba(0,0,0,0.3);
}
.m-menu ul li span.sub-nav{
background:url(../images/drop-down-arr.png) no-repeat 0 0;
width:9px;
height:9px;
overflow:hidden;
position:absolute;
right:8px;
top:16px;
text-indent:-9999px
}

.m-menu ul > li a.parent{
padding-right: 15px;
position:relative
}
.m-menu > div > ul:first-child > li > a.parent{
padding-right:25px
}
/*Level 2*/
.m-menu ul li div{
position: absolute;
z-index:9998;
left: 0;

width:210px;
box-shadow:0px 5px 10px rgba(0,0,0,0.1),inset 1px 1px 0 #FFF,inset -1px -1px 0 #FFF;
-moz-box-shadow:0px 5px 10px rgba(0,0,0,0.1),inset 1px 1px 0 #FFF,inset -1px -1px 0 #FFF;
-webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.1),inset 1px 1px 0 #FFF,inset -1px -1px 0 #FFF;
}

.m-menu ul li ul{
/*display: none;*/ /*collapse all sub menus to begin with*/
/*visibility: hidden;*/
display:none;
float:left;
}

ul.simple-drop-down-menu li ul li a span{
background-position:0 -9px;
top:10px;
}
.m-menu ul li ul li{
background:#fbfbfb !important;
width:210px;
border-bottom:1px solid #f2f2f2;
border-top:1px solid #fff;
display:list-item;
margin-right:0;
transition:none !important;
-moz-transition:none !important;
-webkit-transition:none !important;
}
.m-menu ul li ul li:last-child{
border-bottom:none
}

.m-menu ul li ul li a{
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
padding:8px 10px;
display:block;
border-left:0px solid transparent

}
.ie7 .m-menu ul li ul li a{

height:22px;
}
.m-menu ul:first-child li.current-menu-parent ul li.current-menu-item.current_page_item > a,
.m-menu ul li ul li:hover > a,.m-menu > ul > li.current_page_parent ul li a,
.m-menu > ul > li.current-menu-ancestor ul li.current_page_item a,
.m-menu > ul > li.current-menu-parent ul li.current-menu-item a,.m-menu ul li ul li.current-menu-ancestor > a,.m-menu ul li ul li.current-menu-ancestor .current-menu-item > a{
border-left:5px solid #565656;
background-color:#FFF;
color:#787878;
padding-left:10px;
text-shadow:none

}
.m-menu ul li ul li:hover{
background:#FFF;
}
.m-menu ul li ul li a .sub-nav{
background-position:0 -9px;
top:10px;
}
.m-menu ul li ul li a:hover{
background:#FFF;
text-decoration:none;
}
.m-menu ul li ul li div{
left:100.5%;
top:-1px;

}
/*Vertical*/
.m-menu.vertical ul li{
display:list-item !important;
float:none !important
}
.m-menu.vertical ul li div{
left:100%;
margin-left:1px;
top:0;

width:200px
}
.form-row{
padding:10px 0
}

.icon-boxes-wrapper .icon-icon,.icon-boxes-wrapper2 .icon-icon{
float:left;
margin-right:15px;
}
.icon-boxes-wrapper .icon-content{
padding-top:5px;
overflow:hidden
}

.icon-boxes-wrapper2 .icon-header div h4.icon-heading{
margin-bottom:5px !important;
}
.icon-boxes-wrapper2 .icon-header div p{
font-size:11px;
}
.icon-boxes-wrapper2 .icon-content{
padding-top:20px;
background:url(../images/sp.png) top repeat-x;
overflow:hidden
}

/*List*/

ul.md-list li:first-child{
border-top:none !important
}
ul.md-list li:last-child{
border-bottom:none !important
}
ul.md-list li{
background-repeat:no-repeat;
background-position: left 12px;
padding-top:10px;
padding-bottom:10px;
border-top:1px solid rgba(255,255,255,.8);
border-bottom:1px solid rgba(0,0,0,.1);
}
.bullet li,.star li,.tick li,.bubble li,.doc li,.info li,.arrow li,.plus li,.cross li{
padding-left:25px;
}
ul.md-list.bullet li{
background-image:url(../images/list-bullet.png)
}
ul.md-list.star li{
background-image:url(../images/list-star.png)
}
ul.md-list.tick li{
background-image:url(../images/list-tick.png)
}
ul.md-list.bubble li{
background-image:url(../images/list-bubble.png)
}
ul.md-list.doc li{
background-image:url(../images/list-doc.png)
}
ul.md-list.info li{
background-image:url(../images/list-info.png)
}
ul.md-list.arrow li{
background-image:url(../images/list-arrow.png)
}
ul.md-list.plus li{
background-image:url(../images/list-plus.png)
}
ul.md-list.cross li{
background-image:url(../images/list-cross.png)
}

ul.list-news li{
padding-top:20px;
padding-bottom:15px;
overflow:hidden
}
ul.list-news li:first-child{
padding-top:0px !important
}
ul.list-news li p{
margin-bottom:10px
}
ul.list-news li .alignleft{
margin-bottom:5px
}
.carousel-flexslider h4,.carousel-flexslider h5{
margin-bottom:0
}
.ie8 .carousel-flexslider ul li .img-border{
float:none !important /*IE8 Sucks !*/

}</style>

<nav id=”navigation-bar”>
<div id=”primary-nav” class=”m-menu”>
<div class=”menu-primary-menu-container”><ul id=”menu-primary-menu” class=”menu”><li id=”menu-item-644″ class=”menu-item-home menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-644″><a href=”index.html”>Home</a></li>
<li id=”menu-item-898″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-898″><a title=”About” href=”About”>About Us</a></li>
<li id=”menu-item-939″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-939″><a href=”/partners”>Services</a></li>
<li id=”menu-item-903″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-903″><a href=”/about”>Client Testimonials</a></li>
<li id=”menu-item-865″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-865″><a href=”contact/index.html”>Contact</a></li>
</ul></div> </div>

</nav>[/code]

Thanks in advance!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@alannSep 04.2012 — Do you only want to use HTML/CSS or is JS an option?

Also, for rounded corners google the term PIE.js. Use this in conjunction with the CSS attribute "border-radius" and you do not have to use so many radius attributes in your CSS.

As for the CSS you have built already, you can simply add the following CSS for a drop down:
[code=html].m-menu ul:hover ul{
background: none;
display:block;
margin-top: 0px;
position: absolute;
}
html .m-menu ul:hover ul li{
display:list-item;
}[/code]

Then to create the subnav sections just create a UL inside of the top level LI. Below is an example.

[code=html]
<ul>
<li><a href="">Top Level LI Link</a>
<ul>
<li><a href="">Sub Nav Link</a>
</li>
</ul>
</li><!--make sure to close the top level link after completing the sub nav UL -->
</ul>[/code]
Copy linkTweet thisAlerts:
@SupplementauthorSep 04.2012 — JS is an option, although I'd prefer to keep it html and css, but I love to see both options. Thank you.
Copy linkTweet thisAlerts:
@WestWebSep 04.2012 — Change your about us list item html to look like this:

[CODE]
<li id="menu-item-898" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-898"><a title="About" href="About">About Us</a>
<ul>
<li><a href="#">About Seinfeld</a></li>
<li><a href="#">About George</a></li>
<li><a href="#">About Kramer</a></li>
<li><a href="#">About Elaine</a></li>
</ul>
</li>
[/CODE]

Then add this block of css to make the sub menu show:

[CODE]
.m-menu ul li:hover ul {
display: block;
}
[/CODE]

Then you will likely need to do some css adjusting to get it to display how you like.
Copy linkTweet thisAlerts:
@SupplementauthorSep 04.2012 — Thank you so much, that looks sweet! Exactly what I was looking for and didn't lose any functionality of the menu.
×

Success!

Help @Supplement spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...