HTML Выпадающее Меню: Только выбранное меню

-1

Здравствуйте штабелеры,HTML Выпадающее Меню: Только выбранное меню

Я чувствую себя очень noobish прямо сейчас, но я не могу показаться, чтобы получить право «выпадающий» под кнопкой. Когда я наводил курсор на кнопку «ОДИН», я хочу, чтобы там отображалось правильное раскрывающееся меню. Тем не менее, они все появляются при парящих. Я не могу предоставить HTML, поскольку он использует CONTAO Cms.

CSS-

#header nav.mod_navigation.main ul.level_2 li a:hover { 
    background-color:#f9f301; 
    color:#ffffff; 
} 

#header nav.mod_navigation.main ul.level_2 li a { 
    background:#ffffff !important; 
    color:#000000 !important; 
    width:100%; 
    border-radius:0px; 
    margin-right:0px !important; 
} 

#header nav.mod_navigation.main ul.level_2 li { 
    background-color:#ffffff !important; 
    color:#000000 !important; 
    width:100%; 
    border-bottom:1px dashed #000000; 
    border-radius:0px; 
    padding:0px; 
} 

#header nav.mod_navigation.main > ul:hover .level_2 { 
    display:block; 
} 

#header nav.mod_navigation.main ul.level_2 { 
    top:170px; 
     position:absolute; 
     overflow:visible; 
     display:none; 
     margin:0; 
     padding:0; 
     background-color:#fff; 
     z-index:1000; 
    max-width:170px; 
}

HTML

Для HTML вы можете посетить JSFiddle, так как это довольно долго: https://jsfiddle.net/p9y21cee/

Что я делаю неправильно?

источник

2016-08-18 Pascal Boschma

Не могли бы вы также поделиться своей структурой HTML? – Roberrrt

@ Roberrrt Я обновил свой пост –

Ах да, но это не точный HTML-код? Кажется, что много классов, а идентификатор #header отсутствует. – Roberrrt

Изменить это:

#header nav.mod_navigation.main > ul:hover .level_2 {}

к:

#header nav.mod_navigation.main li:hover .level_2 {}

