I found http://www.handy-html.com/simple-css-dropdown-menu-updated/ which works, except I think the navigation menu is centered on the page by the ul#nav {margin: 0 0 0 200px;}
How can I center the menu without resorting to the trick above with the margin-left being set to 200 pixels?
That example does look a bit old. The fact it claims to work with IE7 is a give-away 
and the comments date from 2012 and 2013.
You are right not to want to use the 200px margin, that’s “magic numbers” and will only centre a one specific width.
The quick way to centre a block element is to set margin: 0 auto; and give it a max-width value.
But this menu relies on floats, which is a bit old-fashioned, there are better solutions now.
I have Googled and found many solutions.
Not sure which one is better.
Drop down menus are inherently inaccessible so are you sure you need one?
If so then you are better off getting a good one like this:
http://users.tpg.com.au/j_birch/plugins/superfish/
I dislike hover menus as although they can work in a fashion for touch devices I much prefer a click menu for everyone.
Another consideration with hover-drop-down menus is keyboard accessibility. I had one on a site for ages and was horrified when it dawned on me that it was impossible to navigate the site by keyboard alone, then had to change it for something else.
The problem being that hover works fine on list items in sub-lists, because being children of the parent item, the parent never loses hover state.
Bur focus is different, it applies to just the one element, so when focus shifts to a child element, the parent loses focus, and in the case of a drop-down, will then hide, thus hiding the children, including what you are trying to focus on.
Yes good point as most dropdowns are very bad for keyboard accessibility.
The two menus I listed above are a good choice because they have keyboard navigability baked in unlike most others.
I will take a look those two menus.
Thank you.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.