Is there a way to make the dropdown works for this template "JF Calla Exteriors"? I've already clicked YES, for "Show Sub-menu Items". I see the built-in CSS already have the UL and LI css for this menu. I don't see why it is not showing up the dropdown.

Please help.

You must style it with css line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

I would like the dropdown menu to display at the top where the "black" bar is located. Right now the menu is not doing the dropdown. I have added the CSS already. Attached is the screenshot of the page. Can you please see what is the issue to get it work?

Your help is greatly appreciated. Thanks.


Here's my CSS:
------------
#jf-mainnav{
float: right;
border-bottom: 1px solid #fff;
position: relative;
padding: 3px 0 0;
}

#jf-mainnav .nav {
margin: 100px auto;
text-align: center;
}

#jf-mainnav .nav ul ul {
display: none;
}

#jf-mainnav .nav ul li:hover > ul {
display: block;
}

#jf-mainnav .nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}

#jf-mainnav .nav ul:after {
content: ""; clear: both; display: block;
}

#jf-mainnav .nav ul li {
float: left;
}

#jf-mainnav .nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#jf-mainnav .nav ul li:hover a {
color: #fff;
}

#jf-mainnav .nav ul li a {
display: block; padding: 15px 20px;
color: #757575; text-decoration: none;
}


#jf-mainnav .nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#jf-mainnav .nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
#jf-mainnav .nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#jf-mainnav .nav ul ul li a:hover {
background: #4b545f;
}

#jf-mainnav .nav ul ul ul {
position: absolute; left: 100%; top:0;
}
-------------

I need to see your website?

For example this is a error:



#jf-mainnav .nav ul ul {

Ul tag can't be inside another ul...

This is the sample CSS dropdown you have suggested.
line25.com/wp-content/uploads/2012/css-menu/demo/index.html

It also have "nav ul ul"

Uummm....

Simple: www.silent-fran.de/css/tutorial/aufklappmenue.html