I’m making an attempt to make an internet web page that has a high navigation panel and a picture slider on the backside. The picture slider works wonderful. however the navigation panel doesnt reply to clicks or hover results.

physique {
  margin: 0px;
  padding: 10px;
  background-color: #ccc9c9;
}

header{
  width: 100%;
  peak: 70px;
  background-color: #282828;
}
h1{
  place: absolute;
  padding: 3px;
  float: left;
  margin-left: 2%;
  margin-top: 10px;
  font-family: Calibri;
  colour: #39ca74;
}
span{
  colour: #ffffff
}
nav-btn a:hover{
  text-decoration:underline;
}

li{
  show: inline-block;
  padding: 15px 30px;
}
a {
  width: auto;
  float: proper;
  margin-top: 8px;
  text-decoration:underline;
  text-align: heart;
  colour:#ffffff
}
.field {
  width: 300px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 25px;
}
.slide-img {
  peak: 350px;
  place: relative;
}
.slide-img img {
  width: 100%;
  peak: 100%;
  object-fit: cowl;
}
.detail-box {
  width: 100%;
  show: flex;
  justify-content: space-between;
  align-items: heart;
  padding: 10px 20px;
  box-sizing: border-box;
  font-family: calibri;
}
.kind {
  show: flex;
  flex-direction: column;
}
.kind a {
  colour: #222222;
  margin: 5px 0px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding-right: 8px;
}
.kind span {
  colour: rgba(26, 26, 26, 0.5);
}
.amount {
  colour: #333333;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: poppins;
  letter-spacing: 0.5px;
}
.overlay {
  place: absolute;
  left: 50%;
  high: 50%;
  rework: translate(-50%, -50%);
  width: 100%;
  peak: 100%;
  background-color: rgb(190, 204, 191, 0.6);
  show: flex;
  justify-content: heart;
  align-items: heart;
  visibility: hidden;
}
.details-btn {
  width: 160px;
  peak: 40px;
  show: flex;
  justify-content: heart;
  align-items: heart;
  background-color: #ffffff;
  colour: #252525;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: calibri;
  border-radius: 20px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
  colour: #ffffff;
  background-color: #288a40;
  transition: all ease 0.3s;
}
.slide-img:hover .overlay {
  visibility: seen;
  animation: fade 0.5s;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slider {
  width: 50%;
  peak: 100vh;
  show: flex;
  justify-content: heart;
  align-items: heart;
  rework: translate(50%);
}
<header>
  <nav>
    <ul class="navigation">
      <li><a href="https://stackoverflow.com/questions/73793796/templates/index.html" class="nav-btn"></a>Residence</li>
      <li><a href="https://stackoverflow.com/questions/73793796/templates/index.html" class="nav-btn"></a>Gadgets</li>
      <li><a href="https://stackoverflow.com/questions/73793796/templates/index.html" class="nav-btn"></a>Browse</li>
      <li><a href="https://stackoverflow.com/questions/73793796/templates/index.html" class="nav-btn"></a>Add Gadgets</li>
      <li><a href="https://stackoverflow.com/questions/73793796/templates/index.html" class="nav-btn"></a>Logout</li>
      <li><enter kind="submit" worth="Go to Google" />Logout</button></li>
    </ul>
  </nav>
</header>
<physique>
  <part class="slider">
    <ul id="autoWidth" class="cs-hidden">
        <li class="item-a">
            <div class="field">
                <div class="slide-img">
                  <img src="static/photographs/1.webp" alt="1" />
                  <div class="overlay">
                    <a href="#" class="details-btn">View Particulars</a>
                  </div>
                </div>
          
                <div class="detail-box">
                  <div class="kind">
                    <a href="#">Digicam & Camcorders</a>
                    <span>Accessible Items: </span>
                  </div>
                  <a href="#" class="amount"> 0 </a>
                </div>
              </div>
        </li>
       </ul>
 </physique>

Consequence:
Above code is the partial code for the html code I’m utilizing and the css is code is the entire one. As you’ll be able to see, the hovering would impact it in any respect they usually dont reply to clicks both

Sameen Raiyan is a brand new contributor to this website. Take care in asking for clarification, commenting, and answering.
Try our Code of Conduct.

This website is quickly in read-only mode and never accepting new solutions.

Not the reply you are searching for? Browse different questions tagged .