Technically, what you're doing is almost OK, except that you shouldn't make them invisible by default and then visible on hover. Any item set to invisible still takes up space on the page, and can be interacted with -- it just can't be seen. When you set it to display:none, it will not be part of the page. It's not there, and it can't be interacted with (even though it's still in the code).
Give the #menu li ul</cody> the property <code>display:none; by default and then give it display:block when you hover over the LI that contains it. So, in essence:
#menu li ul { display:none; }
#menu li:hover ul { display:block; }
Of course there's a lot more to it, but that's basically the idea.
Instead of display:none; and display:block;, some people position the submenu UL absolutely -- about -99999px by default (so it's off-screen) and then at 0 on hover.
The problem is I'm using a full width menu. I added margin-left: 25% to position the links in line with the header. If I remove margin-left 25% the links float to the left. When I add a bottom border to the last child element the border bleeds over to the next link (contact), it's 2 pixels instead of 1. I also want a 2 pixel left and right border on all drop down links. I've uploaded the code so you can see for yourself. I'm getting coding dyslexia!
I have one minor issue. I have 7 drop down links. When the slider scrolls to the 3rd slide, a youtube video, the 7th link isn't visible even thought I have set the z index to 2.
display:none, it will not be part of the page. It's not there, and it can't be interacted with (even though it's still in the code).Give the
#menu li ul</cody> the property <code>display:none;by default and then give itdisplay:blockwhen you hover over the LI that contains it. So, in essence:Of course there's a lot more to it, but that's basically the idea.
Instead of
display:none;anddisplay:block;, some people position the submenu UL absolutely -- about -99999px by default (so it's off-screen) and then at 0 on hover.Make sure that the submenu UL is wrapped within the LI (closing the LI before the submenu starts is a common mistake).
I had the wrong name in the tag :
Should be :
It's working now but the styling is a mess.
Any idea why the first link in the drop down isn't in line with the other links? How do I position the links? Adjusting the margins isn't working.
#navigation li:first-child.Easy to override that for your submenu with:
lol, damn lag. What @Senff said!
http://mbmitservices.co.uk/MMA/index.html
ul#navigationwith a container element...that way, you can center theul#navigationwithout worry...E.G.Then you can set your CSS on your #navWrap and center your ul#navigation:
http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html
I have one minor issue. I have 7 drop down links. When the slider scrolls to the 3rd slide, a youtube video, the 7th link isn't visible even thought I have set the z index to 2.