CSS Drop Down Menu help
Please help I got a problem with my CSS, I wanted it to look like this ::
PRODUCTS
→ NERPETS
When you hover from the products nav , it drifts to the left and the layout breaks.
You’ll need to post the full HTML and CSS for that if you want folk to be able to help.
On those inner dropdown <div>'s assign a class to it. E.g. “dropdown”. Now on that dropdown class, add in “position:absolute;top:100%;left:0;width:auto”
Now on “#navigation li” add in position:relative to that.
If you say it doesn’t work, please re-read my post because you did something wrong. This 100% works - I tested
@TechnoBear (s)he provided a link.
Oops - my apologies. I saw that as part of the image.
I figured as much - I clicked it hesitantly because I thought it was part of the image too but my curiosity got the best of me 
. I understand why you thought that.
2 Likes
My navigation Li is not an ID its a class.
Ryan’s point is still valid, though. Have you tried what he suggested?
Rather than placing the dropdown links, consider placing them in a more semantic unordered list—which is the recommended practice.
Here’s an example of CSS menu enhanced with a little JS—although you could leave the JS out and it will work ok. These days—especially because of mobiles—a CSS-only dropdown is not really viable.
1 Like
Thanks for helping.
I change my DIV to dropdown UL class to .subMenu and I’m stuck again fixing it.
→ Ner Pets
My bad for the deleted posts.
I apologize that I said #navigation li, but it should have been really obvious that I meant .navigation li{}. Should have still attempted to do what I suggested. Good job adjusting the HTML to represent a dropdown (<ul>'s and what not). Add in my code in the appropriate classes.
.navigation li{position:relative;}
.navigation li li{float:none;margin:0;}
.navigation .subMenu{top:100%;left:0;margin:0;padding:0;list-style:none}
It covers up the slider
.navigation li li {
float: none;
margin: 0;
position: absolute;
}
is it like overflow: hidden?
Thank you so much, I appreciate your time.
Why did you remove the positoin:absolute from .navigation .subMenu{} and ADD it to .navigation li li{}? I didn’t say to do that . Add position:absolute back to .subMenu{} and remove it from .navigation li li{}
Do what I just said above and you’ll see it go over top. Not sure why you made those changes…
No the float:none is so the list items won’t be side by side. Since .navigation li{} is floated. The li li needs to be unfloated.
The position:absolute as I said is not something I said to do so I’m ignoring that.
The margin:0; was for positional purposes.
It’s working now, but my problem is I need to refresh my website to view my flexslider.
Your Javascript isn’t loading all the way through. The classes that are applied to the <li>'s to make the slideshow appear are not being put on the elements. Head over to the Javascript section of the website and get their input.
The only thing I can think of is that your loading box on first visit to the page may be causing the issues. Not sure though. Try removing that script and seeing if it loads the first time - if it does, you know that the scripts are interfering.
Does the site that originally host htat script have issues with it not loading the first time? Where did you get that script? Check their site out. You have conflicting JS I believe.
Is there any slider plugin better than this one?
It won’t load away from the first view of my website.
Mt work uses this - I love it. Apparently other members here use this