[Solved] Trouble with hovering over NAV

[JFeuchter]

Hello people,

I have two questions, in the NAV I´m making with CSS I use a div box as a sub-menu which comes up when hovering the menu. But I use also a CSS made triangle which is right underneath the menu. Here is the sample I use:

http://jsfiddle.net/f0t20sej/

Here are the two problems.

One: How could I center the triangle depending on the with of the list item? Cause the width is variable and I was looking to center that but haven’t found out how.

Two: When you hover over the menu the submenu comes up, BUT when you try to go to the submenu it closes cause of the margin I put so the triangle can be seen. Only if you hover through the triangle will the submenu stay open, but its kind of hard to figure that out and not really helpful at all. I need for the margin space to be hover also so the submenu wont disappear before getting to it.

Any ideas are welcome on both of them :D Thanks in advance for the help.

[Paulie_D]

It would be helpful if you reduced the demo to just the code necessary to reproduce the issue.

By removing all of the irrelevant stuff we can concentrate on
examining the code that is causing the problem.

The centering of the arrow…not sure because of all the extra stuff in there…I know I wouldn’t be using a div though. Pseudo element for sure. Ditto the ‘caret’…it seems oddly laid out.

Taking the second thing…this is often solved by using a transparent top border but that may not be possible here.

To be honest…it’s seems like a very complex arrangement. I think there are better mega menus out there.

[JFeuchter]

The HTML is not that much code, the CSS might, but the important stuff is almost all at the end. Just wanted to show everything in case something is causing trouble as well. Actually I took that from a sample I found and just adjust it to my needs. Meaning the arrow and the inner div is what I changed. Sorry for the messed up code D: I do my best to keep it neat.

[nkrisc]

Just wanted to show everything in case something is causing trouble as well.

By taking stuff out you’ll discover if it’s causing trouble or not. If you remove it and the problem persists, then it probably wasn’t responsible.

[Paulie_D]

Indeed…

I may have time tomorrow to take a stab at this but it may involve considerable rewriting which may not be what the OP wants.

I get the feeling that a quick fix is wanted and that may not be possible.

Anything that’s auto-generated as this is is likely to be full of poor code.

[JFeuchter]

I was indeed looking for a quick fix, maybe something I haven’t yet think of. But if you see that this is not possible Im not against re-writing most of the code if thats what I must do :P I just wanted to make sure I wasn’t missing something. Either way thank you for your time :P

[JFeuchter]

Ok I solved the problem D: hehe I worked on a suggestion a guy made over at stackoverflow. I just moved the background color and border to a div inside the one that appears after the hover made the div transparent and use padding instead of margin. and wala :P the div stays open cause its hovering over the div box of the submenus. As for making the arrow go right in the middle im still looking into it. D: The code will be in the fiddle if anyone wants to check it out. I know its not the most neat code, but it works XD

[Author]

Posts