如何格式化子菜单,使其在屏幕上延伸

时间:2014-03-10 03:46:13

标签: html css

我正在尝试正确格式化菜单。目前顶级菜单子菜单是垂直的,我更喜欢它看起来更像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>

我已尝试将CS​​S设置为内嵌于标记和

  • 标记,但由于某种原因,菜单始终保持垂直。

    这是我的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;
    }
    

    应该改变什么?有什么东西保持宽度小,以便它不能扩展到页面的整个宽度?

  • 3 个答案:

    答案 0 :(得分:0)

    您的子导航<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; 
    }
    

    答案 1 :(得分:0)

    从li标签中删除position:relative

    left:0;right:0添加到ul

    答案 2 :(得分:0)

    我不知道你对所有这些内联样式的依恋程度如何,但这就是我如何进行导航:这样你可以从CSS中获得更多控制而不需要所有这些内联声明--- < / p>

    Here is a fiddle.

    HTML

    <nav class="global-nav">
        <ul class="menu">
            <li>
                Menu Item 01
                <ul class="sub-menu">
                    <li>Sub items 01</li>
                    <li>Sub items 01</li>
                    <li>Sub items 01</li>
                    <li>Sub items 01</li>
                </ul>
            </li>
            <li>
                Menu Item 02
                <ul class="sub-menu">
                    <li>Sub items 02</li>
                    <li>Sub items 02</li>
                    <li>Sub items 02</li>
                </ul>
            </li>
            <li>
                Menu Item 03
                <ul class="sub-menu">
                    <li>Sub items 03</li>
                </ul>
            </li>
            <li>
                Menu Item 04
                <ul class="sub-menu">
                    <li>Sub items 04</li>
                    <li>Sub items 04</li>
                </ul>
            </li>
        </ul>
    </nav>
    

    CSS

    *, *:before, *:after {
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
    }
    
    .global-nav {
        width: 100%;
        float: left;
    }
    
    .global-nav ul {
        width: 100%;
        float: left;
        list-style: none;
        margin: 0; padding: 0;
    }
    
    .global-nav li {
        padding: 0 1em;
    }
    
    .global-nav .menu {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid gray;
    }
    
    .global-nav .menu > li {
        display: block;
        float: right;
    }
    
    .global-nav .menu > li:hover {
        cursor: pointer;
    }
    
    .global-nav .sub-menu {
        position: absolute;
        left: 0;
        float: left;
        background-color: lightgray;
        color: gray;
        text-align: center;
        display: none;
    }
    
    .global-nav .sub-menu li {
        display: inline-block;
    }
    
    .global-nav .menu > li:hover .sub-menu {
        width: 100%;
        float: left;
        display: block;
    }