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
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.
Have you seen the little article at ‘a list apart’
there is a nice implementation there, I saw something else recently that might be more what you want. I’ll keep an eye out
Oh and the one liked to in the article http://www.alistapart.com/articles/dropdowns is really nice as well see the example at
ps enjoy reading your site
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).
Received data seems to be invalid. The wanted file does probably not exist or the guys at last.fm changed something.