如何實現子菜單效果？

我試圖實現用戶懸停在F.A.Q上的子菜單效果。鏈接和一個子菜單下降，並顯示另外兩個選項 - 但我似乎甚至沒有得到正確的HTML（沒關係jQuery），任何人都可以幫助我？出於某種原因，子菜單中的列表項不會單獨顯示，儘管我添加了「display：block」元素，而且我無法讓子菜單真正出現在F.A.Q的下面。鏈接= \如何實現子菜單效果？

http://jsfiddle.net/Kk8uw/

<nav id="navigation"> 
    <ul> 
     <li><a href="/">Home</a> 

     </li> 
     <li><a href="/catalog.php">Catalog</a> 

     </li> 
     <li><a href="/build.php">Create A Sword</a> 

     </li> 
     <li><a href="/about.php">About Us</a> 

     </li> 
     <li><a href="/faq.php">F.A.Q.</a> 

     </li> 
     <ul id="submenu"> 
      <li><a href="/measurement.php">Measuring</a> 

      </li> 
      <li><a href="/terminology.php">Terminology</a> 

      </li> 
     </ul> 
     <li><a href="/contact.php">Contact Us</a> 

    </ul> 
</nav>

CSS

#navigation { 
    background: #000; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    position: relative; 
    height: 36px; 
} 
#navigation ul { 
    list-style-type: none; 
    margin-left: 10px; 
    padding: 0px; 
} 
#navigation ul li { 
    float: left; 
    display: block; 
    border-right: 1px solid #444; 
} 
#navigation ul li a { 
    display: block; 
    padding: 10px; 
    font-size: 13px; 
    text-decoration: none; 
    color: #ffffff; 
    text-transform: uppercase; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
} 
#navigation ul li a:hover { 
    color: maroon; 
} 
#navigation ul li:first-child a { 
    padding-left: 0px; 
} 
#submenu { 
    position: absolute; 
    left: 90px; 
    list-style: none; 
    top: 30px; 
    background: #222222; 
} 
#navigation ul#submenu li a { 
    display: block; 
    padding: 5px 5px 13px 0px; 
} 
#navigation ul#submenu li { 
    display: block; 
    border: none; 
}

來源

2013-08-06 Tai M.

：http://jsfiddle.net/techsin/FtPvf/1/embedded/result/我正想回答，但samething一直回答已經三次了。 –

入住此演示：http://jsfiddle.net/kP4jt/

HTML代碼

<ul> 
    <li><a href='#'>One</a></li> 
    <li><a href='#'>Two</a></li> 
    <li><a href='#'>Three</a></li> 
    <li><a href='#'>Four</a></li> 
    <li><a href='#'>Five</a> 
     <ul> 
      <li><a href='#'>Sub Menu 1</a></li> 
      <li><a href='#'>Sub Menu 2</a></li> 
      <li><a href='#'>Sub Menu 3</a></li> 
     </ul> 
    </li> 
</ul>

CSS代碼

* { padding: 0; margin : 0; } 
ul li { 
    float : left; 
    list-style-type : none; 
    position : relative; 
} 
ul li a { 
    display : block; 
    padding : 5px 20px; 
    background-color : #eee; 
    text-decoration : none; 
    border-right : 1px solid #ccc; 
    border-bottom : 1px solid #ccc; 
} 
ul ul { 
    display : none; 
    position : absolute; 
    left : -1px; 
} 
ul ul li { float : none; } 
ul li:hover ul { display : block; } 
ul ul a { 
    border-left : 1px solid #ccc; 
    width : 80px; 
}

在HTML需要把子菜單 - <ul>一個<li>標籤內。

根據需要添加效果。

來源

2013-08-06 01:49:14

添加到您的風格，應該讓你在正確的方向前進：

#navigation ul#submenu{ 
display:none; 
} 
#navigation ul:hover ul#submenu 
{ 
display:block; 
}

來源

2013-08-06 01:51:29 chiliNUT

問題是你繼承了#navigation UL裏選擇float屬性。選擇器的目標是#navigation容器中包含的任何li元素。所以你可以添加一個新的選擇器來將float值設置爲none。

#navigation #submenu li { 
    float: none; 
}

但是，使用id的樣式將導致一個臃腫的樣式表和！重要的指令覆蓋。我建議使用類選擇器來避免設置css選擇器的特殊性並最大限度地重用代碼。

我注意到的另一件事是，你錯過了最後一個菜單項上的結束標記。我爲你做一個快速的jsfiddle：使用下面的問題提到的技術

http://jsfiddle.net/beyondhyper/wMpgJ/3/

來源

2013-08-06 02:17:26 Derick

同意這種情況並不需要任何ID – chiliNUT

如何實現子菜單效果？

回答

相關問題