0

私はホストされたブログを持っていて、テンプレートを変更していますが、サブメニューをナビゲーション バーに追加するためのコードは、次の素晴らしいチュートリアルからそのまま引用しています。

http://www.devinrolsen.com/pure-css-horizo​​ntal-menu/

Stackoverflow http://bit.ly/16KQN0Mの質問に対するこの回答も読みました

しかし、フロートをクリアすることが問題である場合、HTML のどこに配置すればよいかわかりません"clear: both;"(少なくとも、私が試したことはありません)。

また、に変更#dropnav li liしdisplay: block;ても機能しません。私が見逃しているものがあるに違いない...

ここにCSSがあります。上部のクラスはテンプレートに関連していますが、関連する可能性があるためそのままにしておきます。

<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */


#pagebody { position: inherit !important; width: 100%; } 
#pagebody-inner { position: inherit !important; width: 100%; } 

#alpha, #beta, #gamma, #delta {
    display: inline; 
    position: inherit !important; 
    float: left; 
    min-height: 0px; 
}

#dropnav 
{height:31px;} 

#dropnav ul
{margin:0px; padding:0px;}

#dropnav ul li
{display:inline; float:left; list-style:none; position: relative; height:31px; 
width: 175px; } 

#dropnav li a
{color:#efe1ca; font-family:'Roboto Condensed', sans-serif; font-weight:400;      
font-size:12px; }


#dropnav li a:hover
{color:#fff; text-decoration: none;}

#dropnav li ul
{margin: 0px; padding: 0px; display: none; position: absolute;  z-index: 99; top: 
31px; background-color: #f6f3cb; width: 250px;} 

#dropnav li:hover ul
{display:block; width:250px; } 

#dropnav li li
{list-style:none; display:list-item; font-size:100%;} 

#dropnav li li a
{color: #7a3535; text-decoration:underline; width: 250px; font-size: 16px; } 

#dropnav li li a:hover
{color:#000000; text-decoration:none; } 

li#main {padding: 0px;} /* Sets the padding of items in the main menu */

</style>

そして、タイトルが削除された HTML マークアップ:

<div id="main">
<div id="dropnav">
<ul>

<li class="nav-list-item"><a href="">-------</a>
  <ul id="subnav">
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</a></li>
  </ul> 
</li>

<li class="nav-list-item"><a href="">-------</a>
  <ul id="subnav">
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</li>
  </ul> 
</li>

</ul> 
</div>
</div>
4

0 に答える 0