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