ナビゲーションバーのサブメニューを変更しようとしていますが、それが何であるかを見つけることができました。以下のコードでは、幅を 12em から "auto" に変更してサブメニューを修正するだけです。現在、テキストは背景に重なっています。
element.style {
float: none;
width: 12em;
visibility: hidden;
display: none;
}
メニューを参照する html ファイルは次のとおりです。
<div class="menu-box">
<div id="menu-bar" class="nav clearfix">
<nav id="block-superfish-1" class="block block-superfish block-odd block-count-2 block-region-menu-bar menu-wrapper clearfix clearfix" role="navigation">
<h2 class="block-title element-invisible element-invisible">Main menu</h2>
<ul id="superfish-1" class="sf-menu main-menu sf-horizontal sf-style-none sf-total-items-5 sf-parent-items-4 sf-single-items-1 main menu sf-js-enabled sf-shadow">
<li id="menu-218-1" class="first odd sf-item-1 sf-depth-1 main menu list sf-total-children-1 sf-parent-children-0 sf-single-children-1 menuparent">
<a class="sf-depth-1 menuparent" href="/">Home</a>
<ul style="float: none; width: 12em; display: none; visibility: hidden;">
</li>
<li id="menu-409-1" class="middle even sf-item-2 sf-depth-1 main menu list sf-total-children-2 sf-parent-children-0 sf-single-children-2 menuparent">
<a class="sf-depth-1 menuparent" href="/%3Cnolink%3E">What's exciting us</a>
<ul style="float: none; width: 12em; visibility: hidden; display: none;">
<li id="menu-411-1" class="first odd sf-item-1 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/around-the-globe" style="float: none; width: auto;">Innovative ideas from around the globe</a>
</li>
<li id="menu-410-1" class="last even sf-item-2 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/showcased-ideas" style="float: none; width: auto;">Showcased ideas from within the community</a>
</li>
</ul>
</li>
<li id="menu-412-1" class="middle odd sf-item-3 sf-depth-1 main menu list sf-total-children-3 sf-parent-children-0 sf-single-children-3 menuparent">
<a class="sf-depth-1 menuparent" title="" href="/%3Cnolink%3E">Shared insight</a>
<ul style="float: none; width: 12em; visibility: hidden; display: none;">
<li id="menu-413-1" class="first odd sf-item-1 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/expert-panel" style="float: none; width: auto;">Expert Panel</a>
</li>
<li id="menu-414-1" class="middle even sf-item-2 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/investment-community" style="float: none; width: auto;">Investment Community</a>
</li>
<li id="menu-415-1" class="last odd sf-item-3 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " title="" href="/thought-leaders" style="float: none; width: auto;">Thought Leaders</a>
</li>
</ul>
</li>
<li id="menu-420-1" class="middle even sf-item-4 sf-depth-1 main menu list sf-total-children-3 sf-parent-children-0 sf-single-children-3 menuparent">
<a class="sf-depth-1 menuparent" href="/%3Cnolink%3E">Interact</a>
<ul style="float: none; width: 12em; visibility: hidden; display: none;">
<li id="menu-421-1" class="first odd sf-item-1 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<li id="menu-758-1" class="middle even sf-item-2 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<li id="menu-422-1" class="last odd sf-item-3 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
</ul>
</li>
<li id="menu-312-1" class="last odd sf-item-5 sf-depth-1 main menu list sf-no-children">
</ul>
</nav>
</div>
</div>
どのスタイルシートとどの行を編集すればよいかわかりません。
ところで、私は Drupal 7 と superfish モジュールを使用しています。