In my menu I use overflow:hidden and menu width to display my menu and hide text if the screen size becomes smaller. However it hides also the submenu at the same time
By submenu I mean the menu of level > 2
So if I hover an item in the menu bar, I can get the menu display but if that menu contains some subitems then they won't display at all. But when I delete overflow:hidden in my css that is being applied for ul/li elements to create the menu, they show up but the text looks ugly especially if it is longer than the menu width
I think using this should work:
ul{
overflow:visible;
}
ul.li{
overflow:hidden;
}
ul.li.ul{
overflow:visible;
}
ul.li.ul.li{
overflow:hidden;
}
Of course you will have to apply it to your own stylesheet. I am not totaly sure this will work, becouse i cant see your code/stylesheet from here.
Related
I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).
When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.
With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.
.noscroll { overflow:hidden !important; }
Tried to do this with CSS only but can't get it to work, tried several things like:
.nav .panel:hover > body,
.nav .panel:hover > html { overflow:hidden !important; }
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */
The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.
How can achieve the effect I want?
Image (click on right mousebutton to view larger image):
This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.
I usually dont have problems with css, and I'm made this nav menu myself but I just can't seem to understand why it will not show my div when I hover over an item ... I create a jsfiddle # http://jsfiddle.net/LuLTM/ with all the code as well ...
#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}
I want when hover over div #beautyworld for the div #beautyhealth to appear ... I just dont understand why my css is not working .... Could someone please advise ? Thank You
I think the problem is that you are trying to have fire a hover over something that is currently 'display:none'. Since display none collapses the element, there is nothing to hover. You heed to have it hover at a relative parent level to cause the display of the child.
For example:
#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }
I created a dropdown menu and made it drop on hover, but the problem is that I need to make a space between the toggle and the dropdown-menu as:
<http://jsfiddle.net/yabasha/nbbjm/1/>
When hover it displays the dropdown-menu but the problem when I want to select the menu it disappears.
Please advice,
Your problem is there is a gap between the li and the second level menu so when you are hovering, you are no longer on the li when you try to move to your submenu, which causes it to close.
You either need to move your submenu up, or extend the height of your li on hover to cover the space in between the li and the submenu
Adding the following styles to your fiddle seems to fix the problem:
.dropdown:hover {padding-bottom:20px;}
.dropdown-menu {top:auto;}
http://jsfiddle.net/nbbjm/8/
I'm trying to work on a layout and I have an issue with the navigation. If you look on the Codepen posted below and hover over the 'Home' link in the navigation, the drop-down menu will appear and it will push the other main links to the left. What is causing this and how can I fix it? I've been messing with it for a couple hours and I'm lost. Thanks for any help.
http://codepen.io/anon/pen/Cmcyr
There's no width being set on the a, ul or lis, so when the ul is displayed, the parent is expanding to the width of its widest child.
Remove the horizontal padding from the lis and set text-align: center; and give them or their parent (ul) a max-width the same size or narrower than its parent (a).
my problem is that when I try to show my dropdown menu under "Departamentos" its kinda to the left... not in the right position under Departamentos...
I try for hours but nothing, What could be the problem??
LINK TO THE WEBSITE
Change #mainNav li from display:block; to display:inline-block;. Just tried in firebug, menu moves to the right place.
The problem is that with display:block or display:inline li has zero width (despite inner content) and thus all li elements are shifted to the left. display:inline-block makes it stretch to incorporate inner content.
You can see the area element takes highlighted if you move mouse over it in html tab in firebug.