Hello friendz..
I was in problem with drop down menu.. becoz client told me to avoid javascript for completing design.. so I was finding a css based drop down menu.. I got lots link and most of them looks complex for me.. so I download the easier one and did some modifications there..
Now my css dropdown menu is OK. I want to share the findings with all..
The complete code with css and html
------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test menu</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
}
#cssmenu{
position:absolute;
margin-top:10px;
font-size:12px;
text-align:left;
}
#cssmenu ul{
width:120px;
float:left;
margin:0px;padding:3px;
background:#4e8ec5;
list-style:none;
}
#cssmenu ul .menu{
display:none;
}
#cssmenu ul:hover .menu{
display:block;
background:#b5d6f2;
padding:3px;
margin:1px;
}
#cssmenu ul:hover .menu a{
display:block;
color:#000000;
text-decoration:none;
}
#cssmenu ul:hover .menu a:hover{
display:block;
color:#003f76;
}
-->
</style></head>
<body>
<div id="cssmenu">
<ul>
<li>Search Engine</li>
<li class="menu"><a href="http://google.com">Google</a></li>
<li class="menu"><a href="http://yahoo.com">Yahoo</a></li>
<li class="menu"><a href="http://msn.com">Msn</a></li>
</ul>
<ul>
<li>My Favorit</li>
<li class="menu"><a href="http://distortedesigners.com/forum">Distorte Designers</a></li>
<li class="menu"><a href="http://dezignus.com">Dezignus</a></li>
<li class="menu"><a href="http://graphicprofessional">GraphicProfessional</a></li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------
demo
http://parthasarker.com/projects/cssmenu.html
I hope it will help someone for same kind problem...
Thanks
100% CSS drop down menu no java script
- parthasarker
- Insanely Distorted
- Posts: 2369
- Joined: Mon Dec 01, 2008 5:17 pm
- Full Name: Partha Sarker
- Expertise: Web Design
- sweetafroza
- Proud Member
- Posts: 1979
- Joined: Fri Jun 27, 2008 8:30 pm
- Full Name: Luthfunnahar Hussain
- Expertise: Web Design
thanks... asholei kaje lagbe.
Pretty old stuff buddy but doesn't work in IE6. I tried my own Simplest CSS menu on earth and failed to make it work in IE6 hah hah hah, so sad of me. I'm gonna have another try to get it worked and if I fail i'll ask for help to work it out...
I'm having few that work in all the browsers but never shared as they were not my creations but if any of u need it, pls ask me...
I'm having few that work in all the browsers but never shared as they were not my creations but if any of u need it, pls ask me...
MAMUN KHANDAKER
Technical Lead
Monstarlab Bangladesh Ltd.
Technical Lead
Monstarlab Bangladesh Ltd.