Jump to content

Can somebody explain this code


Recommended Posts

If somebody can explain this code like what does what il swish 15 euros. 

Here is the code its for my nav bar but i have a hard time explaining what everything does.



.dropbtn {


    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;



.dropdown {


    position: relative;

    display: inline-block;



.dropdown-content {

    display: none;

    position: absolute;

    background-color: lightgrey;

    min-width: 200px;

    z-index: 1;



.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;



.dropdown-content a:hover {background-color: white;}

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

.dropdown:hover .dropbtn {background-color: grey;}





<div class="dropdown">

<button class="dropbtn">meny</button>

<div class="dropdown-content">


<a href="La carte/la carte.html">A la carte matsedel</a>

<a href="Veckomatsedel/veckomatsedel.html">veckomatsedel</a>






<div class="dropdown">

<button class="dropbtn" onclick="window.location.href = 'Kontakt/Kontakt.html';">kontakt</button>

<div class="dropdown-content">




Link to comment
Share on other sites

  • 2 weeks later...

First of all there is a css style given to <button class="dropbtn">meny</button>. In which there is the text color is white and back color is black. And given the padding.

There is also css style is given to dropdown and dropdown-content.

Now this class .dropdown-content a { is given for the anchor tag style.

.dropdown-content a:hover {background-color: white;} when you take your cursor over the anchor tag it's back color will be white. 

.dropdown:hover .dropdown-content {display: block;} same as here, when hover over the dropdown it'll display in the block.

.dropdown:hover .dropbtn {background-color: grey;} and when you hover over the dropdown button it's back color will be grey.


I hope you'll understand it.😅

If there is any question to ask then free to ask me.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...