Hi, I'm doing a drop down menu in HTML/CSS the normal way; i.e., using ul li and nested uls for the drop-down menus.
I want to have the drop down menu slightly offset below the nav bar like it is here in
Orman Clark's Studeo Theme. I can't work out how to do this and still keep the drop down menu visible when I move my cursor between the top link and the drop down menu.
Any help is greatly appreciated.
.setTimeout() is the key you need!
(Try to hover on the 3rd li and reach the open menu by moving around the page! It will stay open, waiting for a predefined amount of time for you to mouse over. If it does not receive that input in that period, it will hide itself again.)
This could help:
DEMO
Answer found HERE
Related
We have a oddly coded sub menu that was customized so it could be in a specific column setup, however when you click a link under that sub menu, the sub menu then jumps up while the next page is loading. It looks pretty bad :P
For example when you go here: goo.gl/4mW5sW
and hover over the menu item "All discs" you can see the dropdown with the 2 customized columns.
If you click one of these links you will see the drop down than jump up while the page loads the link you clicked.
I have been combing through the css trying to locate why it jumps with an active click and am having no luck. Maybe another pare of eyes will help?
I even tried this pathetic attempt
a:active .sub-menu{display:none;}
But it didnt help
Thanks!
The problem is with the margin-top and the hover state of the ul class="sub-menu'. Find a way to select only the first column and add the next css:
margin-top: -1px!important;
Then select only the second column and add the next css:
margin-top: -1px!important;
You are giving both colums a -71px as top-margin and when hover is toggled you mess that margin for the first column, giving it a -71px of top margin.
If you provide code, i can help you further
I have a link/button that moves down when clicked but upon doing so all other menu items move as well. How does one keep the other items in place while the button move down?
http://www.llcinpa.com/ click on Form Your LLC Now
the easy answer is this:
#menu-main-nav li{margin-left:28px !important}
this way no matter what, you'll keep your margins, which are the root of the problem
I am in need of a dropdown-submenu using Bootstrap 3.
There are questions like this all over the place, one in particular that got me closer is this one: Bootstrap 3 dropdown sub menu missing
However, the answers there display the dropdown to the right of the current menu. I need to display the dropdown within the current menu, just sliding the rest of the nav down when open.
Here is a bootply with what I have so far: http://bootply.com/91787
Currently the submenu is just overlaying the current dropdown... I need the submenu to push the rest of the dropdown elements down when open. How can I achieve this? Any help getting the dropdown to activate on click instead of hover would be helpful as well, but the main question is more important.
Like this ? I´m not sure if I understood your question right.
http://bootply.com/91794
Edit:
Quite simple, I hope this is what you want:
.dropdown-menu {position: relative;}
http://bootply.com/91800
Jeff Mould solved this beautifully.
Git: https://github.com/jeffmould/multi-level-bootstrap-menu
Nav Demo: http://theboot.fenwickmedia.com/
I'm having a problem with the second tier of my navigation showing up when I hover over the products button. You can see the problem here. http://www.americancarpgear.com
Any suggestions?
Change line 37 of index.js from:
$(this).find('ul').stop(false, true).fadeIn(200);
to:
$(this).find('ul:first').stop(false, true).fadeIn(200);
There are multiple ul's within the Product drop down, so all children are being shown on hover. Instead, you should only show the first child ul on hover.
I have a drop down menu based on CSS. Suppose there are 5 menu items at top level, when we hover on them show a drop down. My requirement is if I hover on menu item# 3 and select something from it then I will hover on menu item# 1 then menu item# 3 color need to be different in comparison to other menu items.
Please let me know how to do the same.
If I understand your question correctly then you want to use the :visited selector in your css. Hard to give specifics without you providing some code, but this is the general idea:
a:visted {
color: orange;
}
You can go Here for an example. That link also contains examples for other related selectors which might be useful to you, such as :hover