CODEWITHSUNDEEP
htmlcss
Tyler
Tyler

Reputation: 882

Pure css submenu vertical

I got a css3 menu with this code:

HTML:

<div id="navi">
    <ul>
        <li><a href="#">First</a></li>
        <li class="active"><a href="#">Second</a>
            <ul class="child">
                <li><a href="#">First child</a></li>
            </ul>
        </li>
        <li><a href="#">Third</a></li>
    </ul>
</div>

CSS:

#navi {
    height: auto;
    width: auto;
}
#navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#navi ul li {
    float: left;
    position: relative;
}
#navi ul li a {
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 100px;
    height: 30px;
    border: thin solid #999;
    color: #FFF;
    background-color: #0CF;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#navi ul li a:hover {
    background-color: #0C3;
}
#navi ul li ul {
    position: absolute;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
    height: 0px;
    overflow:hidden;
}
#navi ul li:hover ul {
    height: 100px;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}

Fiddle Here

Now I want that the menu isn't horizontal. It should be vertical. I tried to remove float:left; but then the submenu doesn't display. The submenu should press all menu items below down. Any suggestions? Would be great.

Upvotes: 2

Views: 4636

Answers (3)

user2021917
user2021917

Reputation:

If you do this, it will give it perfect look and push your nav three item down. Add this height to your particular class:

#navi ul li:hover ul {
    height:32px;
}

But if you have other sub menu items in other main nav items with different items in them, then you should make classes for all particular elements and give them height according to them. Have a look at this: 

#navi ul li:hover .class {
    height:64px; /*for two items in sub menu and like this for other*/ 
}

Upvotes: 2

Marikkani Chelladurai
Marikkani Chelladurai

Reputation: 1430

<!DOCTYPE html>
<html>
<head>
<style> 
#navi {
    height: auto;
    width: auto;
}
#navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#navi ul li {

}

#navi ul li a {
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 100px;
    height: 30px;
    border: thin solid #999;
    color: #FFF;
    background-color: #0CF;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#navi ul li a:hover {
    background-color: #0C3;
}
#navi ul li ul {
    position: relative;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
    height: 0px;
    overflow:hidden;
}
#navi ul li:hover ul {
    height: 100px;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}
</style>
</head>
<body>
<div id="navi">
    <ul>
        <li><a href="#">First</a></li>
        <li class="active"><a href="#">Second</a>
            <ul class="child">
                <li><a href="#">First child</a></li>
            </ul>
        </li>
        <li><a href="#">Third</a></li>
    </ul>
</div>

</body>
</html>

Check this

Upvotes: 2

Karuppiah RK
Karuppiah RK

Reputation: 3964

your css:

#navi {
    height: auto;
    width: auto;
}
#navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#navi ul li {
    position: relative;
}
#navi ul li a {
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 100px;
    height: 30px;
    border: thin solid #999;
    color: #FFF;
    background-color: #0CF;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#navi ul li a:hover {
    background-color: #0C3;
}
#navi ul li ul {
    position:absolute;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
    height: 0px;
    overflow:hidden;
}
#navi ul li:hover ul {
    position:absolute;
    left: 100px;
    top: 0px;
    height:50px;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}

your html:

<div id="navi">
    <ul>
        <li><a href="#">First</a></li>
        <li class="active"><a href="#">Second</a>
            <ul class="child">
                <li><a href="#">First child</a></li>
            </ul>
        </li>
        <li><a href="#">Third</a></li>
    </ul>
</div>

copy and paste this coding. its worked. i think you want like this vertical menu bar???

Upvotes: 0

Related Questions