Horizontales Untermenü

-3

Ich möchte ein horizontales Untermenü erstellen. Jetzt habe ich nur ein Untermenü erstellt. Ich habe folgende CSS-und HTML-Code, siehe Demo:Horizontales Untermenü

Können Sie mir helfen, meinen Code zu verbessern? Vielen Dank.

HTML

<ul id="menu-main-menu" class="top_big_menu"><li id="menu-item-4192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4192"><a href="#">Home</a></li> 
<li id="menu-item-4159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4159"><a href="#">Football</a><ul> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Interviews</a></li> 
     <li><a href="#">Comments</a></li> 
     </ul></li> 
<li id="menu-item-4160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4160"><a href="#">Football 2</a><ul> 
     <li><a href="#">News 2</a></li> 
     <li><a href="#">Interviews 2</a></li> 
     </ul></li> 
<li id="menu-item-4161" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-4161"><a href="#">Football 3</a><ul> 
     <li><a href="http://www.example.com/child1.com">News 3</a></li> 
     <li><a href="http://www.example.com/child2.com">Interviews 3</a></li> 
     </ul></li> 
<li id="menu-item-4190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4190"><a href="#">Menu 4</a></li> 
<li id="menu-item-4189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4189"><a href="#">Menu 5</a></li> 
</ul>

CSS

.top_big_menu li{ 
    display: inline-block; 
    float: none; 
    position: relative; 
    bottom: -10px; 
    float: left; 
    margin-left:1px; 
} 

.top_big_menu li a{ 
    font-family: 'Calibri',sans-serif; 
    font-weight: bold; 
    font-size: 20px; 
    color: #212121; 
    text-transform: uppercase; 
    display: block; 
    padding-left: 20px; 
    padding-right: 20px; 
    line-height: 50px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 

.top_big_menu li a:hover{ 
    background-color: #E31E24; 
    color: #fff; 
    text-decoration: none; 
} 

.top_big_menu .current-menu-item a, .top_big_menu .current_page_item a{ 
    background-color: #E31E24; 
    color: #fff; 
} 

.top_big_menu li ul{ 
display: none; 
position:absolute; 
z-index:2; 
padding-bottom:13px; 
} 

.top_big_menu li:hover ul{ display:inline; 
color:white; 
background:#E31E24; 
height:auto; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; }

https://jsfiddle.net/mart01/8vbnhxx0/

Quelle

2016-07-29 martyyyy

Mögliche Duplikate von [Horizontale CSS-Menüfrage] (http://stackoverflow.com/questions/5318393/horizontal-css-menu-question) –

Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu kodieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

#menu-main-menu{ 
position: relative; 
}

Wenden Sie den obigen Code statt dessen linkposition:relative-.top_big_menu li{} überprüfen Anwendung.

Quelle

2016-07-29 10:53:10

hey füge den obigen Stil in dein stysheet ein und entferne 'position: relative' von' .top_big_menu li {} ' –

Danke, du hast mir sehr geholfen. – martyyyy

-2

Beispiel Fiddle vertikale und horizontale Menüs. In Ihrem Beispiel müssen Sie die direkte Stilvererbung verwenden und Folgendes verwenden: Von dort und nicht von den Links on this fiddle.

.menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
} 
 

 
.sub-menu { 
 
    display: none; 
 
    /* position: absolute; */ 
 
    top: 100%; 
 
    background-color: green; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sub-menu > li { 
 
    position: relative; 
 
} 
 

 
.sub-menu > li > a { 
 
    display: block; 
 
    padding: 5px 10px; 
 
} 
 

 
.menu > li { 
 
    /* position: relative; */ 
 
    padding: 5px; 
 
} 
 

 
.menu li:hover > .sub-menu { 
 
    display: block; 
 
} 
 

 
.menu > li > a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 5px 10px; 
 
    background-color: tomato; 
 
} 
 

 
.sub-menu .sub-menu { 
 
    padding-left: 20px; 
 
    left: 100%; 
 
    top: 0; 
 
    min-width: 120px; 
 
} 
 

 
.menu-inline > li { 
 
    display: inline-block; 
 
} 
 

 
.menu-inline .sub-menu { 
 
    position: absolute; 
 
} 
 

 
.menu-inline .sub-menu .sub-menu { 
 
    padding-left: 0; 
 
}

<ul class="menu"> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li> 
 
     <a href="#">sub-menu-link</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">sub-menu-link</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 

 

 

 

 
<ul class="menu menu-inline"> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li> 
 
     <a href="#">sub-menu-link</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">sub-menu-link</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 

 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Quelle

2016-07-29 10:47:56

Antwort

Verwandte Themen