How to create Transparent Dropdown Menu in Html And Css

#logictycoon
#webdesigning

In this video lecture you will learn how to create transparent drop down navigation menu bar in html and css without using any plugin and how to create hero background and text in a very easy way so watch this video from start to end.

Source Code Of Video 😎😎

First create HTML

<!DOCTYPE html>

<html>

<head>

<title>DropDown Nav by Logictycoon</title>

</head>

<body>

<nav>

<ul>

<li><a href="#">Media</a>

<ul>

<li><a href="#">Print Media</a></li>

<li><a href="#">Electronic Media</a></li>

<li><a href="#">Socail Media</a></li>

<li><a href="#">Old Media</a></li>

</ul>

</li>

<li><a href="#">Locations</a>

<ul>

<li><a href="#">South</a></li>

<li><a href="#">North</a></li>

</ul>

</li>

<li><a href="#">Stores</a></li>

</ul>

</nav>

</header>

<h1>I am Logic Tycoon</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. </p>

<button>Logic Tycoon</button>

</div>

</body>

</html>

===================================================================

Css Code

body

{

margin:0px;

padding: 0px;

font-family: tahoma;

}

header

{

background: url("bg.jpeg");

height: 100vh;

background-size: cover;

background-repeat: no-repeat;

position: relative;

}

{

margin:0px;

padding: 0px;

list-style: none;

}

ul li

{

float: left;

background-color: black;

font-size: 20px;

width: 320px;

height: 60px;

text-align: center;

line-height: 60px;

opacity: .8;

}

ul li a

{

text-decoration: none;

color:#fff;

display: block;

height: 60px;

}

ul li a:hover

{

background-color: rgb(214, 10, 10);

}

ul li ul li

{

display: none;

}

ul li:hover ul li

{

display: block;

}

.hero-text

{

text-align: center;

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

color: white;

}

.hero-text h1

{

font-size: 50px;

}

.hero-text p

{

font-weight: bold;

letter-spacing: 2px;

}

.hero-text button

{

border: none;

height: 70px;

width: 300px;

padding: 10px 25px;

background-color: black;

color:white;

font-size: 30px;

cursor: pointer;

border-radius: 10px;

transition: .5s;

}

.hero-text button:hover

{

background-color: rgb(214, 10, 10);

}

You can Download Source Code

How to create Transparent Dropdown Menu in Html And Css