按钮悬停时菜单不显示

时间：2017-07-20 07:00:41

标签： html css

我的菜单有问题。当我使用悬停在我的按钮上时，我希望该菜单显示，但它不起作用。我尝试了一切。我甚至无法在悬停时更改菜单的颜色。我认为这是CSS的问题。

＆＃13;
＆＃13; 
.menurozwijane {
  font-size: 12px;
  height: 300px;
  position: absolute;
  width: 100%;
  top: 8%;
  background: #f6f6f6;
  left: 0;
  z-index: -1;
  display: none;
}

.przycisk {
  position: relative;
}

.przycisk:hover .menurozwijane {
  display: block
}

.menurozwijane ul {
  position: absolute;
  left: 6%;
  top: 15%;
  width: 100%;
  display: block;
}

.menurozwijane li {
  width: 17%;
  float: left;
  height: 20px;
  font-size: 15px;
  line-height: 14px;
  padding-top: 20px;
  text-align: left;
}

.ikonam {
  font-family: 'icons';
  font-size: 50px;
  line-height: 20px;
  color: #da9057;
  margin-right: 5%;
  float: left;
}
＆＃13; 
<nav>
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
    <li class="przycisk"><a href="#">Oferta</a></li>
    <li><a href="#">Realizacje</a></li>
    <li><a href="#">Kontakt</a></li>
    <li id="pomoc">?</li>
    <li id="facebook">0</li>
  </ul>
  <div id="myDropdown" class="menurozwijane">
    <ul>
      <li></li>
      <li>
        <div class="ikonam">c</div>Elektryczne</li>
      <li>
        <div class="ikonam">f</div>Kamery</li>
      <li>
        <div class="ikonam">i</div>Inteligentny dom</li>
      <li>
        <div class="ikonam">l</div>Systemy<br/> nagłośnienia</li>
      <li>
        <div class="ikonam">a</div>Przeciwpożarowe</li>
      <li>
        <div class="ikonam">d</div>Kontroli dostępu<br/> i rejestracji czasu pracy</li>
      <li>
        <div class="ikonam">g</div>Alarmowe</li>
      <li>
        <div class="ikonam">j</div>Instalacje SZR</li>
      <li>
        <div class="ikonam">m</div>Odgromowe</li>
      <li>
        <div class="ikonam">b</div>Klimatyzacja</li>
      <li>
        <div class="ikonam">e</div>Instacje światłowodowe</li>
      <li>
        <div class="ikonam">f</div>Domofonowe</li>
      <li>
        <div class="ikonam">k</div>Instalacje TV</li>
      <li></li>
    </ul>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您需要更改下拉菜单 menurozwijane 的位置才能让选择器正常工作

将其移至 przycisk

内

请参阅代码段：

＆＃13;
＆＃13; 
.menurozwijane {
  font-size: 12px;
  height: 300px;
  position: absolute;
  width: 100%;
  top: 8%;
  background: #f6f6f6;
  left: 0;
  z-index: -1;
  display: none;
}

.przycisk {
  position: relative;
}

.przycisk:hover .menurozwijane {
  display: block
}

.menurozwijane ul {
  position: absolute;
  left: 6%;
  top: 15%;
  width: 100%;
  display: block;
}

.menurozwijane li {
  width: 17%;
  float: left;
  height: 20px;
  font-size: 15px;
  line-height: 14px;
  padding-top: 20px;
  text-align: left;
}

.ikonam {
  font-family: 'icons';
  font-size: 50px;
  line-height: 20px;
  color: #da9057;
  margin-right: 5%;
  float: left;
}
＆＃13; 
<nav>
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
    <li class="przycisk">
      <a href="#">Oferta</a>
      <div id="myDropdown" class="menurozwijane">
        <ul>

          <li>
            <div class="ikonam">c</div>Elektryczne</li>
          <li>
            <div class="ikonam">f</div>Kamery</li>
          <li>
            <div class="ikonam">i</div>Inteligentny dom</li>
          <li>
            <div class="ikonam">l</div>Systemy<br/> nagłośnienia</li>
          <li>
            <div class="ikonam">a</div>Przeciwpożarowe</li>
          <li>
            <div class="ikonam">d</div>Kontroli dostępu<br/> i rejestracji czasu pracy</li>
          <li>
            <div class="ikonam">g</div>Alarmowe</li>
          <li>
            <div class="ikonam">j</div>Instalacje SZR</li>
          <li>
            <div class="ikonam">m</div>Odgromowe</li>
          <li>
            <div class="ikonam">b</div>Klimatyzacja</li>
          <li>
            <div class="ikonam">e</div>Instacje światłowodowe</li>
          <li>
            <div class="ikonam">f</div>Domofonowe</li>
          <li>
            <div class="ikonam">k</div>Instalacje TV</li>
          <li></li>
        </ul>
    </li>
    <li><a href="#">Realizacje</a></li>
    <li><a href="#">Kontakt</a></li>
    <li id="pomoc">?</li>
    <li id="facebook">0</li>
  </ul>

  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

