CODEWITHSUNDEEP
css
Aaron
Aaron

Reputation: 151

CSS Menu (hide UL)

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><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>

Any help you can offer is much appreciated

Upvotes: 1

Views: 11861

Answers (4)

Vamsi Krishna
Vamsi Krishna

Reputation: 3792

HTML CODE:

<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 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

Upvotes: 1

Kevin Vess
Kevin Vess

Reputation: 331

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;
}

Upvotes: 0

Timmah
Timmah

Reputation: 1335

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

Upvotes: 3

Kheema Pandey
Kheema Pandey

Reputation: 10265

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

Upvotes: 0

Related Questions