VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
CHECK OUT OUR PAGE ON GOOGLE +
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Dropdown menu?

Dropdown menu? 16 Aug 2013 05:14 #2747

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.

  • Posts:7
  • sensor
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Dropdown menu? 16 Aug 2013 07:54 #2750


  • Posts:502
  • theres no place like joomfreak.com
  • m.freak
  • Platinum Boarder
  • OFFLINE
  • Karma: 0

Re: Dropdown menu? 16 Aug 2013 14:51 #2757

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;
}
-------------
Last Edit: 16 Aug 2013 14:53 by sensor.

  • Posts:7
  • sensor
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Dropdown menu? 16 Aug 2013 15:54 #2761

I need to see your website?

For example this is a error:

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


#jf-mainnav .nav ul ul {

Ul tag can't be inside another ul...
Last Edit: 16 Aug 2013 16:03 by m.freak.

  • Posts:502
  • theres no place like joomfreak.com
  • m.freak
  • Platinum Boarder
  • OFFLINE
  • Karma: 0

Re: Dropdown menu? 16 Aug 2013 16:10 #2764

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....

  • Posts:7
  • sensor
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Dropdown menu? 19 Aug 2013 11:37 #2773


  • Posts:502
  • theres no place like joomfreak.com
  • m.freak
  • Platinum Boarder
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
  • 2
Time to create page: 0.71 seconds

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.