Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What CSS have you used to create this horizontal sub-menu?
I found these on the forum.
.main-navigation li li {
float: left;
}
.main-navigation ul ul {
left:0px;
}
But, I want my submenu as large as my page, so I change width and padding to try… It works… except hover problem…
.main-navigation li li {
float: left;
}
.main-navigation ul ul {
float: left;
left:0px;
margin-left:-800px;
padding-left:600px;
width: 1500px;
background:url(http://perso-laplagne.fr/Images_Structure/MenuSecondaire.png) repeat-x 0 -45px;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
But, I want my submenu as large as my page, so I change width and padding to try… It works.
Hehe, don’t do that, do this:
.main-navigation {
position: relative;
}
.main-navigation ul > li {
position: static;
}
and instead of this:
.main-navigation ul ul {
float: left;
left:0px;
margin-left:-800px;
padding-left:600px;
width: 1500px;
background:url(http://perso-laplagne.fr/Images_Structure/MenuSecondaire.png) repeat-x 0 -45px;
}
Do this:
.main-navigation li ul {
top: auto;
}
Thanks !
It works perfectly !
Now… I can’t move menu item at right under the main item ?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Mmm there’s still something funky going with another menu showing, I’ll have to spend more time than I thought investigating.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Took more time to invest than I initially thought, so no I didn’t have enough time to investigate.
Have you tried creating your submenu using conventional techniques of display: none and display: block? Instead of “height: 0” and then giving it a height. I think that has something to do with it too.
