2016-07-29 22 views
-3

水平サブメニューを作成したいと思います。 Hovewerになったので、私はdopdownサブメニューだけを作成しました。私は以下のCSSとHTMLコードを持っています。デモをご覧ください。水平サブメニュー

コードを改善する助けになることはありますか?ありがとうございました。

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/

+0

[Horizo​​ntal css menu question]の複製があります。(0120-755-501) –

+0

少なくともこれを自分でコード化しようとしています。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします(http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

答えて

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

上記のコードの代わりに、position:relative.top_big_menu li{}にチェックこのlinkの適用を適用します。

+0

あなたのスティッチシートに上記のスタイルを追加し、 '.top_big_menu li {}'から 'position:relative'を削除してください。 –

+0

ありがとうございました。 – martyyyy

-2

Fiddle垂直方向と水平方向のメニュー。あなたの例では、ダイレクトスタイルの継承と使用を使用する必要があります。そこからホバーし、リンク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>