I have a menu on the website and it has sub menu also which open On hover.
Menu is working great but Sub menu is not starting from first li so that it can act as Mega menu.
I though it can be accomplished by below line
#ayurmenu ul li:hover > ul {
left: 0px;
}
But it is not working. Below is the link to JSFiddle. Please check.
JS Fiddle here for Menu
Ps: Also for About Us, sub menu shall start from same li, not from first li.
The li elements in the top level navigation (ie Home, Home Remedies, etc), can not have a relative position (position:relative;) to its parent ul.
You will need to make these li elements static. If you need the sub menu li elements to be relative then that's another story, but in order to push every to the left (under the first li), then the top level li elements need to be static.
http://jsfiddle.net/fwLgd99c/2/
Related
My question here is when I hover over recipes and when I move forward to the sub menus how do I make the blue hover perfectly fit the sub headings. Like the color is not covering the text fully. And for a better understanding please do read and run my code if you like.
I am using this in the CSS
nav li:hover ul {
display: block;
}
Here is the link please do check it.
https://jsfiddle.net/harisfaisal/q68n7ro4/2/
It's because nav li {width:20%} in your code is affecting all li elements including submenu so the color covers only 20% in submenus. It can be fixed by adding width:100%; in your nav li li {} selector.
Note: your code has repeated selectors, it's better to merge them to improve readability.
I'm working with Wordpress menu where I have classic menu and item's submenus. When I hover some item which has children then submenu will show. The problem is when I have some page and I want to show fixed submenu of current page.
My JSFiddle is here http://jsfiddle.net/d2Lcukoe/ where you can see my menu and on hover "Live show" or "Elvis Presley" you will see submenu. And Elvis Presley is my current page - has css class current-menu-item. And I want to make its submenu visible without hover but still when I hover Live show to see its submenu (another submenu) and when I unhover then again see the current submenu.
I tried in last css class this:
.second-navigation ul > li.current-menu-item > ul {
visibility: visible;
}
It will show current submenu but I can't see another submenu of "Live show" on hover. How can I do that? I'm sorry for bad English.
The answer in JSFiddle would be best.
You should be able to achieve this by adding the following:
li.current-menu-item .sub-menu {
visibility: visible;
z-index: 100;
}
When the current menu item has a submenu, it is set to visible and the z-index is set to 100. The other submenu has a z-index if 101 so it will show and hide the other submenu.
I would like to float the dropdown menu on other items.But below code shows the dropdown menu but dropdown menu is under the items. I have used the z index but it not works fine for me . May be wrong execution of z index.
<style type="text/css">
li.css3videos ul {display: none;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
</style>
<div id="css3navigation" style="position:absolute;top:119px;">
<nav id="css3mainnav"> <ol>
<li class="css3videos">Videos
<ul>
<li>Trailers</li>
<li>Movies</li>
</ul>
</li>
So, it sounds like the problem you're having is that the drop-down menu, when dropped down (or open), is showing up behind the elements that are physically lower on the screen than the main menu. Is that right?
Make sure your menu parent ha both a position value as well as z-index value, and ALSO make sure the objects you want your menu to appear over the top of have position values too. You can assign z-indexes to them as well if you want to be thorough.
How do I go about keeping the menu item at the top (eg. file) remain highlighted while I am browsing though menu options in the sub menu?
Here's a paste bin: http://pastebin.com/aGJh8nQa
Why, with this selector, of course!
#menu li:hover > a {
background-color: rgb(216,216,216);
}
View it on JSFiddle
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}