1

このメニューは、マルチレベルの水平メニューです。3番目のレベルのサブメニューを垂直にしようとしています（1番目と2番目のレベルは水平のままになります）

したがって、製品にカーソルを合わせると、ハードドライブ、モニター、スピーカーが水平方向に一覧表示されます。ただし、スピーカーにカーソルを合わせると、ドロップダウンリストのように垂直方向に10 Walt、20Walt...が表示されます。

これはできますか？助けてください。

<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>…&lt;/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/

4

2 に答える 2

1

これがあなたのための出発点です：

HTML

​&lt;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;
}

JSFiddleで表示

于 2012-12-28T18:23:55.693 に答える
1

次のコードをスタイルに追加します

#nav li ul li ul li { display: block; float: none; }
于 2012-12-28T18:23:02.370 に答える