I have a drop down menu made in css. When you hover over the text (ul) the menu appears (the li appears). I wanted to know, how to make a submenu, that when you hover over the li's another menu (submenu) would appear and would offer other options.
Ex:
-Tutorials (You hover over tutorials)
(Then these options appear)
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices)
//How do I make that!
-Windows xp
-windows 7
-Windows Vista
That is what I want to make.
Thanks people!!
you need this tutorial: son of suckerfish dropdowns
If you're using pure CSS then you just need to add a new level of styles. You haven't posted your original code, but assuming you currently have something like:
ul.menu > li > ul {
display: none;
}
ul.menu > li:hover > ul {
display: block;
}
Then you'd simply need to add:
ul.menu > li > ul > li > ul {
display: none;
}
ul.menu > li > ul > li:hover > ul {
display: block;
}
You will of course need to add some positioning code to your third level list so it appears to the right of the active menu item.
CSSPlay is a great resource with all kinds of menu's you can possibly imagine. Plus all menu's are completely cross-browser.
Check it out, I'm sure Stu got one that fits your needs:
http://www.cssplay.co.uk/menus/
Related
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
I have a bunch of images named after my pages in wordpress. Example:
page name : heart-health
image name : heart-health.png
My main menu has 1 sub-menu level and for each page name in a sub-level I would like to display the image as a background image set to the left. I have tried so many different ways but had no luck.
I know you can add custom text to the menu in the admin but I wish for it all to be done automatically.
I have found the start and end for sub level menu items in "nav-menu-template.php" & "class-wp-walker.php"
At the moment I just have the same picture showing on all sub menu items when you rollover but that is just using CSS.
.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}
Any help or advice would be much appreciated.
The best way to do it is via CSS.
For example
.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }
You can set custom classes for each menu item in the WordPress menu management, just make sure the "CSS Classes" checkbox in "Screen Option" (top right of page) is checked.
Also, to make things easier, I would suggest making an image sprite of all the images you'll be using in the menu so that your CSS code is much simpler.
.menu ul ul a {
background:url('/url-to-sprite.png') no-repeat 0px 0px;
}
.menu ul ul :hover a {
background-position:-20px 0px;
}
.menu ul ul .custom-class a {
background-position:0px -20px;
}
.menu ul ul .custom-class:hover a {
background-position:-20px -20px;
}
I am using Superfish to show a horizontal menu on a website. Whenever I am on a page that is either the current menu item or sub-menu item, the sub-menu always show. When this happens, it overlaps other sub-menus when you hover the mouse over them. How do you hide the current sub-menu being shown?
edit:
OK I figured out how to do this with CSS. I added the following code to superfish-navbar.css
ul.sf-navbar ul {
display: none;
}
ul.sf-navbar li:hover ul {
display: block;
}
It hides the current sub-menu and shows all sub-menus when you hover over the parent item.
For CSS
In superfish-navbar.css you would remove the following rule at line 63.
ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul {
left: 0;
top: 2.5em;
}
When You End Up Using Javascript
In the documentation for the superfish plugin, on the Options tab, it shows the default options. It looks like pathLevels is set to 1, and the description of pathLevels
the number of levels of submenus that remain open or are restored
using pathClass
looks like the option you need. Try setting pathLevels to 0.
See this jsfiddle for comparison: http://jsfiddle.net/keithwyland/G87Lm/
http://users.tpg.com.au/j_birch/plugins/superfish/#options
I've had this trouble before with pure CSS sub menus. It looks fine in FF (On OS X at least) but in other browsers it's aligned with the right hand side of the parent li as oppose to the left as it should be.
An example can be seem below (Hover over "About us" or "My Landmark 24")
[removed URL]
Does anyone have any idea what it is I'm doing wrong?
Set to your .navigation ul.menu li ul.sub-menu css class style left:0px.
on the .navigation ul.menu li ul.sub-menu { just add left:0; that will fix it
Your submenu is set to display:inline on hover. If you change that to display:block it should be fixed.
.navigation ul.menu li:hover ul.sub-menu {
display: block;
}
I am building a menu using XHTML,CSS, and jQuery and I ran into a problem with my CSS.
Here is my test page, and here is my css.
What I am having problems with is that my .subMenu class is inheriting the properties of my #menu, the background colors and sizes are the same. I am looking for a solution that leaves .subMenu as a class so I can re-use it. I got it to work by changing .subMenu to an ID. The weird thing is that I edit some of the properties in my jQuery code using the .subMenu class and it changes those.
So I was wondering if someone could let me know how to fix it and if it was a hierarchy issue if they might explain it.
Thanks,
Levi
I think the problem is that the #menu > li a will apply that style to all links inside of the li tags, so all of the li tags inside of the submenu will also have this style. It looks to me that the only difference is in the background and foreground colors on hover, so you could fix it by changing #menu > li a and #menu > li a:hover to be #menu > li > a and #menu > li > a:hover. This way, the styles for the top level menu will only be applied to links which are directly after an li tag which are directly after the #menu item. The submenu styles can stay the same.