Hi! I am super happy last night while I was taking a shower I thought of solution of a problem I had and it WORKED!!! Its the first time I’ve thought of a solution and made it work. Basically making my menu visible on hover. Ive been trying for a few hours now on the 2nd part of the problem. But I need a hint.
Problem: My drop down menu wont position it self as “block” or drop down, instead its side by side(link1, link2, link3) . I have no idea where to start with this, can someone give me the theory/hint on how I am suppose to be thinking about it? I have commented out my solution to the visibility part until I can position the links below the dropdown button.
My CSS
body {
background-color: #ff794d;
}
.main {
margin-top: 50px;
}
/*.dropdown-content {
visibility: hidden;
}
.dropdown:hover .dropdown-content{
visibility: visible;
}*/
.dropdown-content a {
display: block;
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a#active {
background-color: #4CAF50;
color: white;
}
My HTML
<!DOCTYPE html>
<html>
<head>
<title> Practice Part 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="topnav">
<a id="active" href="#Home">Home</a>
<a href="#News">News</a>
<a href="#about">About</a>
<a href="#Contact">Contact</a>
<div class="dropdown">
<a href="#Contact">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</header>
<div class="main">
</div>
</body>
</html>