Question

此菜单是一个多级水平菜单。我试图使一个3级子菜单变为垂直（第1和第2级将保持水平）

因此，如果我悬停产品，它将水平列出Harddrives，Monitors和Speakers ......但是，当我将扬声器悬停时，它现在应该列出10个Walt，20个Walt ......垂直下拉列表。

可以这样做吗？请帮忙。

<style>
    /**
     * horizontal navigation (SO)
     */
    body {
        background: url('.jpg') 50% 50%;
    }

    /* Targeting both first and second level menus */

    #nav {position: relative;}
    #nav li {
        list-style:none;
        float: left;
    }
    #nav li a {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
    }
    #nav li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Targeting the first level menu */
    #nav {  
        top:150px;
        min-width:850px;
        background:#fff;
        opacity:0.5;
        display: block;
        height: 34px;
        z-index: 100;
        position: absolute;
    }
    #nav > li > a {
    }

    /* Targeting the second level menu */
    #nav li ul {
        color: #333;
        display: none;
        position: absolute; 
        width:850px;
    }
    #nav li ul li {
        display: inline;
    }
    #nav li ul li a {
        background: #fff;
        border: none;
        line-height: 34px;
        margin: 0;
        padding: 0 8px 0 10px;
    }
    #nav li ul li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Third level menu */
    #nav li ul li ul{
        top: 0;
    }
    ul.child {
    background-color:#FFF;  
    }
    /* A class of current will be added via jQuery */
    #nav li.current > a {
        background: #f7f7f7;
        float:left;
    }
    /* CSS fallback */
    #nav li:hover > ul.child {
        left:0;
        top:34px;
        display:inline;
        position:absolute;
        text-align:left;
    }
    #nav li:hover > ul.grandchild  {
        display:block;
    }

</style>


<!-- content to be placed inside <body>…</body> -->
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul class="child">
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a>
                <ul class="child">
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul class="child">
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

jsFiddle演示： http://jsfiddle.net/fJQ59/

Answer 1

按照代码

添加您的风格

#nav li ul li ul li { display: block; float: none; }

Answer 2

以下是您的起点：

HTML

<ul>
  <li>
    Option One
    <ul>
      <li>
        Second Row One
        <ul>
          <li>
            Third Row One
          </li>
          <li>
            Third Row Two
          </li>
          <li>
            Third Row Three
          </li>
        </ul>
      </li>
      <li>
        Second Row Two
      </li>
      </ul>   
  </li>
  <li>
    Option Two
  </li>
  <li>
    Option Three
  </li>
</ul>

CSS

ul {
  width: 600px;
  list-style-type: none;
}
ul > li,
ul > li > ul > li {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}

/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
  float: none;
}

li > ul {
  display: none;
}
li:hover > ul {
  position: absolute;
  display: block;
  width: 600px;
}

View on JSFiddle

具有第三个子菜单的CSS水平菜单垂直显示

2 个答案:

HTML

CSS