So, I've been looking at my code versus some examples, and I realized that I'm setting my menus with a "class" and not an "id". It would seem that this may be related to the issue along with there being nothing in my CSS that references the "submenu" class that I'm assigning to the pop-up menus.
Another question has come to mind:
When I hover on a menu item and an additional menu pops up, it moves the rest of the content on the page down while the menu is popped up. The content returns to its prior position when the popped up menu goes away.
My MENU section is in a DIV all by itself and the main content of the page is below it. Is this related to why the content moves? What I'm wondering is if the pop up of additional menu content is changing the border area of the DIV section for the menu and forcing everything else on the page to move down as a result. If so, how can I tell the MENU content to not change that border area?
-
☆ A M B ☆
- 1,780 Posts
That's going to be a css issue with your submenus. I don't see that you're using the display: none property on the submenus, which might be part of the problem. I should clarify though that I'm no css dropdown expert, unfortunately.
I'd do some reading about creating css dropdown menus, and of course google is your friend here.
try
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
display: none; was replaced with left: -999; based on some reading I had done on line about consistent formatting and function across browsers of all versions. In essence, you force the menu to 'display' at the extreme left that is never viewable by default. Then, on hover, you bring it into view with left: auto;
Both setups yield the same results for me.
Ok... I used the "Inspect Element" option in Firefox to do some debugging. Here's what I changed and what the results are:
- In the "#menu li {" section, I added "width: 12em;" (it works well with the length of my individual menu item texts and the complete menu).
- In the "#menu a {" and "#menu .menuhere {" sections, I change "float: left;" to "float: none;".
The menu now properly pops up -below- the primary menu item that it is associated to, and it does this correctly in -all- browsers I have tested with so far. Further, the menu properly appears on a tap on Safari from a mobile device and requires a second tap to trigger a page load (which is exactly how I would expect it to function).
The piece that I still have to figure out is why it moves the page content down and up as the submenu appears and disappears.
-
☆ A M B ☆
- 1,780 Posts
Maybe try absolute positioning for the menu, and apply relative to the content area?
Absolute positioning of the menu, "padding-top" for my main content area and sidebar, and things look and function as I need them to at this point.
Thanks for the idea on doing that!
-
☆ A M B ☆
- 1,780 Posts
Seriously? It worked? Well hot dang! You're welcome then :~}
What you suggested worked both from a "make the menu absolute" and "make the content relative" each by themselves. I chose to go with the menu being absolute and then padding the content and sidebar but leaving them undefined in terms of positioning. So, while what you suggested is not specifically what I did, but I did use it as my starting point to accomplish what I needed.
