adding submenu ruins my navigation ,anyone? - html

Question

now I am finally got my navbar centered I have gotten a submenu in my navbar
now and I am trying to get it to work but all my links are just ruined :-/
so hope someone could explain to me why it doesnt want to work on the way I am doing it?
I want to keep the style of my navbar, and I am currently playing around with the css to get
my submenu working but it keeps ruining it :-/.
also when adding display:inline; to my .topnav ul it is not centered anymore grr ,
I have watched a video but even that would not work with my navbar.
I know I am doing something wrong but what ??
(can be a litle messy just cause i seperated the codes for testing sorry for that!)
/*Topnav*/
.topnav {
width: 100%;
opacity: 1;
background-color: rgba(255,255,255,0.6);
margin-bottom: 10px;
padding: 5px 0px 5px 0;
border-bottom: dotted #66A761;
border-top: dotted #66A761;
position:relative;
}
.topnav ul {
text-align: center;
}
.topnav ul li {
display: inline;
margin-left: 15px;
}
.topnav a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.topnav a:visited {
color: #FFF;
}
.topnav a:link {
color :#9F257D;
}
.topnav a:hover {
color: #66A761;
}
.topnav input {
float: right;
padding: 3px;
margin: 0 5px;
position: absolute;
right: 20px;
}
/*submenu testing*/
.topnav ul li ul li {
display: none;
}
.topnav ul li:hover ul li {
display: block;
}
<!--Topnav-->
<div class="topnav">
<nav>
<ul>
<li>recepten
<ul>
<li>lactosevrij</li>
<li>suikervrij</li>
<li>glutenvrij</li>
</ul>
</li>
<li>varianten
<ul>
<li>basis</li>
<li>standaard</li>
<li>luxe</li>
</ul>
</li>
<li>contact</li>
<li>over ons</li>
<input type="text" style="right:0" placeholder="Search..">
</ul>
</nav>
</div>

Answer 1

.topnav li {
position:relative;
}
.topnav li ul {
position: absolute;
top:25px;
left:0px;
background-color: #fff;
}
If the intention is that these sub menus work as dropdown you might want to set their positioning to absolute, but note that you have to make the wrapper element relative or else it might take the viewport as anchor.

Answer 2

It's not entirely clear what you mean but it sounds like you want a horizontal nav with dropdown sub-menu items.
E.G:
/*Topnav*/
.topnav {
width: 100%;
opacity: 1;
background-color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
padding: 5px 0px 5px 0;
border-bottom: dotted #66A761;
border-top: dotted #66A761;
position: relative;
}
.topnav ul {
text-align: center;
display: flex;
justify-content:space-between;
}
.topnav ul li {
display: inline-block;
margin: 0 7px;
padding: 0;
text-indent: 0;
position: relative;
}
.topnav ul li ul {
display: block;
position: absolute;
top: 100%;
left: -100px;
right: -100px;
margin: 0;
padding: 0;
}
.topnav ul li ul li {
display: block;
margin: 0;
padding: 0;
text-indent: 0;
}
.topnav a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.topnav a:visited {
color: #FFF;
}
.topnav a:link {
color: #9F257D;
}
.topnav a:hover {
color: #66A761;
}
.topnav input {
padding: 3px;
margin: 0 5px;
}
/*submenu testing*/
.topnav ul li ul li {
display: none;
}
.topnav ul li:hover ul li {
display: block;
}
<!--Topnav-->
<div class="topnav">
<nav>
<ul>
<li>recepten
<ul>
<li>lactosevrij</li>
<li>suikervrij</li>
<li>glutenvrij</li>
</ul>
</li>
<li>varianten
<ul>
<li>basis</li>
<li>standaard</li>
<li>luxe</li>
</ul>
</li>
<li>contact</li>
<li>over ons</li>
<input type="text" placeholder="Search..">
</ul>
</nav>
</div>

Answer 3

i changed the whole thing again and got it to react only got 2 problems with it
1 i can only get on the first link in the submenu, as soon as i slide down with my cursor it just closes before i hit my other link/links. (while in the snippet it works)
2 cant center my links in the middle under my logo on the page as it is , the spaces between it is perfect.
/*Topnav*/
.topnav {
width: 100%;
opacity: 1;
background-color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
padding: 5px 0px 5px 0;
border-bottom: dotted #66A761;
border-top: dotted #66A761;
position: relative;
}
.topnav ul {
display: inline;
text-align: left;
}
.topnav ul li {
display: inline-block;
margin: 0 7px;
padding: 0;
text-indent: 0;
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.topnav a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.topnav a:visited {
color: #FF00E0;
}
.topnav a:link {
color: #9F257D;
}
.topnav a:hover {
color: #66A761;
}
.topnav input {
float: right;
padding: 3px;
margin: 0 5px;
position: absolute;
right: 20px;
}
/*submenu testing*/
.topnav ul li ul {
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
padding: 5px 5px;
}
.topnav ul li:hover ul li {
display: block;
}
.topnav ul li ul li {
display: none;
}
<div class="topnav">
<nav>
<ul>
<li>recepten
<ul>
<li>lactosevrij</li>
<li>suikervrij</li>
<li>glutenvrij</li>
</ul>
</li>
<li>varianten
<ul>
<li>basis</li>
<li>standaard</li>
<li>luxe</li>
</ul>
</li>
<li>contact</li>
<li>over ons</li>
<input type="text" style="right:0" placeholder="Search..">
</ul>
</nav>
</div>