CODEWITHSUNDEEP
htmlcssnavbar
Hiigaran
Hiigaran

Reputation: 831

Creating fade-in drop-down navbar buttons with CSS3

Going to edit this, since I'm a stubborn idiot who has seen the error of his way. More or less the same question about how to create a drop-down group of links on a horizontal navbar, but this time, with the usage of ul and li.

So far, I've made this much progress:

<nav>
    <ul class="width">
        <li><a ...</li>
        <li><a ...
            <ul>
                <li><a ...</li>
                <li><a ...</li>
                <li><a ...</li>
            </ul>
        </li>
        <li><a ...</li>
    </ul>
</nav>

CSS:

nav ul{width:100%;text-align:justify;font-size:0;}
nav ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;}
nav a{display:inline-block;padding:10px;}
nav ul ul{display:none;}

However, it's still incomplete, as I'm unsure how to progress from here. Currently this code hides the content that would appear in the drop down menu, but there is no code to make it visible again. Guides I've seen make use of floats. Are those absolutely necessary?

Upvotes: 0

Views: 261

Answers (1)

zsaat14
zsaat14

Reputation: 1118

You will still need to wrap the drop down link with its subordinate links. Like this:

HTML:

<nav class="bg">
    <div class="navwrap width">
        <div class="nav">
            <a href="#">Link1</a>
            <div class='dropdown'>
                <a href="#">Link2</a>
                <div class='droplinks'>
                    <a href='#'>Drop Link 1</a>
                    <a href='#'>Drop Link 1</a>
                </div>
            </div>
            <a href="#" id="dropdown2">Link3</a>
            <a href="#">Link4</a>
        </div>
    </div>
</nav>

New CSS:

.dropdown{
    padding: 0;
    position:relative;
    width: 100px;
    display:block;
    float:left;
}
.dropdown a {
    width: 100%;
}
.droplinks{
    position:absolute;
    top:100%;
    left:0;
    display:none;
    height:0;
    transition: height 0.2s linear;
}
.dropdown a:hover ~ .droplinks{
    display:block;
    height: 150px;
}
.droplinks:hover {
    display:block;
    height: 150px;
}

See this fiddle. This is just a rough example, you will need to adjust some alignment and stuff like that, but I think you can do that. It was mainly to show you how the drop down action worked.

Upvotes: 2

Related Questions