html - 如何格式化子菜单，使其横跨屏幕

Question

我正在努力使我的菜单格式正确。目前顶部菜单的子菜单是垂直的，我希望它看起来更像 gooddata.com .

站点是jobcreatr.com ，并且我正在尝试使网站的骨架看起来像 gooddata.com。

我的HTML如下:

<ul id="superfish-2" class="menu sf-menu sf-main-menu sf-horizontal sf-style-whiteshadow sf-total-items-3 sf-parent-items-1 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow">
<li id="menu-1299-2" class="first odd sf-item-1 sf-depth-1 sf-no-children">
<a class="sf-depth-1" title="" href="http://jobcreatr.com/activity">Activity Feed</a>
</li>
<li id="menu-1300-2" class="middle even sf-item-2 sf-depth-1 sf-no-children">
<a class="sf-depth-1" title="" href="http://jobcreatr.com/course-categories">Course Categories</a>
</li>
<li id="menu-1301-2" class="last odd sf-item-3 sf-depth-1 sf-total-children-6 sf-parent-children-0 sf-single-children-6 menuparent">
<a class="sf-depth-1 menuparent sf-with-ul" title="" href="http://jobcreatr.com/products">
My Courses
<span class="sf-sub-indicator"> »</span>
</a>
<ul class="sf-hidden" style="float: none; width: 12.6429em; display: block;">
<li id="menu-2170-2" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/business" style="float: none; width: auto;">Business</a>
</li>
<li id="menu-2171-2" class="middle even sf-item-2 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/computers" style="float: none; width: auto;">Computers</a>
</li>
<li id="menu-2172-2" class="middle odd sf-item-3 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/education" style="float: none; width: auto;">Education</a>
</li>
<li id="menu-2173-2" class="middle even sf-item-4 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/health" style="float: none; width: auto;">Health & Fitness</a>
</li>
<li id="menu-2174-2" class="middle odd sf-item-5 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/labor" style="float: none; width: auto;">Labor</a>
</li>
<li id="menu-2175-2" class="last even sf-item-6 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/other" style="float: none; width: auto;">Other</a>
</li>
</ul>
</li>
</ul>

我已经尝试将 CSS 设置为在标签和

标签上内联，但由于某种原因，菜单始终保持垂直。

这是我的 CSS:

.sf-menu.sf-horizontal.sf-shadow ul, .sf-menu.sf-vertical.sf-shadow ul, .sf-menu.sf-navbar.sf-shadow ul ul {
width: 100% !important;
background-color: #F6F6F6;
background: none;
    list-style-type: none;
    text-align: center;
    margin-top:22px;
    overflow: none;
}

.sf-menu.sf-horizontal.sf-shadow ul a, .sf-menu.sf-vertical.sf-shadow ul a, .sf-menu.sf-navbar.sf-shadow ul ul a {
/*width: 100%!important;*/
position: relative;
left: 0;
display: inline-block;
}

.sf-menu.sf-style-whiteshadow li {
overflow: visible;
}

应该改变什么？是否保持较小的宽度，以使其无法扩展到页面的整个宽度？

Answer 1

你的子导航<ul class="sf-hidden">相对于它的父级绝对定位 <li> .

在 superfish CSS 中它有:

.sf-menu li {
  float: left;
  position: relative;
  z-index: 498;
}

您需要覆盖该“相对”定位。如果您有权访问该 css 文件，请更改 position: relative至 position: static .如果不是，请使用更具体的选择器覆盖它:

.content .sf-menu li {
  position: static; 
}