How can I make the submenu open to the left when hovering over a menu point, instead of directly under it? I have tried adjusting the position attributes but haven't found the right solution yet. The closest I got was by changing the display property from block to inline-block. Is there a way to achieve this without using JavaScript?
nav {
background-color: cadetblue;
position: relative;
height: 60px;
}
ul.fixed {
background-color: cadetblue;
font-size: 22px;
text-align: center;
position: fixed;
}
ul.fixed li {
display: inline;
list-style: none;
font-family: Bahnschrift;
}
ul.fixed li a {
text-decoration: none;
color: aliceblue;
text-align: center;
padding: 14px 20px;
}
ul.fixed li a:hover {
background-color: gray;
color: cornflowerblue;
opacity: .8;
}
ul.Untermenue {
display: none;
position: absolute;
background-color: gray;
margin-left: 0;
padding: 0;
opacity: .8;
}
li.Untermenue {
display: inline;
position: relative;
}
ul.Untermenue li a {
color: #D6D6D6;
display: block;
}
.Dropdown:hover .Untermenue {
display: block;
}
.Untermenue a:hover {
background-color: cornflowerblue;
}<nav class="Navigation">
<ul class="fixed">
<li><a href="Menü.html">Home</a></li>
<li class="Dropdown"><a>Wir</a>
<ul class="Untermenue">
<li><a href="Menü.html">Home</a></li>
<li><a href="Menü.html">Home</a></li>
<li><a href="Menü.html">Home</a></li>
</ul>
</li>
<li><a href="Menü.html">Haus</a></li>
<li><a href="Menü.html">Contact</a></li>
</ul>
</nav>