CODEWITHSUNDEEP
htmlcss
Adolf Bragi Hermannsson
Adolf Bragi Hermannsson

Reputation: 11

Create CSS HTML5 drop down navigation

I have this code for the navigation

        <div id="navigation">
        <a href="/">Home</a>
        <a href="index.php?sida=link2">link2</a>
        <a href="index.php?sida=lin3">link3</a>
        <a href="index.php?sida=link4">link4</a>
        <a href="index.php?sida=link5">link5</a>
        <a href="index.php?sida=link6">link6</a>
        <a href="index.php?sida=link7">Link7</a>
        </div>

This is the css for the Navigation

#navigation {
float: left;
height: 61px;
width: 885px;
background: url(../../../../images/navigation.png) no-repeat;
padding: 0 0 0 12px;

}

#navigation a {
font-size: 12px;
font-weight: bold;
float: left;
display: block;
height: 29px;
padding: 11px 30px 0 32px;
color: #FFF;
text-decoration: none;
margin: 10px 0 0 0;

}

#navigation a:hover {
background: url(../../../../images/navigation_over.png) repeat-x;

}

#navigation a:hover.dropdown {
background: url(../../../../images/navigation_drop.gif) repeat-x;

}

I have been trying to learn how to create the drop down menu for my navigation, but without success.

Is there someone who is so kind to help me with this.

Upvotes: 1

Views: 586

Answers (2)

Memos Electron
Memos Electron

Reputation: 660

I creating dropdown menus with this css: (old enough and worked everywhere for me)

