Dropdown menu ~ CodexColors

Create a dropdown menu with HTML and CSS ...Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Mahmood</title>

body{

}

/*-----------full page---------*/

div.full_page{

background-color:yellowgreen;

width:900px;

height:1040px;

margin-left:220px;

margin-top:50px;

box-shadow:0px 0px 10px 3px silver;

margin-bottom:50px;

border-radius:8px 8px 8px 8px;

}

/*-----------main menu bar-------*/

ul{

font-family:sans-serif;

margin: 0;

padding: 0;

list-style: none;

float:left;

}

ul li{

display:block;

position:relative;

float:left;

width:180px;

text-align:center;

}

li ul{

display:none;

}

li ul li{

text-align:left;

}

ul li a{

display:block;

text-decoration:none;

color:black;

padding: 5px 15px 5px 15px;

background:-moz-linear-gradient(rgb(75,0, 130), rgb(10,10,10)) repeat scroll 0% 0% transparent;

margin-left:1px;

white-space:nowrap;

color:white;

font-weight:;

text-transform:uppercase;

}

ul li a:hover{

background:-moz-linear-gradient(rgb(249, 249, 249), rgb(229, 229, 229)) repeat scroll 0% 0% transparent;

color:black;

}

li:hover ul{

display:block;

position:absolute;

}

li:hover li{

float:none;

}

li:hover a{

color:balck;

}

li:hover li a:hover{

}

/*---------body container-------*/

div.body_container{

background-color:yellowgreen;

width:900px;

height:900px;

}

/*------logo-------*/

div.logo{

height:100px;

background-color:;

width:900px;

}

/*------------footer-------*/

div.footer{

background-color:yellowgreen;

height:40px;

width:900px;

}

</style>

</head>

<body>

</div>
<div class="body_container">

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#" >SEARCH</a>

<ul>
<li><a href="http://www.google.com/" target="_blank">GOOGLE</a></li>
<li><a href="http://www.yahoo.com/" target="_blank">YAHOO</a></li>
<li><a href="http://www.bing.com/" target="_blank">BIng</a></li>
</ul>
</li>
<li><a href="#">freelance</a>

<ul>
<li><a href="http://www.freelancer.com/" target="_blank">Freelancer</a></li>
<li><a href="http://www.odesk.com/" target="_blank">odesk</a></li>
<li><a href="http://www.guru.com/" target="_blank">guru</a></li>
<li><a href="http://www.elance.com/" target="_blank">elance</a></li>
</ul>
</li>
<li><a href="#">movie</a>

<ul>
<li><a href="#">Ra.one</a></li>
<li><a href="#">bodyguard</a></li>
<li><a href="#">ready</a></li>
<li><a href="#">agnepath</a></li>
</ul>
</li>
<li><a href="#">bangla blog</a>

<ul>
<li><a href="http://www.techtunes.com.bd/" target="_blank">techtunes</a></li>
<li><a href="http://www.tunerpage.com/" target="_blank">tuner page</a></li>
<li><a href="http://www.tutorialbd.com/" target="_blank">tutorial bd</a></li>
<li><a href="http://www.webcoachbd.com/" target="_blank">webcoachbd</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">

</div>
</div>
</body>

</html>

You can edit the HTML, Copy the Code areas HTML code to Paste our online HTML editor Page Or below HTML Editor area Now Practice

Dropdown menu

0 comments:

Post a Comment

FIND US ON FACEBOOK

Categories

Blog Archive

Popular Posts