Мой выпадающий Navbar сходит с ума, и я не могу объяснить, почему - PullRequest
Новая
       0

Мой выпадающий Navbar сходит с ума, и я не могу объяснить, почему

0 голосов
/ 24 февраля 2020

Я недавно начал работать над проектом веб-сайта друга автошколы. Я выполнил раскрывающийся список HTML / CSS на навигационной панели навигации, чтобы показать все данные, которые мог дать мой друг. Но я не знаю, как и почему, это начало сходить с ума, и теперь все странно, как вы могли видеть, если вы попробуете мой код. Я перепробовал все, но, похоже, ничего не решило.

Итак, я создал аккаунт на этом сайте, который мне помогал много раз. Вот мой код html и код css, чтобы вы могли мне помочь: 

header {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  padding: 0;
  position: relative;
  height: 200px;
  background: #EFEFEF;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Source code pro', Calibri, Serif;
  background: #EFEFEF;
}

.black {
  height: 60px;
  background: black;
  width: 100%;
  color: #ff00ff;
  position: absolute;
  bottom: 0;
}

nav>ul {
  margin: 0px;
  padding: 0px;
}

nav li {
  list-style: none;
}

nav>ul>li {
  position: relative;
  float: left;
}

.sub-menu {
  display: none;
}

nav>ul::after {
  content: "";
  display: block;
  clear: both;
}

nav a {
  display: inline-block;
  text-decoration: none;
}

nav>ul>li>a {
  padding: 20px 30px;
  color: #FFF;
}

nav li:hover .sub-menu {
  display: inline-block;
  background-color: red;
  position: absolute;
  top: 100%;
  left: 0px;
  padding: 0px;
  z-index: 1000;
}

ul li ul .item-2 {
  position: absolute;
  left: 120px;
}

.sub-menu li {
  border-bottom: 2px solid #ff00ff;
}

.sub-menu li a {
  font-size: 13px;
  padding: 15px 30px;
  color: black;
  width: 150px;
}

.permis-auto:hover,
.permis-moto:hover,
.permis-remorque:hover,
.code:hover,
.info:hover {
  border-top: 1px solid grey;
  color: #ff00ff;
  background: #ff00ff;
}

.permis-auto:hover,
.permis-moto:hover,
.permis-remorque:hover,
.code:hover,
.info:hover .presentation {
  margin-top: 100px;
}

.sub-menu:hover {
  background: rgb(255, 0, 255, 0.30);
  color: white;
}

.sous-onglet {
  display: none;
}

.presentation {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 50px;
  border: 3px solid black;
  height: 300px;
  background: #EFEFEF;
  display: flex;
  justify-content: space-around;
}

.container {
  border: 3px solid #ff00ff;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 45%;
  position: relative;
}

.container>img {
  height: 100%;
  width: 100%;
}

.floatleft {
  float: left;
}

.logo {
  width: 18%;
  margin-top: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

marquee {
  color: #ff00ff;
}

.text-block {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: black;
  color: white;
  height: 90px;
  text-align: center;
  width: 100%;
  opacity: 0;
}

.container:hover .text-block {
  opacity: 0.75;
}

.slider {
  border: 3px solid #ff00ff;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 50%;
  height: 50%;
  overflow: hidden;
  position: relative;
  margin-top: 15px;
}

#img img {
  animation: ani 2s linear;
  width: 100%;
  height: 100%;
}

@keyframes ani {
  0% {
    transform: scale:(1.2);
  }
  10% {
    transform: scale:(1);
  }
  100% {
    transform: scale:(1);
  }
}

.mySlides {
  display: none;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .text {
    font-size: 11px
  }
}

.avis {
  line-height: 14px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
}

input,
select,
textarea {
  border: 1px solid #ff00ff;
}

.left {
  float: left;
}

.icon {
  position: relative;
  left: 10px;
  width: 18%;
  height: 18%;
  width: 50px;
  margin-top: 5px;
  display: block;
  background-color: #ff00ff;
  margin-bottom: 10px;
}

