子菜單中的CSS菜單佈局父母

我在假期期間一直使用我的空閒時間來提高我的HTML知識。子菜單中的CSS菜單佈局父母

在我設計CSS菜單的時候。我面臨一些問題，不知道如何解決它們。

我試圖從Google進行搜索。由於我英語不好，我無法找到解決方案，所以我在這裏尋求幫助。

問題：

我試圖設計帶有可擴展子菜單CSS菜單。爲什麼子菜單的父級列表不變？

正如你所看到的截圖。產品菜單與其他菜單不同。

有沒有解決方法？

截圖

由於我的名譽，我不能提供截圖，所以我會提供一個鏈接：

http://i151.photobucket.com/albums/s155/HongJaiz/CSSMenu.jpg

CSS3編碼

body{ 
    position: relative; 
    height: 100%; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); 

} 

.navbox { 
    position: relative; 
    float: left; 
} 

ul#expList { 
    list-style: none; 
    display: block; 
    width: 200px; 
    position: relative; 
    padding: 60px 0 60px 0; 
    background: url(shad2.png) no-repeat; 
    -webkit-background-size: 50% 100%; 
} 

li#expList { 
    list-style: none; 
    display: block; 
    width: 200px; 
    position: relative; 
    padding: 60px 0 60px 0; 
    background: url(shad2.png) no-repeat; 
    -webkit-background-size: 50% 100%; 
} 

ul li { 
    list-style: none; 
} 

li { 
    margin: 5px 0 0 0; 
} 

ul#expList li a { 
    -webkit-transition: all 0.3s ease-out; 
    background: #cbcbcb url(border.png) no-repeat; 
    color: #174867; 
    padding: 7px 15px 7px 15px; 
    -webkit-border-top-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    width: 100px; 
    display: block; 
    text-decoration: none; 
    -webkit-box-shadow: 2px 2px 4px #888; 
} 

ul#expList li a:hover { 
    background: #ebebeb url(border.png) no-repeat; 
    color: #67a5cd; 
    padding: 7px 15px 7px 30px; 
}

HTML代碼

<ul id="expList"> 
    <li class="home"><a href="">Home</a></li> 
    <li class="freebies">Product 
     <ul> 
      <li><a href="">List 1</a></li> 
      <li><a href="">List 2</a></li> 
      <li><a href="">List 3</a></li> 
     </ul> 
    </li> 
    <li class="about"><a href="">Register</a></li> 
    <li class="about"><a href="">About Us</a></li> 
</ul>

來源

2012-08-31 Blackie

我用CSS和CSS3重新標記了你的問題。 –

只是因爲你給了風格的<li></li><a></a>並在子菜單即父母的情況下Product你沒有<a></a>標籤包裝它，這樣做會解決你的問題

<ul id="expList"> 
    <li class="home"><a href="">Home</a></li> 
    <li class="freebies"><a>Product</a> 
     <ul> 
      <li><a href="">List 1</a></li> 
      <li><a href="">List 2</a></li> 
      <li><a href="">List 3</a></li> 
     </ul> 
    </li> 
    <li class="about"><a href="">Register</a></li> 
    <li class="about"><a href="">About Us</a></li> 
</ul>

來源

2012-08-31 07:16:01 Uttara

謝謝Uttara。你解決了我的問題。但我在產品內添加後。列表1，列表2和列表3無法展開顯示。 – Blackie

子菜單中的CSS菜單佈局父母

回答

相關問題