css dropdown menu from ws3 website

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



css dropdown menu from ws3 website



I just copied the css dropdown menu example from the ws3 website



aaand it doesnt work with my code. I checked to see if I made a typo, I didnt.



also I tried to just copy the code and see if it works, and it did, but when I put other stuff for my page in (like sub the ws3's content with mine) it doesnt.



Could you guys guide me through this please?
Thank you :)



my code( html):


<nav>
<ul>
<li><a href="#">front page</a></li>
<li><a class ="active" href="#">paintings</a></li>
<li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Series</a>
<div class="dropdown-content">
<a href="#">City</a>
<a href="#">80's windbreaker</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</nav>



just the navigation bar section



css:


ul
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-size:3em;
position:sticky;
top:0;
color:blue;



li
float: left;


li a, .dropbtn
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;


li a:hover:not(.active), .dropdown:hover .dropbtn
background-color: red;


li.dropdown
display: inline-block;


.dropdown-content
display: none;
position: absolute;
background-color: gray;
min-width: 160px;
z-index: 1;


.dropdown-content a
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;


.dropdown-content a:hover
background-color: red;



.dropdown:hover .dropdown-content
display: block;


.active
background-color: blue;




1 Answer
1



It looks like like the problem is the position: sticky on the ul element. Removing that allows the dropdown to work.


position: sticky





yay! it worked!
– jcjcjcjcj
Aug 11 at 18:39






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS