- This topic is empty.
-
AuthorPosts
-
December 9, 2014 at 8:53 am #190419
alucard309
ParticipantHey Guys,
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.
Here it is: http://www.keenannagle.com/clientreview/lcswma/newnav/
For the li:hover I am using:
left:-89px;
(This will change on each of the main links on the nav because of location)
top:auto;Any idea? Please help.
December 9, 2014 at 8:59 am #190421Paulie_D
MemberSince 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 #190428alucard309
ParticipantSorry Paulie_D, I don’t follow you… You meant the li:hover to be width:100%?
December 9, 2014 at 9:15 am #190430Paulie_D
MemberNope….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:relative
on the parentul
rather than on eachli
.Then when you apply
position:absolute
it will key off the parent menu so you don’t have to adjust theleft
value every time.It will always be
left:0
.December 9, 2014 at 9:33 am #190433alucard309
ParticipantStill, now it messes up the top nav. This is what I have for the drop-down menus.
/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
position:absolute;
margin:4px auto;
float:left;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border-top:none;
background:#159bd8;
}Sorry! :(
December 9, 2014 at 9:56 am #190435Paulie_D
MemberIt was just a suggestion.
December 9, 2014 at 10:35 am #190439shaneisme
ParticipantI 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 #190445alucard309
ParticipantHey Shaneisme
Here is the codepen:
http://codepen.io/anon/pen/EaPGYBPlease let me know your thoughts. Thanks
RubenDecember 9, 2014 at 5:06 pm #190465shaneisme
ParticipantI 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 #190526alucard309
ParticipantShaneisme 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 #190527shaneisme
ParticipantHappy to help.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.