Why does the :hover not work when I add the "a" tag?-CodePudding

I noticed that I can't click the a tags to get to the other page, obviously I can't use the :hover either when doing this. I'm quite new to HTML CSS although I've been at this for hours now so I'm asking you geniuses for help. It's probably something like clear:both but or something to do with the positioning but I can't figure out for the life of me what it is. I've tried commenting out pretty much everything (if not everything) and it just doesn't work. Thank you guys in advance and sorry if it's a noob question.

html{
    height:100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Titillium Web', sans-serif;
    background-color: #FDF0E0;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    letter-spacing: 1.5px;
}


/* vänstersida */

img {
    width: 7vw;
    height: 7vh;
    padding-top: 2vh;
}

.container .left-side {
    padding: 0 0 0 3vh;
    width: 50vw;
    height: 100vh;
}

.expert {
    color: #08A4E1;
}

#Slogan {
    margin-top: 3.2em;
    font-size: 500%;
}

p {
    font-size: 170%;
}

#områden {
    color: #08A4E1;
}

#toppsäljare {
    background: none;
    outline: none;
    border: none;
    font-size: 130%;
    color: #08A4E1;
    margin-top: 30vh;
    cursor: pointer;
}

/* pil css     content: " \2192"; */

#toppsäljare::after {
    content: "";
    height: 2px;
    width: 0%;
    background-color: black;
    display: block;
    transition: .5s ease-in-out;
}

#toppsäljare:hover::after {
    content: "";
    height: 2px;
    width: 100%;
    background-color: black;
    display: block;
}


/* högersida */

.container .right-side {
    width: 50vw;
    height: 100vh;
}

#turbin {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    z-index: -100;
    overflow: hidden;
}

/* Navbar */

.container-nav {
    position: fixed;
    top: 12.5px;
    font-weight: bold;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}

nav ul li a {
    color: black;
    text-decoration: none;
}

nav ul li a:hover {
    color: #FDF0E0;
    transition: .3s;
}

    <div >
        <div >
            <img src="/IMAGES/insys-icom-logo.webp" alt="logo">
            <h1 id="Slogan">Your <span >digitalisation expert</span> for industrial data communication</h1>
            <p>With our core competencies of <span id="områden">remote maintenance, remote control, status monitoring and data networking,</span> we form the secure bridge between IT and OT.</p>
            <button id="toppsäljare">Best sellers</button>
        </div>

        <div >
            <div >
                <nav>
                    <ul>
                        <li><a href="#"></a>SHOP</li>
                        <li><a href="/HTML/contactpage.html"></a>CONTACT US</li>
                        <li><a href="#"></a>ABOUT US</li>
                        <li><a href="#"></a>FIND US</li>
                    </ul>
                </nav>
            </div>
            <video id="turbin" src="/IMAGES/turbin wide.mp4" alt="turbinevideo" autoplay loop muted>
        </div>
    </div>

CodePudding user response：

The issue could be that you have not structured the HTML links properly.

<ul>
   <li><a href="#"></a>SHOP</li>
   <li><a href="/HTML/contactpage.html"></a>CONTACT US</li>
   <li><a href="#"></a>ABOUT US</li>
   <li><a href="#"></a>FIND US</li>
</ul>

The link text "CONTACT US" for example, should be between the opening anchor <a> and the closing tag </a>. In your code, the anchor tags are empty.

Compare your code with the following updated code:

<ul>
  <li><a href="#">SHOP</a></li>
  <li><a href="/HTML/contactpage.html">CONTACT US</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">FIND US</a></li>
</ul>

Notice I am putting the text between the opening anchor <a> and the closing anchor </a> tags.