Dropdown navbR
How do I make an dropdown navbr?
What is a dropdown navbr? How do you make a dropdown navbr? This script and codes were developed by Maria Marica on 26 October 2022, Wednesday.
Dropdown navbR - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>dropdown navbR</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="maindiv"> <div id="navdiv"> <ul> <li id="logo">Potayto-Potatoh</li> <li><a href="#about">About</a></li> <li id="dropbtn"><a href="#portfolio">Portfolio</a> <div class="dropdown-content"> <a href="#">work 1</a> <a href="#">work 2</a> <a href="#">work 3</a> </div> </li> <li><a href="#contact">Contact</a></li> </ul> </div> </div>
</body>
</body>
</html>
Dropdown navbR - Script Codes CSS Codes
body { width: 100%; background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5"); background-size: cover;
}
#navdiv { opacity: 0.70; filter: (opacity=70);
}
#navdiv ul { list-style-type: none; width: 100%; background: white; line-height: 3rem; float: right; overflow: hidden;
}
#navdiv ul a { text-decoration: none; color: black; padding: 2em;
}
#navdiv ul li { float: right; margin-right: 1em;
}
#logo { float: left !important; font-size: 2em; margin-left: 1em;
}
#navdiv ul #logo:hover { background: none;
}
#navdiv ul li a:hover, dropdown-content:hover #dropbtn { background: #B266FF; transition: all 0.8s;
}
.dropdown-content { display: none; position: absolute; min-width: 10em; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a { color: black; text-decoration: none; height: 0.5em; text-align: center; vertical-align: center; display: block; text-align: center;
}
.dropdown-content a:hover { background-color: #f1f1f1
}
#dropbtn:hover .dropdown-content { display: block;
}
Developer | Maria Marica |
Username | mariamarica |
Uploaded | October 26, 2022 |
Rating | 3 |
Size | 2,012 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
To-do list | 1,989 Kb |
Mostly Fluid | 1,661 Kb |
Animation | 2,001 Kb |
Quote gen | 3,270 Kb |
Simon Game | 3,643 Kb |
Off Canvas | 1,870 Kb |
Column Drop | 1,610 Kb |
Local weather | 3,796 Kb |
Wiki viewer | 3,647 Kb |
A Pen by Maria Marica | 1,422 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!