.facebookkk {
  text-align: center;
  background: #ff00ff;
  color: white;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

.tt {
  color: black;
  text-align: center;
}

.separer {
  justify-content: center;
  display: flex;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <header><img src="logo 3.jpg" alt="" class="logo" style="height:80px;width:350px" />
    <marquee>Bienvenue sur le site de l'auto école Berthier</marquee>
    <div class="black">
      <nav>
        <ul>
          <li class="info"><a href="index.php">ACCUEIL</a></li>
          <li class="permis-auto"><a href="auto.html">MOTO</a>
            <ul class="sub-menu" style="background: rgb(255, 0, 255, 0.30)">

              <li class="permis-auto" id="testid" style="text-align:center"><a href="auto.html" style="font-size:20px"><i><b>PERMIS </br>AM</a>
                <ul class="sous-onglet" id="bute" style="position:absolute;left:169px;bottom:80%">
                  <li class="sous-onglet" style="color:green"><a href="infoam.html"><b><i>INFOS</a></li>
                  <li><a href="tarifam.html">TARIFS</a></li>
                  </b>
                  </i>
                </ul>
              </li>

              <li class="permis-auto" id="testid2" style="text-align:center"><a href="125.html" style="font-size:20px">FORMATION 125</a>
                <ul id="bute2" style="position:absolute;left:169px;bottom:59.8%">
                  <li><a href="125info.html">INFOS</a></li>
                  <li><a href="tarif125.html">TARIFS</a></li>
                </ul>

              </li>
              <li class="permis-auto" id="testid3" style="text-align:center"><a href="auto.html" style="font-size:20px">PERMIS</br> A1</a>
                <ul id="bute3" style="position:absolute;left:169px;bottom:40%">
                  <li><a href="a1info.html">INFOS</a></li>
                  <li><a href="a1tarif.html">TARIFS</a></li>
                </ul>

              </li>
              <li class="permis-auto" id="testid4" style="text-align:center"><a href="auto.html" style="font-size:20px">PERMIS </br>A2</a>
                <ul id="bute4" style="position:absolute;left:169px;bottom:20%">
                  <li style="height=20px"><a href="a2info.html">INFOS</a></li>
                  <li style="height=20px"><a href="a2tarif.html">TARIFS</a></li>
                </ul>

              </li>
              <li class="permis-auto" id="testid5" style="text-align:center"><a href="a2versa.html" style="font-size:20px">PASSERELLE </br>A2-A</a>
                <ul id="bute5" style="position:absolute;left:169px;bottom:0;">
                  <li><a href="a2versainfo.html">INFOS</a></li>
                  <li><a href="a2versatarif.html">TARIFS</a></li>
                </ul>

              </li>
            </ul>
          </li>
          </b>
          </i>
          <li class="permis-moto"><a href="auto.html">AUTO</a>
            <ul class="sub-menu" style="background: rgb(255, 0, 255, 0.30)">

              <li class="permis-auto" id="autoid" style="text-align:center"><a href="tarifsauto.html" style="font-size:20px"><b><i>PERMIS</br> B</a>
                <ul id="auto" style="position:absolute;left:169px;bottom:72.7%;">
                  <li><a href="infob.html">INFOS</a></li>
                  <li><a href="tarifsauto.html">TARIFS</a></li>
                </ul>
              </li>
              <li class="permis-auto" id="autoid2" style="text-align:center"><a href="tarifsconduite.html" style="font-size:20px">CONDUITE ACCOMPAGNEE</a>
                <ul id="auto2" style="position:absolute;left:169px;bottom:45.5%">
                  <li><a href="infoconduite.html">INFOS</a></li>
                  <li><a href="tarifsconduite.html">TARIFS</a></li>
                </ul>

              </li>
              <li class="permis-auto" id="autoid3" style="text-align:center"><a href="auto.html" style="font-size:20px">CONDUITE SUPERVISEE</a>
                <ul id="auto3" style="position:absolute;left:169px;bottom:18.3%;">
                  <li><a href="infosupervisee.html">INFOS</a></li>
                  <li><a href="tarifsupervisee.html">TARIFS</a></li>
                </ul>

              </li>
              <li class="permis-auto" style="text-align:center"><a href="perfectionnement.html" style="font-size:18px">PERFECTIONNEMENT</a> </li>
            </ul>
          </li>
          </b>
          </i>
          <li class="permis-remorque"><a href="auto.html"> REMORQUE</a>
            <ul class="sub-menu" style="background: rgb(255, 0, 255, 0.30)">

              <li class="permis-auto" id="remorqueid" style="text-align:center"><a href="auto.html" style="font-size:20px"><b><i>PERMIS </br>BE</a>
                <ul id="remorque" style="position:absolute;left:169px;bottom:50%;">
                  <li><a href="beinfo.html">INFOS</a></li>
                  <li><a href="beinfo.html">TARIFS</a></li>
                </ul>

              </li>
              <li id="remorqueid2" class="permis-auto" style="text-align:center"><a href="b96.html" style="font-size:20px">FORMATION B96</a>
                <ul id="remorque2" style="position:absolute;left:169px;bottom:0;">
                  <li><a href="b96info.html">INFOS</a></li>
                  <li><a href="b96tarifs.html">TARIFS</a></li>
                </ul>
              </li>
            </ul>
          </li>
          </b>
          </i>
          <li class="code"><a href="prestations.html">PRESTATIONS A L'UNITÉ</a>
            <ul class="sub-menu" style="background: rgb(255, 0, 255, 0.30);width:270px;text-align:center">
              <li class="permis-auto"><a href="prestationscode.html" style="font-size:20px"><b><i>CODE</b></i></a>
                <li class="permis-auto"><a href="prestations.html" style="font-size:20px"><b><i>VOITURE</a> </li>
                <li class="permis-auto"><a href="prestationsmoto.html" style="font-size:20px">MOTO</a> </li>
                <li class="permis-auto"><a href="prestationsremorque.html" style="font-size:20px">REMORQUE</a> </li>
                <li class="permis-auto"><a href="prestationspapeterie.html" style="font-size:20px">PAPETERIE</a>

                </li>
                </b>
                </i>
            </ul>
            </li>
          </li>

          <li class="info"><a href="auto.html">COMPOSITION DOSSIER</a>
            <ul class="sub-menu" style="background: rgb(255, 0, 255, 0.30)">

              <li class="permis-auto"><a href="dossiera1a2.html" style="font-size:20px"><b><i>PERMIS A1/A2</a> </li>
              <li class="permis-auto"><a href="permisb.html" style="font-size:20px">PERMIS AUTO</a> </li>
              <li class="permis-auto"><a href="conduiteacc.html" style="font-size:20px">CONDUITE ACCOMPAGNEE</a> </li>
              <li class="permis-auto"><a href="dossierremorque.html" style="font-size:20px">REMORQUE</a>
                <ul style="position:absolute;left:165px;top:70;display:none">
                  <li><a href="#">A</a></li>
                  <li><a href="#">A</a></li>
                  <li><a href="#">A</a></li>

                </ul>
              </li>
              <li class="permis-auto"><a href="dossieraam125.html" style="font-size:20px">A,AM,125cm<sup>3</sup></a> </li>

            </ul>
          </li>
          </b>
          </i>

          <li class="info"><a href="contact.html">NOUS CONTACTER</a></li>
          <li class="info"><a href="auto.html">+ D'INFOS</a>
            <ul class="sub-menu" style="background: rgb(255, 0, 255, 0.30)">

              <li class="permis-auto"><a href="avis.php" style="font-size:20px;text-align:center"><b><i>AVIS</a> </li>
              <li class="permis-auto" style="text-align:center"><a href="horairesbureau.html" style="font-size:20px">HORAIRES BUREAU</a> </li>
              <li class="permis-auto" style="text-align:center"><a href="horairescode.html" style="font-size:20px">HORAIRES CODE</a> </li>
              <li class="permis-auto" style="text-align:center"><a href="pisteauxmotos.html" style="font-size:20px">PISTE AUX MOTOS</a> </li>
              <li class="permis-auto" style="text-align:center"><a href="horairescode.html" style="font-size:20px">PLATEAUX</a> </li>
            </ul>
          </li>
          </b>
          </i>

        </ul>
      </nav>
    </div>
  </header>

Извините, это не отзывчиво и не очень приятно читать.

1 Ответ

0 голосов
/ 24 февраля 2020

Я предоставляю эту ссылку для справки, как вы хотите, чтобы ваш раскрывающийся список был реализован здесь. Ссылка: https://www.w3schools.com/css/css_dropdowns.asp. Я надеюсь, что это поможет вам. enter image description here

Вы можете просто сослаться на этот код и выполнить его в своей локальной системе. 

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
 background-color: #4CAF50;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
 }

 .dropdown {
  position: relative;
  display: inline-block;
  }

 .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  }

 .dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block; 
 }

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
 display: block;
 }

.dropdown:hover .dropbtn {
 background-color: #3e8e41;
 }
 </style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>


<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...