this is the link for the navigation that i am having a problem
http://www.3dghosting.com/mucci-navigation/
the icon on the second drop down menu will disappear when i mouse-over on the second drop down
can anyone help me with this?
this is the code
#navigation-main li:hover ul li.tomatoes a:hover{
background:#737475 url(images/navs/tomatoes.png) no-repeat;
background-position:left;
color:#fff;
}
You have the background image being set on :hover. Therefore when the mouse is moved to the second menu, the image disappears. Instead style the container, but have it hidden by default and then when hovering, have it displayed
Related
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 have created a drop-down menu using CSS and HTML.
What I'm wanting is for the navigation menu item to turn back to blue when I hover over a sub-menu link. For example, when I hover over the Resources1 heading under the Resources heading, I want the Resources font to change back to the colour blue.
JSFiddle: http://jsfiddle.net/SSL78/
Can someone advise me how to do this using CSS?
Just change your :hover to the anchor tag and not the li tag.
#menu li a:hover{
color:red;
}
#menu li a:hover{
color:red;
}
Here is a JSFiddle of it
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;
}
I'm making a pure css dropdown menu (code here: http://jsfiddle.net/SeXyv/7/ ) and I would like to have a border only around the outside and not in between items.
The issue I am having is the border between the "topic" and "subtopic 1" in the js.fiddle example. I can get a border all the way across between the two, but I only want it on the top right portion as an outline, not directly between the two links (where the gold and gray meets)
Can anyone help me out here?
Thanks
EDIT: here is a pic of what I would like the border, the part circled in red, with the border stopping once it reaches the tab above it:
http://tinypic.com/view.php?pic=300ehxt&s=6
Basically you put a bottom border on the last element in the dropdown menu and a top border on the first element, then let the element that triggers the dropdown menu have a higher z-index than the menu, then push the menu up the width of the menu
#menu li:hover a {/*increace the z-index over that of the menu*/
...
position:relative;
z-index:5;
}
#menu li:hover li:first-child a{/*first menuitem gets a top border */
border-top:2px black solid;
}
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */
border-bottom:2px black solid;
}
#menu li:hover ul{/* move up menu to cover up part of top border*/
position:relative;
top:-2px;
}
http://jsfiddle.net/SeXyv/14/
add <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> to your HTML.
And add the required class.
Working fiddle here
Adjust the corners etc.
I have made a css dropline menu. It's works fine, but there's a small issue if i go to the child menu, the parent menu text color should be hover text color(#ccc;), but it's move default color(#000;).
Here Jsfiddle Link: http://jsfiddle.net/thilakar/aTXbm/4/
Please help me out with this issue.
Thanks
That's because you have the hover-effect on the link. You'll have to use :hover on the li to have the hover effect even when you're hovering a submenu.
Change
.menu ul li a:hover
To
.menu ul li:hover a
And I think you'll get the effect you're after.