CSS3/HTML5 dropdown menu - html

Question

Been trying to fix my code for a couple of hours and I just can't. I want to have my navbar have a dropdown function. But I can't seem to make it work.
As you can see I've start on the dropdown menu class, but I can't figure where to go from there. Been googling, and found a lot of examples, tried to copy/paste some of the bits, with no good results. So I was thinking that you might be able to help.
nav {
display: block;
background-color: indianred;
box-shadow: 0px 10px 5px #888888;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
width: 125px;
color: black;
padding: 20px;
background-color: blueviolet;
text-decoration: none;
}
nav ul li a:hover {
background-color: aqua;
}
.dropdown {
display: none;
}
<nav>
<ul>
<li>FORSIDE
</li>
<li>ERHVERVSUDDANNELSER
<ul class="dropdown">
<li>content 1</li>
<li>content 1</li>
<li>content 1</li>
<li>content 1</li>
</ul>
</li>
<li>EUX
</li>
<li>HTX
</li>
<li>OM TECH COLLEGE
</li>
</ul>
</nav>

Answer 1

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
for more detail visit Dropdown Menu in Navbar

Answer 2

Change the CSS to this:
nav {
display: block;
background-color: indianred;
box-shadow: 0px 10px 5px #888888;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-block;
padding: 20px;
position:relative;
}
nav ul li a {
width: 125px;
color: black;
padding: 20px;
background-color: blueviolet;
text-decoration: none;
}
nav ul li a:hover {
background-color: aqua;
}
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
position:absolute;
background:indianred;
}
<nav>
<ul>
<li>FORSIDE</li>
<li>ERHVERVSUDDANNELSER
<ul class="dropdown">
<li>content 1</li>
<li>content 1</li>
<li>content 1</li>
<li>content 1</li>
</ul>
</li>
<li>EUX</li>
<li>HTX</li>
<li>OM TECH COLLEGE</li>
</ul>
</nav>
You wanted to hide the dropdown but then show it when you hover over the dropdown's parent element.
I then made the parent li position:relative; and the dropdown position:absolute so it didn't push any of the other dropdown menu items anywhere it shouldn't be, but didn't style it past giving it a background colour.

Answer 3

you need to write css for the element on hover
like
element1:hover tobeshownele{display:block;}

Answer 4

You can try something like this. Didn't want to change too much so the code and UI are still quite messy.
nav {
display: block;
background-color: indianred;
box-shadow: 0px 10px 5px #888888;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-block;
margin: 20px;
}
nav ul li a {
width: 125px;
color: black;
padding: 20px;
background-color: blueviolet;
text-decoration: none;
}
nav ul li a:hover {
background-color: aqua;
}
.dropdown {
display: none;
position: absolute;
}
nav ul li:hover .dropdown {
display: block;
}
ul.dropdown li {
display: block;
padding: 10px;
}
<nav>
<ul>
<li>FORSIDE</li>
<li>ERHVERVSUDDANNELSER
<ul class="dropdown">
<li>content 1</li>
<li>content 1</li>
<li>content 1</li>
<li>content 1</li>
</ul>
</li>
<li>EUX</li>
<li>HTX</li>
<li>OM TECH COLLEGE</li>
</ul>
</nav>