It is the simple and basic level tutorial using css and html. Most of the people using some tools to create dropdown, but it is very simple and easy. I want to explain how to design simple drop down menu with CSS, HTML .Take a look at my code and enrich it into your projects.
HTML CODE:
<ul id="nav">
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">HOME</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">WEB DESIGNING</a>
<ul>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">JQUERY</a></li>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">HTML</a></li>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">AJAX</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">PROGRAMMING</a>
<ul>
<li><a href="http://javatyro.blogspot.com/" target="_blank">JAVA</a></li>
<li><a href="http://androidtyro.blogspot.com/" target="_blank">ANDROID</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">SHARE</a>
<ul>
<li><a href="http://facebook.com/siddhucse" target="_blank">FACEBOOK</a></li>
<li><a href="http://facebook.com/siddhuvydyas" target="_blank">TWITTER</a></li>
<li><a href="http://facebook.com/cselabs" target="_blank">GOOGLE+</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">CONTACT</a></li>
</ul>
</ul>
css code
ul
{
font-family:verdana;
list-style:none;
}
ul li
{
display: block;
position: relative;
float:left;
}
li ul
{
list-style:none;
display:none;
}
ul li a {
display: block;
border:solid 1px #3399ff;
background:#eeeeee;
padding:10px;
color:#333333;
text-decoration:none;
white-space: nowrap;
}
ul li a:hover
{
background:#3399ff;
color:white;
}
li:hover ul {
display:block;
position:absolute;
}
li:hover li
{
float:none;
}
nice and great tutorial
ReplyDeletegreat tutorial regarding CSS and HTML
ReplyDeleteThanks
Website Designing in Delhi NCR