How to link to another html page in a dropdown menu?

Question

UPDATED

Hello everyone, can someone help me with my issue? When I click on the "Product" a dropdown menu opens. In that dropdown menu I want to click on the first or second element that is linked to another html page (a href=filename.html). The hover effect shown in the css snipped does not work on the first dropdown element and by clicking on the first dropdown element it does not direct to my html file. The second element directs always to the page. What is the issue being the first element of the ul (.hidden) element? In the code expample I made the dropdown on purpose fixed, so the issue is shown more clear. Thank you for your time.

/* Design System -- Typografie*/

.sans-serif-heading-3{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.375em;
    line-height: 1.625em;
    font-weight: bold;
    color:#444342;
}
.sans-serif-text{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.125em;
    line-height: 1.375em;
    font-weight: normal;
    color:#444342;
}
.sans-serif-text2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.125em;
    line-height: 1.375em;
    font-weight: normal;
    color:#BF9D1D;
}
.sans-serif-caption{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.8125em;
    font-weight: normal;
    color:#444342;
    text-decoration: none;
}


/* Design System -- Grit*/

.col-1 {width: 100%;}
.col-2 {width: 36.66%;}
.col-3 {width: 5.625%;}
.col-4 {width: 25%;}





/* Navigation Bar fixiert*/

.fixed-nav{
    width: 100%;
    position: fixed;
    z-index: 9999;
    margin:0%;
    padding:0%;
    background-color: #FFFEF9;
}
.header{
    background: #FFFEF9;
    z-index: 100;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 0.8%;
    position: sticky;
}
.hidden{
    display:flex;
    flex-direction: column;
    position: absolute;
    z-index: -5;
    background-color: #FFFEF9;
    transition: all .375s;
    padding-left:0%;
    padding-right:0%;
}

.hidden li {
    margin-top: 5%;
    margin-bottom: 5%;
    background-color: #FFFEF9;
    padding: 2%;
}
.hidden li:hover{
    color: #BF9D1D;
}
.xy {
    height:4% ;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
}
.xy a:hover, .hidden ~ a:hover, .header-box1 a:hover{
    color: #BF9D1D;
}
.xy a:focus, .hidden ~ a:focus, .header-box1 a:focus{
    color: #BF9D1D;
}
li{
    list-style: none;
}
.header-box1{
    display: flex;
    flex-direction: row;
    float: left;
    align-items: center;
    text-transform: uppercase;
}
.space{
    padding-right:7%;
    justify-content: space-between;
}
.header-box2{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
}
.head-1{
    height: 7%;
}
.header-box2 img{
    margin-top: 12%;
    margin-bottom: 1%;
}
.xy {
    height:4% ;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
}
.xy a:hover, .hidden ~ a:hover, .header-box1 a:hover{
    color: #BF9D1D;
}
.xy a:focus, .hidden ~ a:focus, .header-box1 a:focus{
    color: #BF9D1D;
}
li{
    list-style: none;
}
.header-box1{
    display: flex;
    flex-direction: row;
    float: left;
    align-items: center;
    text-transform: uppercase;
}
.space{
    padding-right:7%;
    justify-content: space-between;
}
.header-box2{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
}
.head-1{
    height: 7%;
}
.header-box2 img{
    margin-top: 12%;
    margin-bottom: 1%;
}
.xy {
    height:4% ;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
}
.xy a:hover, .hidden ~ a:hover, .header-box1 a:hover{
    color: #BF9D1D;
}
.xy a:focus, .hidden ~ a:focus, .header-box1 a:focus{
    color: #BF9D1D;
}
li{
    list-style: none;
}
.header-box1{
    display: flex;
    flex-direction: row;
    float: left;
    align-items: center;
    text-transform: uppercase;
}
.space{
    padding-right:7%;
    justify-content: space-between;
}
.header-box2{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
}
.head-1{
    height: 7%;
}
.header-box2 img{
    margin-top: 12%;
    margin-bottom: 1%;
}

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" type="image/jpg" href="media/logo_2.svg"/>
    <link rel="stylesheet" type="text/css" href="styles-example.css">  
</head>
<body>

<!-- Navigation elements -->

<div class="fixed-nav">
    <div class="header">
        <div class="col-1 head-1"></div>
        <div class="col-3"></div>
        <div class="col-1 sans-serif-caption xy">
            <div class="header-box1 col-4 sans-serif-caption">
                <li class="space"><a href="index.html#UeberUns">Über Uns</a></li>
                <li class="space hidden-1">
                    <a id="produkt" href="">Unsere Produkte</a>
                    <ul class="hidden">
                        <li><a href="./npmix.html">HARMI-SOIL 8.0/15 </a></li>
                        <li><a href="./npmix.html">Unterfußdüngung mit KS NP MIX</a></li>
                        <li><a href="./npmix.html">Agrimax Konzentrat</a></li>
                    </ul>
                </li>            
            </div>
            <div class="header-box2 col-4">
                <li>
                <image src="media/logo_2.svg" alt="logo"/>
                </li>
            </div>    
            <div class="header-box1 sans-serif-caption col-4">
                <li class="sans-serif-caption space"><a href="index.html#Kontakt">Kontakt</a></li>
                <div class="search sans-serif-caption">
                    <input type="text" placeholder="Suche">
                    <svg id="icon_16_search" data-name="icon / 16 / search" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
                        <path id="Pfad_271" data-name="Pfad 271" d="M0,0H24V24H0Z" fill="none"/>
                        <path id="Pfad_272" data-name="Pfad 272" d="M15.5,14h-.79l-.28-.27a6.518,6.518,0,1,0-.7.7l.27.28v.79l4.25,4.25a1.054,1.054,0,0,0,1.49-1.49Zm-6,0A4.5,4.5,0,1,1,14,9.5,4.494,4.494,0,0,1,9.5,14Z"/>
                    </svg>
                </div>
                <div class="language-button row sans-serif-caption">
                    <image src="media/language-24px.svg" alt="language"/>
                    <a>de</a>
                </div>
                <div class="col-3"></div> 
            </div> 
  
        </div>
    </div>
</div>


<script src="index.js"></script>
</body>
</html>

Answer 1

You might want to use a relative path in the a-tags. For example replace <a href="npmix.html">Unterfußdüngung mit KS NP MIX</a> with <a href="./npmix.html">Unterfußdüngung mit KS NP MIX</a>

Answer 2

When :focus you need to click on element to get a focus on it and then css should work. You did "Unsere Produkte" as <a> tag, by clicking it you were directed to index.html. So you should change href="index.html #Produkt" to href="#Produkt" and href="index.html #UeberUns" to href="#UeberUns"