#header nav.mod_navigation.main ul.level_2 li a:hover { 
 
    background-color:#f9f301; 
 
    color:#ffffff; 
 
} 
 

 
#header nav.mod_navigation.main ul.level_2 li a { 
 
    background:#ffffff !important; 
 
    color:#000000 !important; 
 
    width:100%; 
 
    border-radius:0px; 
 
    margin-right:0px !important; 
 
} 
 

 
#header nav.mod_navigation.main ul.level_2 li { 
 
    background-color:#ffffff !important; 
 
    color:#000000 !important; 
 
    width:100%; 
 
    border-bottom:1px dashed #000000; 
 
    border-radius:0px; 
 
    padding:0px; 
 
} 
 

 
#header nav.mod_navigation.main li:hover .level_2 { 
 
    display:block; 
 
} 
 

 
#header nav.mod_navigation.main ul.level_2 { 
 
    top:170px; 
 
     position:absolute; 
 
     overflow:visible; 
 
     display:none; 
 
     margin:0; 
 
     padding:0; 
 
     background-color:#fff; 
 
     z-index:1000; 
 
    max-width:170px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <header id="header"> 
 
     <div class="inside"> 
 
      <div class="kopfleiste"> 
 
       <h1 class="logo"><a href= 
 
       ""><img alt= 
 
       "" src= 
 
       ""></a></h1> 
 
       
 
      </div> 
 
      <div class="open-close" id="btnmenu"> 
 
       Menü 
 
      </div> 
 
      <div id="mobile-navi" style="display: none;"> 
 
       <!-- indexer::stop --> 
 
       <nav class="mod_navigation block"> 
 
        <a class="invisible" href= 
 
        "privat-gewerblich.html#skipNavigation15">Navigation 
 
        überspringen</a> 
 
        <ul class="level_1" role="menubar"> 
 
         <li class="first"> 
 
          <a class="first" href="home-17.html" role= 
 
          "menuitem" title="">Home</a> 
 
         </li> 
 
         <li> 
 
          <a href="elektrotechnik.html" role="menuitem" 
 
          title="Leistungen">Leistungen</a> 
 
         </li> 
 
         <li class="submenu trail"> 
 
          <a aria-haspopup="true" class="submenu trail" href= 
 
          "industrieelektrik.html" role="menuitem" title= 
 
          "Referenzen">Referenzen</a> 
 
          <ul class="level_2" role="menu"> 
 
           <li class="sibling first"> 
 
            <a class="sibling first" href= 
 
            "industrieelektrik.html" role="menuitem" 
 
            title= 
 
            "Industrieelektrik">Industrieelektrik</a> 
 
           </li> 
 
           <li class="active"><span class="active" role= 
 
           "menuitem">Privat/Gewerblich</span></li> 
 
           <li class="sibling last"> 
 
            <a class="sibling last" href= 
 
            "marktanschluesse.html" role="menuitem" 
 
            title="Marktanschlüsse">Marktanschlüsse</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
         <li> 
 
          <a href="ueber-uns-20.html" role="menuitem" title= 
 
          "Über Uns">Über Uns</a> 
 
         </li> 
 
         <li> 
 
          <a href="downloads.html" role="menuitem" title= 
 
          "Downloads">Downloads</a> 
 
         </li> 
 
         <li> 
 
          <a href="21.html" role="menuitem" title= 
 
          "Kontakt">Kontakt</a> 
 
         </li> 
 
         <li class="last"> 
 
          <a class="last" href="jobs-24.html" role="menuitem" 
 
          title="Jobs">Jobs</a> 
 
         </li> 
 
        </ul><a class="invisible" id="skipNavigation15">&nbsp;</a> 
 
       </nav><!-- indexer::continue --> 
 
      </div><!-- indexer::stop --> 
 
      <nav class="mod_navigation main block"> 
 
       <a class="invisible" href= 
 
       "privat-gewerblich.html#skipNavigation14">Navigation 
 
       überspringen</a> 
 
       <ul class="level_1" role="menubar"> 
 
        <li class="first"> 
 
         <a class="first" href="home-17.html" role="menuitem" 
 
         title="">Home</a> 
 
        </li> 
 
        <li class="submenu"> 
 
         <a aria-haspopup="true" class="submenu" href= 
 
         "elektrotechnik.html" role="menuitem" title= 
 
         "Leistungen">Leistungen</a> 
 
         <ul class="level_2" role="menu"> 
 
          <li class="first"> 
 
           <a class="first" href="elektrotechnik.html" 
 
           role="menuitem" title= 
 
           "Elektrotechnik">Elektrotechnik</a> 
 
          </li> 
 
          <li> 
 
           <a href="industrieservice.html" role="menuitem" 
 
           title="Industrieservice">Industrieservice</a> 
 
          </li> 
 
          <li> 
 
           <a href="photovoltaik.html" role="menuitem" 
 
           title="Photovoltaik">Photovoltaik</a> 
 
          </li> 
 
          <li> 
 
           <a href="waermepumpen.html" role="menuitem" 
 
           title="Wärmepumpen">Wärmepumpen</a> 
 
          </li> 
 
          <li> 
 
           <a href="marktanschluesse-32.html" role= 
 
           "menuitem" title= 
 
           "Marktanschlüsse">Marktanschlüsse</a> 
 
          </li> 
 
          <li> 
 
           <a href="service.html" role="menuitem" title= 
 
           "Service">Service</a> 
 
          </li> 
 
          <li> 
 
           <a href="planungsbuero.html" role="menuitem" 
 
           title="Planungsbüro">Planungsbüro</a> 
 
          </li> 
 
          <li class="last"> 
 
           <a class="last" href="vermietung.html" role= 
 
           "menuitem" title="Vermietung">Vermietung</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li class="submenu trail"> 
 
         <a aria-haspopup="true" class="submenu trail" href= 
 
         "industrieelektrik.html" role="menuitem" title= 
 
         "Referenzen">Referenzen</a> 
 
         <ul class="level_2" role="menu"> 
 
          <li class="sibling first"> 
 
           <a class="sibling first" href= 
 
           "industrieelektrik.html" role="menuitem" title= 
 
           "Industrieelektrik">Industrieelektrik</a> 
 
          </li> 
 
          <li class="active"><span class="active" role= 
 
          "menuitem">Privat/Gewerblich</span></li> 
 
          <li class="sibling last"> 
 
           <a class="sibling last" href= 
 
           "marktanschluesse.html" role="menuitem" title= 
 
           "Marktanschlüsse">Marktanschlüsse</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="ueber-uns-20.html" role="menuitem" title= 
 
         "Über Uns">Über Uns</a> 
 
        </li> 
 
        <li> 
 
         <a href="downloads.html" role="menuitem" title= 
 
         "Downloads">Downloads</a> 
 
        </li> 
 
        <li> 
 
         <a href="21.html" role="menuitem" title= 
 
         "Kontakt">Kontakt</a> 
 
        </li> 
 
        <li class="last"> 
 
         <a class="last" href="jobs-24.html" role="menuitem" 
 
         title="Jobs">Jobs</a> 
 
        </li> 
 
       </ul><a class="invisible" id="skipNavigation14">&nbsp;</a> 
 
      </nav><!-- indexer::continue --> 
 
      <div class="mod_article first last block" id="article-56"> 
 
       <div class= 
 
       "mod_rocksolid_slider first last block rsts-main rsts-direction-x rsts-type-slide rsts-skin-light rsts-no-touch" 
 
       style=""> 
 
        <div class="rsts-view" style=""> 
 
         <div class="rsts-crop" style= 
 
         "width: 1000px; height: 440px; transform: translateZ(0px);"> 
 
         <div class="rsts-slides" style= 
 
         "transform: translate3d(0px, 0px, 0px);"> 
 
           <div class= 
 
           "rsts-slide rsts-slide-image rsts-active" 
 
           style="width: 1000px; transform: translate3d(0px, 0px, 0px); top: 0px;"> 
 
           <div data-rsts-type="image"><img alt="" 
 
            height="440" src= 
 
            "" 
 
            style= 
 
            "display: block; width: 1000px; height: 440px; min-width: 0px; min-height: 0px; max-width: none; max-height: none; margin-top: 0px; margin-left: 0px;" 
 
            width="1000"></div> 
 
           </div> 
 
          </div> 
 
         </div><a class="rsts-prev" href="" style= 
 
         "display: none;">prev</a><a class="rsts-next" href="" 
 
         style="display: none;">next</a> 
 
        </div> 
 
       </div> 
 
       <div id="shadow" style="clear:both;"><img src= 
 
       "files/Theessen/Basic/Shadow-Slider.png"></div> 
 
       <script> 
 
       (function($){var slider=$('.mod_rocksolid_slider').last();slider.find('video[data-rsts-background],[data-rsts-type=video]video').each(function(){this.player=false;});slider.rstSlider({"type":"slide","skin":"light","width":"css","height":"css","navType":"none","scaleMode":"fit","imagePosition":"center","random":false,"loop":false,"videoAutoplay":false,"autoplayProgress":true,"pauseAutoplayOnHover":false,"keyboard":true,"captions":true,"controls":true,"combineNavItems":true,"gapSize":"0%"});$(function(){if (!$.fn.colorbox){return;}var lightboxConfig={loop: false,rel: function(){return $(this).attr('data-lightbox');},maxWidth: '95%',maxHeight: '95%'};var update=function(links){links.colorbox(lightboxConfig);};slider.on('rsts-slidestop',function(event){update(slider.find('a[data-lightbox]'));});update(slider.find('a[data-lightbox]'));});})(jQuery); 
 
       </script> 
 
      </div> 
 
     </div> 
 
    </header> 
 
</body> 
 
</html>

Что вы меня было: показать уровень 2 при наведении главного ул, что вы хотели is: show level 2, когда li внутри главной ul зависает.

источник

2016-08-18 11:42:33

HTML Выпадающее Меню: Только выбранное меню

ответ

Смежные вопросы