.vmenu {
list-style:none;
height:75%;
min-height:24px;
width:16.67%;
max-width:544px;
min-width:90px;
text-align:center;
float:left;
z-index:1;
}
.vmenu > li {
width:100%;
list-style:none;
}
.vmenu > a {
background-color:#FFAF00;
width:100%;
height:100%;
display:block;
cursor:pointer;
}
.vmenu li > a {
background-color:#FF9F00;
display:block;
cursor:pointer;
}
.vmenu > li {
display:none;
}
.vmenu:hover > li {
display:block;
}
.vmenu > a:focus~li {
display:block;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > $li > a:focus {
display:block;
}
*/
.vmenu li > a:hover {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu li > a:focus {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu > a:hover {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > a:focus {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu {
width:100%;
display:none;
}
.vmenu:hover > li > ul.vmenu {
display:block;
}
.vmenu > a:focus~li > ul.vmenu {
display:block;
}
.vmenu > li > ul.vmenu > li {
display:none;
padding:0px 0px 0px 100%;
}
.vmenu li ul.vmenu > a {
background-color:#FFAF0F;
float:left;
}
.vmenu li ul.vmenu:hover > a {
background-color:#258072;
color:#DDDDDD;
}
.vmenu li ul.vmenu > a:focus {
background-color:#258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu:hover > li {
top:0;
display:block;
cursor:pointer;
}
.vmenu > li > ul.vmenu > a:focus~li {
top:0;
display:block;
cursor:pointer;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > li > ul.vmenu > $li > a:focus {
top:0;
display:block;
cursor:pointer;
}

with fully nested submenus and partially supports keyboard navigation. see: comments in css

Example html:

<!DOCTYPE html>
<html>
    <head>
        <style>
* {
border-spacing:0px;
border:none;
height:inherit;
width:inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-repeat:no-repeat;
background-position:center;
}
body {
width:90%;
max-width:1600px;
min-width:800px;
margin:auto;
}
body > div {
width:100%;
}
.vmenu {
list-style:none;
height:75%;
min-height:24px;
width:16.67%;
max-width:544px;
min-width:90px;
text-align:center;
float:left;
z-index:1;
}
.vmenu > li {
width:100%;
list-style:none;
}
.vmenu > a {
background-color:#FFAF00;
width:100%;
height:100%;
display:block;
cursor:pointer;
}
.vmenu li > a {
background-color:#FF9F00;
display:block;
cursor:pointer;
}
.vmenu > li {
display:none;
}
.vmenu:hover > li {
display:block;
}
.vmenu > a:focus~li {
display:block;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > $li > a:focus {
display:block;
}
*/
.vmenu li > a:hover {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu li > a:focus {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu > a:hover {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > a:focus {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu {
width:100%;
display:none;
}
.vmenu:hover > li > ul.vmenu {
display:block;
}
.vmenu > a:focus~li > ul.vmenu {
display:block;
}
.vmenu > li > ul.vmenu > li {
display:none;
padding:0px 0px 0px 100%;
}
.vmenu li ul.vmenu > a {
background-color:#FFAF0F;
float:left;
}
.vmenu li ul.vmenu:hover > a {
background-color:#258072;
color:#DDDDDD;
}
.vmenu li ul.vmenu > a:focus {
background-color:#258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu:hover > li {
top:0;
display:block;
cursor:pointer;
}
.vmenu > li > ul.vmenu > a:focus~li {
top:0;
display:block;
cursor:pointer;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > li > ul.vmenu > $li > a:focus {
top:0;
display:block;
cursor:pointer;
}
*/
        </style>
    </head>
    <body>
        <div>
            <ul class="vmenu"><a href="">Menu1</a>
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
                <li><a href="">Item4</a></li>
                <li><a href="">Item5</a></li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu1</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                    </ul>
                </li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu2</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                        <li>
                            <ul class="vmenu"><a href="">SubMenu1</a>
                                <li><a href="">Item1</a></li>
                                <li><a href="">Item2</a></li>
                                <li><a href="">Item3</a></li>
                                <li><a href="">Item4</a></li>
                                <li><a href="">Item5</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="vmenu"><a href="">Menu2</a>
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
                <li><a href="">Item4</a></li>
                <li><a href="">Item5</a></li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu1</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                    </ul>
                </li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu2</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

... it needs some work from you on z-index and colors to make it look better.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Demo of Drop down navigation

Hi if you created a navigation drop-down in css

do this

as like this

HTML code

<ul id="navi">
    <li><a href="" class="active">LInk 1</a></li>
    <li><a href="">LInk 2</a>
        <ul class="subnavi">
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>    
        </ul>

    </li>
    <li><a href="">LInk 3</a></li>

    <div class="cl"></div>
</ul>

Css Code

.cl{clear:both;}
#navi{
    background:#0082c8;
    position:relative;
    margin-top:15px;
}


#navi > li{
    float:left;
    margin:0 10px;
    position:relative;
    padding:14px 0;
}

#navi li a, .subnavi li a{
    color:white;
    text-decoration:none;
    display:inline-block;
    line-height:29px;
    padding:0 13px;
    font-size:16px;
    font-family:arial;
    text-shadow: 0px 2px 2px #034e9f;
    filter: dropshadow(color=#034e9f, offx=0, offy=2);
}

#navi > li:hover > a, li:hover > a , #navi li a.active{
    background:#055c9f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 3px 3px 0px #042960;
    -moz-box-shadow: inset 0px 3px 3px 0px #042960;
    box-shadow: inset 0px 3px 3px 0px #042960;
    border:1px solid #009ada;
    color:#f7cf00;
    line-height:27px;
    padding:0 12px;               
}

.subnavi{
    position:absolute;
    display:none;
    top:51px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 3px 1px #979395;
    -moz-box-shadow: 0px 0px 3px 1px #979395;
    box-shadow: 0px 0px 3px 1px #979395;
    background:#0082c8;
    border:1px solid #005890;
    padding:10px 0;
    white-space:nowrap;
}

#navi li:hover .subnavi{
    display:block;

}
#navi .subnavi li{
    margin:0;
}
#navi .subnavi li a{
    display:block;
    font-size:13px;
    padding:0 15px;
    border-radius:0;
    line-height:27px;
}
#navi .subnavi li a:hover{
    padding:0 15px;
    border-radius:0;
    border-left:0;
    border-right:0;
    line-height:25px;
}

[Live demo][2]**

Upvotes: 1

Related Questions