439 words
Another HTML/CSS question. I keep running into these every now and again. And for some I can’t work out or find an answer. Here comes another one. It’s about menus.
I can do quite a few things with menus. And for vertical ones even having submenus that pop up when you hover over items works reasonably well. However, to finish my friend Birgit’s site, I want to have such submenus on a horizontal menu. Actually I think I may need to be a bit more specific:
The menu is a horizontal list, that is made by making the li elements inline. It’s also centred on the page by centring text of the whole list. The way I know for popup menus to work is to include them invisibly into the list item they belong to and only show them when the cursor is hovering above that item. The key to make this work is to make the pop-up menu absolutely positioned so it can overlap the rest of the content rather than displacing it.
It does seem, though, that absolute positioning doesn’t work (as I want it to work) on inline elements. The positioning will be with reference to the containing block element rather than the current inline one. And a consequence of that is that the menus I want to show are positioned relative to the ul’s origin rather than the li’s origin.
The next trick would be to use another technique for the horizontal menu, namely keeping the li items to be blocks but making them float. That’ll also give you thing you want. And with block type elements the menus will also be in the right location. However, when using this method, I wasn’t able to center the list. I assume that’s because you always have to float things from one of the sides. But that again renders the whole technique useless for my purposes.
I’ve looked at some examples on the web and those that came closest are flush-left, so they just don’t worry about this problem. Another approach seems to be to just give each of of the menu items a fixed width and position on the page. Unfortunately this gives strange looking spacing which I don’t want. And with our menu items ranging from five to eighteen letters in length, I don’t think there’d be a way to make it look reasonable.
In the end, I can’t solve what looks like it should be a rather simple problem. Any hints are welcome. As are questions in case the short descriptions I made above are too short.
April 6, 2005, 1:19
Have you seen the little article at ‘a list apart’
http://www.alistapart.com/articles/hybrid/
there is a nice implementation there, I saw something else recently that might be more what you want. I’ll keep an eye out
April 6, 2005, 4:40
Oh and the one liked to in the article http://www.alistapart.com/articles/dropdowns is really nice as well see the example at
http://www.htmldog.com/articles/suckerfish/example/
sam d
ps enjoy reading your site
April 6, 2005, 4:46
Thanks for the links Sam!
As far as I can tell, these suffer from the same problems I described. Most notably they are not centred (the suckerfish case works with fixed widths to centre the menus which I can’t do).
April 6, 2005, 10:30