<强>的CSS： 使用+选择器：

.przycisk:hover  + .menurozwijane {
  display: block
}

<强> HTML：

像这样更改地点.menurozwijane：

<li class="przycisk"><a href="#">Oferta</a></li>
<div id="myDropdown" class="menurozwijane">
    <ul>
    <li></li>
    <li><div class="ikonam">c</div>Elektryczne</li>
    <li><div class="ikonam">f</div>Kamery</li>
    <li><div class="ikonam">i</div>Inteligentny dom</li>
    <li><div class="ikonam">l</div>Systemy<br/> nagłośnienia</li>
    <li><div class="ikonam">a</div>Przeciwpożarowe</li>
    <li><div class="ikonam">d</div>Kontroli dostępu<br/> i rejestracji czasu pracy</li>
    <li><div class="ikonam">g</div>Alarmowe</li>
    <li><div class="ikonam">j</div>Instalacje SZR</li>
    <li><div class="ikonam">m</div>Odgromowe</li>
    <li><div class="ikonam">b</div>Klimatyzacja</li>
    <li><div class="ikonam">e</div>Instacje światłowodowe</li>
    <li><div class="ikonam">f</div>Domofonowe</li>
    <li><div class="ikonam">k</div>Instalacje TV</li>
    <li></li>
  </ul>
  </div>

＆＃13;
＆＃13; 
 .menurozwijane {
  font-size: 12px;
  height: 300px;
  position: absolute;
  width: 100%;
  top: 8%;
  background: #f6f6f6;
  left: 0;
  z-index: -1;
  display: none;
}

.przycisk {
  position: relative;
}

.przycisk:hover  + .menurozwijane {
  display: block
}

.menurozwijane ul {
  position: absolute;
  left: 6%;
  top: 15%;
  width: 100%;
  display: block;
}

.menurozwijane li {
  width: 17%;
  float: left;
  height: 20px;
  font-size: 15px;
  line-height: 14px;
  padding-top: 20px;
  text-align: left;
}

.ikonam {
  font-family: 'icons';
  font-size: 50px;
  line-height: 20px;
  color: #da9057;
  margin-right: 5%;
  float: left;
}
＆＃13; 
 <nav>
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
  <li class="przycisk"><a href="#">Oferta</a></li>
  <div id="myDropdown" class="menurozwijane">
    <ul>
    <li></li>
    <li><div class="ikonam">c</div>Elektryczne</li>
    <li><div class="ikonam">f</div>Kamery</li>
    <li><div class="ikonam">i</div>Inteligentny dom</li>
    <li><div class="ikonam">l</div>Systemy<br/> nagłośnienia</li>
    <li><div class="ikonam">a</div>Przeciwpożarowe</li>
    <li><div class="ikonam">d</div>Kontroli dostępu<br/> i rejestracji czasu pracy</li>
    <li><div class="ikonam">g</div>Alarmowe</li>
    <li><div class="ikonam">j</div>Instalacje SZR</li>
    <li><div class="ikonam">m</div>Odgromowe</li>
    <li><div class="ikonam">b</div>Klimatyzacja</li>
    <li><div class="ikonam">e</div>Instacje światłowodowe</li>
    <li><div class="ikonam">f</div>Domofonowe</li>
    <li><div class="ikonam">k</div>Instalacje TV</li>
    <li></li>
  </ul>
  </div>
    <li><a href="#">Realizacje</a></li>
    <li><a href="#">Kontakt</a></li>
    <li id="pomoc">?</li>
    <li id="facebook">0</li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题