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 :)
Related
Still pretty new to css and I need a hand.
I have this site: https://nuebar.com/ and it has drop downs under hair, about etc…
I need to get the dropdowns aligning to the right edge of the menu item instead of the left.
Dropdowns are currently absolutely positioned but I'm unable to use this to get them aligned how I want them to be.
Would love some insight on this
Dropdown menu css add for right:0; and parent li css add postion:relative; Below mentioned css code add and check.
.DropdownMenu{right:0;}
.HorizontalList__Item{position:relative;}
Guys
I am having hard time tweaking a CSS part of the menu.
I have a website here at http://aaron.wordpresstiger.com where the last title "CONTACT" of the menu comes up with a line ahead and doesn't fits the menu. though i was successful in getting the "HOME" first menu item correctly fitting the menu but not the last one.
Can you please tell me what CSS i should add to fix this MENU problem. Also, please have a look i need the last item of the menu to be showing as same css as the first one (HOME).
I need the menu's items to look similar to the one here:
http://officialfacebooklikes.com/index.html (have a look at the last "CONTACT" which fits the menu correctly).
I look forward to hearing back for HELP :)
Regards
Muzammil Rafiq
in your css you will want to add two styles
#access li {
width: 25%;
}
#access li:last-of-type, li#menu-item-31{
border-right: none !important;
width:24% !important;
}
the first will make each menu element 1 quarter of the width... the second removes the right border on the last element and re-sizes it to fit properly on one line of the navigation bar.
the !important tags may not be necessary but they will ensure this works on the first go.
Well, if you want to create a horizontal menu you should float the list items. But as I can see from your example website you want the list items to be even in width, so you need to put those list item into containers, determing the width for each list container and float those. Also text-align center your a tags.
Good Luck!
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 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.
I'm work on this website and am trying to add drop down functionality. The theme is David Airey and I'm using the drop down functionality from twentyten. Pasted the CSS from twenty ten into the menu.css in David Airey, but when you hover over "Broadcast" (the only one utilizing drop down), the box appears in the top left. Checked everything thrice, but can't find where it's screwing up, an extra set of eyes could probably help.
Thanks!
Add position: relative to the <li> that contains the submenu.
You need to add position: relative to .nav li.
This will make the submenu be absolutely positioned relative to the li, instead of the window.
A diagram is here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/