I have a really big headache, with my pure css dropdown menu - it doesn't work on any browser.
The problem is with my second level list (subnav) - when i hover over first level(#n) links, it works just fine and displays subnav, but when i try to hover over that list(list items (links)) it rapidly disappears, and i can't select second level links and navigate.
Here is my jsFiddle.
What should i add to my css, to make it work?
Thanks for your time!
You mustn't have an empty space between the top-link and its submenu. Try to use paddings instead of margins.
Related
I am trying to restyle the navigation bar on the following website.
The website use Bootstrap and a navbar as main navigation and a navbar-subnav as a secondary one.
Even though i dont have a problem styling the two navs, it seems i can style the hover state of the subnav.
Whatever i try it keeps the same hover state with the main navigation.
here is the page: https://www.suug.co.uk/sustainabilityhub/test2017/
the Societies/Sports etc is the main one, and the test2017 is the secondary one
thank you
Not sure if I fully understood your question but to style elements differently you have to have a selector that matches only one of your elements and make the differences there.
My dropdown menu is now working with my css triangles (yesterdays problem), but now i would like a 2-3 px gap to the dropdown, but the moment i add that, i have the problem, that when you slide the mouse from the main nav point to the drop down, the drop down disapears (obviously as the mouse is no longer over the li link.)
So anyone got any good ideas, how i can have a gap, without the drop down dissapearing ?
http://keith464.fahrradhamburg.de/Lager/Metall-Behaelter/Stahlblech-Behaelter/Stapelbehaelter-aus-Stahlblech.html
You can use another container to hold your dropdown, witch will have transparent background and will be larger than your menu by 3px at the top, so you'll actually display that container too at your mouse hover, and nothing will disappear
LE: or you can show your dropdown by using javascrip and set a timeout to it, so it won't disappear that fast if your mouse is not over any <li>
A simple fix is to add this to your ul ul (drop down menu):
margin-top:-3px !important
The important tag ensures this margin takes precedence over any existing styles.
I am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.
Please check out the nav here:
http://cafemeetup.com/testArea/nav/
If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it.
This is not true as I have made the z-index of the rollover box lower in the stacking order.
What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.
It is done here at Shopify:
http://www.shopify.com/ (rollover 'resources')
Anyway, hope someone can shed light on this.
I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.
Anyway, thank you for at least reading all this. I appreciate your time,
James
I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.
http://jsfiddle.net/sTsrb/
You are applying your z-index:999 to the <li class="menu_right"> and then applying z-index:1 to the <div class="dropdown_1column align_right"> child element. If you want it to appear underneath the <li>, make it a sibling, not a child.
I have menu that is implemented with html and css.
On mouseover of main menu, I have to show all submenus in one place.
Here is an example click here jsfiddle
For this, the submenus alignement is not proper.
According to the example, Test 5 has to come under Test 2 but, it's showing blank space.
How can I align this properly?
Note:: The Submenu items will be dynamic, they may grow or shrink.
Unfortunately, it is not possible with your current markup: if Test5 had to go below Test2, then how would you automatically tell it not to go below Test1? What should the rule be? There's no obvious answer to your question: if you need elements of different size to layout in a space efficient manner, without too much blank space, etc, you could write some kind of layout manager with jQuery that will structure and re-position your menus according to their content.
The problem is your submenus are floating left and Test 5 is getting hung up on Test 3 because it is longer than Test 4.
You can test this by adding a CSS rule to set the submenus to have the same height.
ul .sub.sub10 ul{
height:180px;
}
Link to updated jFiddle
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)