Jump to content
Sign in to follow this  

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">




Share this post

Link to post
Share on other sites

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.


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...