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）

回答

相关问题