I have a website in which I have a menu that opens a sub-menu while you hover it. But it has a little problem: the submenu is a few pixels under the menu item that displays it.
Here is the website:
https://www.redlineaviation.com/
The problem is when you hover "What type of plane do you have?" and you try to select an item, if you move your mouse fast then there's no problem, but if you move it a little slow then you'll see the problem.
The menu is positioned a fixed number of pixels below the parent li.
Because there is a slight gap, the hover state is removed when you 'hover' over the gap.
Just change the top position from the fixed value to 100%
.menu li:hover ul, .menu li.sfHover ul {
left: 0;
top: 100%; /* always in place regardless of parent height */
z-index: 9;
}
Since you show submenu on :hover you should take care of the gap between menu and submenu, because obviously when mouse cursor gets in the gap menu is no longer in :hover state and submenu hides. It's very easy to fix. Decrease top position a little to get rid of the gap, but make a visial "new" gap with padding-top:
.menu li:hover ul, .menu li.sfHover ul {
left: 0;
top: 28px; /* make top smaller to remove the gap */
z-index: 9;
padding-top: 8px; /* and make gap again with padding-top */
}
UPD: As noted by #Paulie_D setting top position to 100% makes more sense, no magic numbers. However padding-top is needed to make a nice space between menu and submenu. So combination of two answers make it ideal :)
Related
I'm using superfish jquery plugin. I'm trying to make the second submenu to have the same height as the first submenu. I also want to position the second submenu just under the menu as indicated in the screenshot. But i don't know how to do it. I've tried making the parent as display: contents but if I do that everything just stops working
This can be solved by adding just two css-rule.
By default all submenus (i.e. the <ul>s) are absolutely positioned with respect to the parent <li> element. So, to make the third level submenu positioned with respect to the top level menu, unset position: relative; on all second level <li>s:
.sf-menu ul li {
position: unset;
}
To make the second submenu at least as high as the first submenu, you can set min-height on the second submenu's ul:
.sf-menu ul li ul {
min-height: 100%;
}
You might want to set the background color on that css rule or do some further styling to fit your needs.
I work with drop-down menu and I have one issue. When I open the drop-down menu, ul list belonging to li element that I clicked on appears at the same height as the li element, but I want to align that ul list with previous ul list so the ul list that will open on the right side will be at the top of the drop-down navigation.
Hope you understand. I attached 2 images below the post. At the first image is the current drop-down how it usually works and the second image represents the result that I want to achieve.
Thank you for your help
Old drop-down navigation
New drop-down navigation
Try this css
#media (min-width: 768px) {
.dropdown-submenu {
}
.dropdown-submenu .dropdown-menu {
top: 0px;
left: 100%;
margin-top: 0;
border-top-left-radius: 0;
position:absolute;
height: 100%;
}
By the way this is not a problem this how it works :)
How can I set up my menu to slide out, only when the header is hovered on? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/
So on hover, it slides out, but doesn't push the content down.
Any ideas? jQuery, or can this be done VIA CSS?
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working).
Here is my: JsFiddle
bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar, foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar. Feel free to play with it and ask questions.
One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.
#header {
position: relative;
}
#main-menu {
position: absolute;
top: 100%
display: none;
}
#header:hover #main-menu,
#header #main-menu:hover {
display: block;
}
If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. That wrapper would become the target of the display settings. You could then assign that transparent wrapper a padding of your choice. The menu stays visible as long as the cursor is within the padding of the wrapper element.
#main-menu-wrapper {
display: none;
padding: 5em;
}
#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
display: block;
}
I am using Html and Css to create DropDown Menu in Vertical Direction as shown here.
[http://jsfiddle.net/techspartan/8u8NH/][1]
I am using div to divide my page in two parts such that menu is displayed on left side followed by some content in the remaining space. For example if width of webpage is 1024px than I am allocating 200px to menu and remaining 824px to div that has content. But after using div I am not able to navigate to submenu "3.4.1" and "3.4.2" as shown in the url posted above as I can understand this is happening because the submenu is crossing the space allocated to it.
So how can I solve this problem and I don't want to allocate more width to my menu and that menu should be followed by content.
Any help would be most welcome.
Thanks.
Quick fix is to ensure that the Z-Index is for your nav is higher than the z-index for your content.
The reason it's closing in your fiddle because once you touch the text, you're no longer hovering over your nav but instead hovering over your text.
#nav li {
background-color: #000000;
margin-top: 1px;
position: relative;
width: 125px;
border-radius: 15px;
z-index:10;
}
Increasing z-index on the #nav li fixes this issue.
Fiddle
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.