Need help with CSS dropdown menu - hover not working correctly in any browser

I’m trying to re-create a menu structure similar to what’s used on dallasnews.com - horizontal menu with dropdowns that all appear directly under the menu.

You can view what I’m going for at dallasnews.com

I’m have limited experience with CSS, so my thought was to try to re-create the menu verbatim before modifying it heavily for my purposes.

So, I’ve put together the menu and CSS in a test area on my site and I can’t get the submenus to appear when hovering over the main menu. When you hover over a title in blue, the menu below is supposed to change to a new set of sub menus - again, exactly like dallasnews.com.

Here’s the location of my test menu:

http://www.affinitymm.com/at_test/menu_test.html

Here’s the location of my CSS:

http://www.affinitymm.com/at_test/css_files/dmn_menu.css

I’m hoping I’m just overlooking something terribly easy. Any help anyone could give would be much appreciated.

Once I have it operating properly, I’ll adjust all the links, headings, graphics, etc. Just need to make sure the programming is correct first.

Thanks!

Yeah, probably not the best choice, since that menu is not about CSS when it comes to hover and submenus, but about JS.

And you’re basically asking us to help you steal a menu. Not my favourite dish :slight_smile:

Well, like I said, I’m somewhat of a novice and I’m just trying to understand the programming side of this. I’m going to build my own once I understand how to do it.

But really, thanks for the help…

Hi affinitymm, welcome to SitePoint! :wave:

Paul O’Brien has an example of a css horizontal dropdown you can study, it works the way you want without any Javascript.

Thanks for the welcome. That example you provided is exactly what I’m looking to do - but I’m just as confused as ever.

I was certain Javascript was not needed to make this work - but after the first reply to this, I wasn’t sure. It is my understanding that using Javascript makes the hover function compatible in select browsers, correct? Namly older Mac IE browsers…which if that is the case, I probably won’t worry with trying to program that in since most end users on a Mac these days are using Safari, Firefox, Chrome or something else - not IE (which is, of course, no longer available from MS).

I’m going to study that example CSS you sent me and try to make the corrections to my code that are needed. Like I said before, I’m anything but a full-time code writer, so trying to figure out all that’s going on to make that menu go is tough for me.

But, if someone could simply answer this question - I can make the menu hover and do what I’m seeking for it to do WITHOUT the use of Javascript - using simply the CSS code and HTML tags?

Thanks for the help!

The small snippet of js is for IE6 and under as it doesn’t understand hover on anything but anchors and for these menus to work you need to action a change when you hover on a list element.

I’m going to study that example CSS you sent me and try to make the corrections to my code that are needed. Like I said before, I’m anything but a full-time code writer, so trying to figure out all that’s going on to make that menu go is tough for me.

But, if someone could simply answer this question - I can make the menu hover and do what I’m seeking for it to do WITHOUT the use of Javascript - using simply the CSS code and HTML tags?

Thanks for the help!

If you don’t want to support IE6 and under then you don’t need any js (there are methods of even supporting IE6 without js but they are very complicated and shuld only be used by those with a good grasp of css).

The basis of all these dropdown and dropline menus is pretty simple.

You have a nested list which you hide from the viewer initially (either by placing it off the screen or using display:none (offscreen is better for accessibility but display:none is easier to implement in a dropline menu though).

The when you hover the parent list you bring the sublist back into view either by changing its position or making it display:block as mentioned above.

The nested list is usually absolutely placed to remove it from the flow although you can make a dropline using floats and make it affect the flow if needed but is a little more complicated.

pseudo code:

li ul { hide this menu }
li:hover ul { show this menu }