- This topic is empty.
December 9, 2014 at 8:53 am #190419
I am working on a new nav with drop-down sub menus. Everything is pure CSS. The problem is that my nav displays pretty good on Chrome but if you use a different browser you’ll see a little gap either on the left or right.
For the li:hover I am using:
(This will change on each of the main links on the nav because of location)
Any idea? Please help.December 9, 2014 at 8:59 am #190421
Since every sub-menu is 100% wide of the parent ul why not position it with reference to that…then you don’t need to adjust the position values for each one?December 9, 2014 at 9:10 am #190428
Sorry Paulie_D, I don’t follow you… You meant the li:hover to be width:100%?December 9, 2014 at 9:15 am #190430
Nope….sorry…I mean the div holding the menus that drops down.
The div is always the same width as the top level menu so you can put the
position:relativeon the parent
ulrather than on each
Then when you apply
position:absoluteit will key off the parent menu so you don’t have to adjust the
leftvalue every time.
It will always be
left:0.December 9, 2014 at 9:33 am #190433
Still, now it messes up the top nav. This is what I have for the drop-down menus.
/* Drop Down */
left:-999em; /* Hides the drop down */
padding:10px 5px 10px 5px;
Sorry! :(December 9, 2014 at 9:56 am #190435
It was just a suggestion.December 9, 2014 at 10:35 am #190439
I agree with Paulie on this one.
Maybe set up a codepen with just the menu so we can take a closer look at that. It’s also easier for us to debug all the CSS without having to pour through the full file.December 9, 2014 at 11:07 am #190445
Here is the codepen:
Please let me know your thoughts. Thanks
RubenDecember 9, 2014 at 5:06 pm #190465
I changed and deleted a lot of your CSS and markup, but got it working.
Please note only the hover on “about” works in the interest of time.December 10, 2014 at 9:02 am #190526
Shaneisme you rock! I added a couple more changes and it works perfectly. Thanks for your help man, I really appreciate it. :)December 10, 2014 at 9:18 am #190527
Happy to help.
- The forum ‘CSS’ is closed to new topics and replies.