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.
Related
Recently, I created a navigation bar and transformed the menu items into a parallelogram using -webkit-transform:skew(-30deg); and the tweaks of the community.
Now, I tried fixing the dropdown menus with the CSS class .submenu.
This is my progress so far: http://jsfiddle.net/an5mb2y3/1/
But there are some bugs I could not fix:
Font smoothing: When I hover over the dropdown menu items, the font gets blurry. After another second, the font gets clear. I read about using -webkit-font-smoothing: antialiasedto fix this, I tried it and had no success.
Also, the dropdown menu gets displayed in the background, behind the embedded image. I want to show the menu on a top layer of the image. What I tried was changing the z-index to a bigger value. But it did not work.
I want to display the submenu from the position where the parallelogram starts while hovering. I tried margin-left: 42px; on the .submenu class, but this doesn't work for both dropdown menus at the same time.
Add this CSS dropdown menu up:
nav.nav-primary{z-index: 1; position: relative;}
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.
Okay, I have typical menu (ul>li>a). The mission is to draw background <div> (shadow, gradient etc) into an <li> element (ul>li>.shadow-bg-white)
(for example, the div is green bordered. all other borders are just for better visibility of problem)
http://jsfiddle.net/voilalal/P57yE/embedded/result/ or http://jsfiddle.net/voilalal/P57yE/6/
(for example, the div is bordered with green color)
If I hover over the items from left to right, everything is okay. However, if I hover over the items from right to left, items on the left side do not react to the :hover pseudo-class.
Every block has the CSS position property assigned, so z-index should work well, I hope.
At least, .shadow-bg-white z-index seems to be placed higher than the a item.
What solution can you recommend?
Benjam was on the general right track I think. I don't know your ultimate purpose, so the solution may not work in your case, but there is no other solution. The li you are hovering on must be set lower than the others so the div in it does not overlap them. Adding this:
#header-menu ul li:hover {
z-index: 498; /* one lower than your set z-index for li */
}
See here: http://jsfiddle.net/P57yE/8/.
The reason it worked going left is that by default when items are at the same z-index the one coming later in the source order is given precedence, so as you move right you move down in your html source order and the hover is picked up on the new element with the same z-index. But when you move left, you are going up in the html source order so the one you were hovering on had precedence and the hover remains.
They don't react because they are being covered by the div, therefore the div is stealing the hover from anything below it.
If the div does not need to be covering all of the LIs, you might want to place it below the LIs with z-index. But I'm not sure exactly what you're trying to do here, so I'm not sure if that solution will work for you.
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 :)