CSS Menu (hide UL) - css

Question

I'm new to CSS and I'm trying to make a menu where the sub-list is only visible (and takes up space) on hover-over.
I've found the visibility:collapse; property, but that only masks the sub-list and leaves a big gaping gap in my vertical menu.
Here's what I've got so far, but I'm not sure how to implement the expandable sub-menu on hover over:
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>Home</li>
<li>About</li>
<li>Gear
<ul>
<li>P1</li>
<li><a href="p2.html">P2>/a></li>
<li><a href="p3.html">P3/a></li>
<li>P4</li>
<li>P5</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
Any help you can offer is much appreciated

Answer 1

You can use Pseduo-selectors to target the sub-list when you hover over the parent list.
Here's the Fiddle
All you need is this:
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;
}
This targets the sublist when the parent is hovered over, and overrides the display:none; command

Answer 2

HTML CODE:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gear
<ul>
<li>P1</li>
<li>P2</li>
<li>P3</li>
<li>P4</li>
<li>P5</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
CSS CODE:
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

Answer 3

Instead of using visibility: collapse; use display:none property because once you use visibility property there a space exist always.
you should try like this.
nav ul li >ul {
display:none;
}
nav ul li:hover >ul {
display:block;
}
A working Demo http://jsbin.com/xivogawu/1/edit

Answer 4

The visibility property only hides an element without changing the layout (i.e. leaving gaps like you've noticed). Also, the collapse value only effects table rows and columns.
The best way to achieve your goal is to use the display property; try this instead:
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
}