Creating a Basic Dropdown Menu Using CSS
Dropdown menus are a common feature in web design, providing users with a convenient way to access various sections or options within a website.
While there are many ways to implement dropdown menus using CSS, here we'll discuss a basic approach that utilizes simple HTML structure and CSS styling.
<html>
<head>
<style>
.menu
{
border:2px solid red;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
padding-left:10px;
padding-right:10px;
}
.linksbox
{
border:2px solid green;
display:flex;
}
.link
{
padding:10px;
}
.content-box
{
background:rgba(5,4,3,0.4);
display:none;
position:absolute;
top:100%;
}
.link:hover .content-box
{
display:block;
}
</style>
</head>
<body>
<DIV class="menu">
<div>logo</div>
<div class="linksbox">
<div class="link"><a href="#">home</a></div>
<div class="link"><a href="#">about</a></div>
<div class="link"><a href="#">gallery</a></div>
<div class="link"><a href="#">category</a>
<div class="content-box">
<div class="link">
<a href="#">electronic</a>
</div>
<div class="link">
<a href="#">shoes</a>
</div>
<div class="link">
<a href="#">accessories</a>
</div>
</div>
</div>
</div>
<div>
<input type="search">
<input type="button" value="search">
</div>
</DIV>
</body>
</html>
0 Comments