I have a menu on the top of a page and when I get the sub menu, it is collapsing with the existing html on the host page
Menu when not yet clicked
Menu when menu item clicked
Just notice the blue line is comming on the top of the sub menu
The menu is found in a div
can someone helps??
So what I understand is your sub menu doesn't come on top of the blue bar, but instead, is seen under it. That could be the problem, but need not be.
You'll need to find the CSS class used for the sub menu (something like firebug on Firefox will help you here, or IE developer toolbar in IE), and then check the following:
1) If there's a background colour set anywhere. If not, add it
2) the z-index of the sub menu. If its no >= 1, then increase it. If there is no z-index, try adding it to 1 or 10. Check the z-index of the logo image. If there is no z-index, don't worry about it. If there is, you need to make sure that the z-index of the submenu is greater than the z-index of the logo image.
This is because the z-index of blue line is more than the z-index of menu.So through the css if you increase the z-index of menu than the blue line then your problem can be solved.
Related
I'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
I've created menu drop down menu in pure css,
here, parent div have position:relative and the menu popup have position:absolute,
when the menu hovered the submenu will appear as display:block,
but here, hovering sarees (first menu) the popup menu appears perfectly, but hovering the last menu webmenus, the popup appers at wrong position (different position). The images uploaded below
I want to make the same position with all submenu popups like sarees's submenu popup have.
is there any css hack for this .. ?
Images :
I want this position for all menus
The menu Displaying at wrong position
I noticed that you are using position: relative to the menus, including the drop down menus. That is the why you are having this issue. You set the menu as absolute and it is understood as relatively to its respective parent. If you remove the position: relative it will set absolute position relatively to the page.
Update:
See a Fiddle HERE
and compare to this another Fiddle HERE
Did you see the difference?
Sorry if my english is bad
Remove position:relative; to each .menuTemplate1 li
That way the menu will open always on the left side, as your image shows.
I have a Drop Down menu and a slide show. I want my DD menu to be over the slide show, not the oposite.
I have tried z-index, but it didn't work.
Thanks.
EDIT: I solved it, z-index wasn't in the right place.
That's a common one, I recommend you use Chrome Developer Tools or Firebug to inspect your element and see what css properties are being applied.
Another gotcha is that elements must have a CSS position. If an item has a position of static or no position is specified, it won't be affected by the z-index.
I used this menu as a template for my own :
http://ago.tanfa.co.uk/css/examples/menu/hs7.html
I used the same technique as this menu I just changed the css like colors/fonts size etc. Now the issue I have is that when I hover root items like 'CSS Drop Down Menus' in the example from the link.
The sub menu dissapears if I don't jump to the menu really quickly, and its driving me nuts. Did anyone have similar issues?
Usually this behavior is because of top margin or positioning (like top: 2px on an absolute or relative element) on the submenus that is creating a "gap" between the main menu item and the submenu. Without your actual code posted, that is the only advice I can give.
I have a Son of Suckerfish menu set up, but when I hover over the menu item, the sub menu appears on the left of the screen, rather than directly below the item I hovered over.
eg http://blacktownworkersgroup.worldsecuresystems.com/bwc09/events
When you hover over 'Events' the sub menu is supposed to appear below this item.
It's working correctly in Safari and Chrome, but not in IE7, Firefox 3, Opera.
The css shows the block to be using absolute positioning. You will need to set top and left attributes to position it correctly.
Otherwise change it to position:relative; and use float:left; as in this tutorial on SoS dropdowns
I fixed it up.
The original list items needed to be floated, rather than displayed inline. There may have been other elements affecting it also, but it's fixed now!