CSS菜單（隱藏UL）

我是新來的CSS，我試圖做一個菜單，其中的子列表只在懸停時可見（並佔用空間）。CSS菜單（隱藏UL）

我發現了visibility:collapse;屬性，但這只是掩蓋了子列表並在我的垂直菜單中留下了很大的空隙。

這裏就是我這麼遠，但我不知道如何在落實上懸停的可擴展子菜單：

CSS：

nav a { 
    text-decoration: none; 
    color: white; 
    font-family: 'Roboto', sans-serif; 
} 

nav ul { 
    list-style-type: none; 
} 

nav ul li ul { 
    visibility: collapse; 
}

HTML：

<nav> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="gear.html">Gear</a> 
       <ul> 
        <li><a href="p1.html">P1</a></li> 
        <li><a href="p2.html">P2>/a></li> 
        <li><a href="p3.html">P3/a></li> 
        <li><a href="p4.html">P4</a></li> 
        <li><a href="p5.html">P5</a></li> 
       </ul> 
      </li> 
      <li><a href="news.html">News</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </nav>

您可以提供的任何幫助非常感謝

來源

2014-02-27 Aaron

你必須到u se javascript用於獲取懸停時可展開的子菜單。 –

[如果用於除行，行組，列或列組之外的元素，'collapse'與'hidden'具有相同的含義]（http://www.w3.org/TR/CSS2/visufx.html#可見度）：你最好使用'hidden'值。除了你正在尋找'display：none'我想。我猜，下拉菜單絕對不是新手入門的人。在使用（高級）懸停效果之前瞭解如何定位和放置模塊 – FelipeAls

而不是使用visibility: collapse;我們e display:none屬性，因爲一旦你使用visibility屬性那裏總是存在一個空間。

你應該嘗試這樣。

nav ul li >ul { 
    display:none; 
} 
nav ul li:hover >ul { 
    display:block; 
}

一個工作演示http://jsbin.com/xivogawu/1/edit

來源

2014-02-27 06:08:54

可以使用Pseduo選擇器，當你將鼠標懸停在父列表爲目標的子列表。

這裏的Fiddle

所有你需要的是這樣的：

nav ul { 
    position:relative; 
    list-style-type: none; 
    background-color:#eaeaea; 
} 

nav ul li ul { 
    position:absolute; 
    display:none; 
    left:60px; 
    background-color:#CCC; 
} 
nav ul li:hover ul { 
    display:block; 
}

這個目標時父懸停在子表，並且只覆蓋display:none;命令

來源

2014-02-27 06:09:20 Timmah

的visibility屬性在不改變佈局的情況下隱藏一個元素（即，留下如你注意到的空白）。此外，collapse值僅影響錶行和列。

實現目標的最佳方法是使用display屬性;試試這個來代替：

nav ul li ul { 
    display: none; 
} 
nav ul li:hover ul { 
    display: block; 
}

來源

2014-02-27 06:10:23

HTML代碼：

<nav> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="gear.html">Gear</a> 
       <ul> 
        <li><a href="p1.html">P1</a></li> 
        <li><a href="p2.html">P2</a></li> 
        <li><a href="p3.html">P3</a></li> 
        <li><a href="p4.html">P4</a></li> 
        <li><a href="p5.html">P5</a></li> 
       </ul> 
      </li> 
      <li><a href="news.html">News</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </nav>

CSS代碼：

nav a { 
    text-decoration: none; 
    color: white; 
    font-family: 'Roboto', sans-serif; 
} 

nav ul { 
    list-style-type: none; 
} 
nav a{ 
    color:#000000; 
} 

nav ul li >ul { 
    display: none; 
} 
nav ul li:hover >ul { 
    display:block; 
}

JSFIDDLE DEMO

來源

2014-02-27 06:31:12

CSS菜單（隱藏UL）

回答

相關問題