How to Make a Transparent NavBar Dropdown Navigation Bar Simple HTML CSS

Navbar or Navigation Bar is a very important part of a website that serves to help visitors or website visitors explore the contents of a website easily.

If you use a platform like blogger, each template usually already provides a navbar, but wouldn’t you prefer to know how to change it? Here’s a simple HTML code to create a navbar.

  • Home

The above code can be placed in the body, more precisely in the tag here.

Read also : Create a simple web view using HTML

If we open the html code above in a browser, it still looks like a list without any sweetness. hehehe.

So we need CSS to add the sweet side to make it look more attractive, you could say HTML without CSS is like making a house but not yet painted it still looks ahem ahem.

Here’s the CSS code we need to make it look nicer.

ul {
list-style-type: none;
margins: 0;
padding: 0;
overflow: hidden;
background-color: #333;

li {
float: left;

li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;

.active {
background-color: #FF0B7B;

You can put the code above in the tag here, usually this tag is placed above the tag.

The code above is a css code to add a sweetener to the html tag. The .active function is to give effect when the menu is active the background-color code effect will give color to the appearance.

Here’s the css code for a transparent dropdown view

.dropbutton {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
borders: none;
cursors: pointers;

.dropdown {
position: relative;
display: inline-block;

.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0.7;

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

.dropdown-content a:hover {background-color: #d8d8d8}

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

.dropdown:hover .dropbtn {
background-color: #f9f9f9;

Making the display transparent in some parts of our website is actually not too difficult because we can give the opacity code to the element that we want to turn transparent.

The hover code has the function of giving the effect when the crew is in the hover element area, the css code function with the hover code will be active and give an immediate effect.

That’s some information from me that I hope can be useful for friends. Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *