1

cssを使ったメニューがあります。第 2 レベルのメニューは、実際のメニュー項目ホバーの 1 レベル下に表示されます。以下の例では、2 番目のレベルを「キーボード入力」メニュー項目に並べて表示します。htmlファイルを添付しました。

CSS: 

#navbar {
   margin: 0;
   padding: 0;
   height: 1.8em;
   background-color: #5e8ce9;
   }
#navbar li {
   list-style: none;
   float: left;

    }
#navbar li a
{
    display: block;
    padding: 4px 10px 4px 10px;
    background-color: #5e8ce9;
    color: #fff;
    font-size: 0.85em;
    text-decoration: none;
}
#navbar li ul {
   display: none; 
   width: 10em; /* Width to help Opera out */
   background-color: #69f;}



#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: none; }
#navbar li:hover li a, #navbar li.hover li a {
   background-color: #69f;
   border-bottom: 1px solid #fff;
   color: #000; }
#navbar li li a:hover {
   background-color: #8db3ff; }




#navbar li:hover ul li:hover ul, #navbar li.hover ul li.hover ul
{
    display: block;
    position: absolute;
    margin-left: 100%;
    top:1;
}


#navbar li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}

#navbar li:hover ul, #navbar li li:hover ul, #navbar li.sfhover ul, #navbar li li.sfhover ul {
    left: auto;
}

私の HTML:

<ul id="navbar">
    <li><a href="#">File</a>
        <ul>
            <li><a href="#">Match</a></li>
            <li><a href="#">View</a></li>
            <li><a href="#">Exit</a></li>
        </ul>
    </li>
    <li><a href="#">Data</a>
        <ul>
            <li><a href="#">Import Carbon CSV Files</a></li>
           <li><a href="#">Rework Carbon Components</a></li>
            <li><a href="#">Keyboard Entry</a>
            <ul>
                <li><a href="#">Orifice Data Entry</a></li>
                <li><a href="#">Leaflets Data Entry</a></li>
                <li><a href="#">Rings Data Entry</a></li>
            </ul>
            </li>            
            <li><a href="#">Specifications</a></li>
            <li><a href="#">Matched Components</a></li>

        </ul>
    </li>
    <li><a href="#">Reports</a>
        <ul>
            <li><a href="#">Audit Reports</a></li>

        </ul>
    </li>
    <li><a href="#">Admin</a>
        <ul>
            <li><a href="#">Security</a></li>

        </ul>
    </li>
 </ul>
4

1 に答える 1

0

デモ: http://jsbin.com/ewolik/1/edit シンプルなドロップダウン メニュー: http://jsbin.com/ewolik/2/edit

  1. Li 要素の最初のレベルを相対的に配置します。

    #navbar li {
    list-style: none;
    float: left;
    position:relative;

}

  2. 2 番目のレベル ul を、最初のレベルの lis の高さに等しい上部オフセットで絶対に配置します。

    #navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    top:1.8em;
}
于 2013-07-13T17:45:44.777 に答える