0

表示と位置のさまざまな設定を試しましたが、将来のドロップダウンメニューでサブアイテムを配置する方法がわかりません。それらは他のメニュー項目と重なり、本来あるべき場所にとどまりません。残念ながら、この質問 + 回答でも役に立ちませんでした。

これは私のCSSコードです:

#menu ul li a {
text-decoration: none;
background-color: #FF0000;
font-size: 16px;
margin: 10px 5px 10px 5px;
display: block;
float: left;
position:relative; }

#menu ul li a:hover {
background-color: #0000FF; }

#menu ul li ul li a {
clear: left;
background-color: #6F0;
font-size: 10px;
display: block;
position: absolute; }

これらのような組み合わせセレクターを試しました

#menu ul li a + #menu ul li ul li a { }

li.page_item > li.page_item { }

しかし、それらも機能しませんでした。

編集: ここにいくつかの HTML/PHP コードがあります。これはワードプレスのテンプレートです。以前に言及するべきだったと思います...

            <div id="menu" role="navigation">
            <?php /* Navigation menu. */ ?>
            <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class',
                                    'container_id' => 'main-menu-id', 'theme_location'  => 'header', 'show_home' => true)); ?>
        </div> <!-- menu -->

レンダリングされた HTML コードは次のとおりです。

<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://mywebsite.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
<a href="http://mywebsite.com/wordpress/?page_id=40">Cupcake Ipsum</a>
<ul class="children">
<li class="page_item page-item-388">
<a href="http://mywebsite.com/wordpress/?page_id=388">Red Velvet Cupcake</a>
</li>
<li class="page_item page-item-390">
<a href="http://mywebsite.com/wordpress/?page_id=390">Mango Cupcake</a>
</li>
<li class="page_item page-item-392">
<a href="http://mywebsite.com/wordpress/?page_id=392">Chocolate Cupcake</a>
</li>
</ul>
</li>
<li class="page_item page-item-43">
<a href="http://mywebsite.com/wordpress/?page_id=43">Bacon Ipsum</a>
<ul class="children">
<li class="page_item page-item-405">
<a href="http://mywebsite.com/wordpress/?page_id=405">Bacon Pancakes</a>
</li>
</ul>
</li>
<li class="page_item page-item-45">
<a href="http://mywebsite.com/wordpress/?page_id=45">Veggie Ipsum</a>
<ul class="children">
<li class="page_item page-item-397">
<a href="http://mywebsite.com/wordpress/?page_id=397">Tomato</a>
</li>
<li class="page_item page-item-399">
<a href="http://mywebsite.com/wordpress/?page_id=399">Lettuce</a>
</li>
<li class="page_item page-item-401">
<a href="http://mywebsite.com/wordpress/?page_id=401">Broccoli</a>
</li>
<li class="page_item page-item-403">
<a href="http://mywebsite.com/wordpress/?page_id=403">Onion</a>
</li>
</ul>
</li>
</ul> 
</div>
</div>
4

2 に答える 2

0

要素に絶対配置を与える場合

position: absolute;

ページのどこに表示するかを明示的に指定するまで、どこに移動すればよいかわかりません。

あなたが望むようになるまで、このフィドルを変更してください：http://jsfiddle.net/hillsons/LUqpM/

于 2012-10-16T21:55:58.633 に答える