100% CSS drop down menu no java script

Post Reply
User avatar
parthasarker
Insanely Distorted
Insanely Distorted
Posts: 2369
Joined: Mon Dec 01, 2008 5:17 pm
Full Name: Partha Sarker
Expertise: Web Design

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


User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

thanks for sharing bhai..... ata onek a kam a lagbooo ami sure
** KISS Principle **
User avatar
sweetafroza
Proud Member
Proud Member
Posts: 1979
Joined: Fri Jun 27, 2008 8:30 pm
Full Name: Luthfunnahar Hussain
Expertise: Web Design

thanks... asholei kaje lagbe. :)
:)
User avatar
amit
Proud Member
Proud Member
Posts: 1948
Joined: Wed Feb 13, 2008 4:12 am
Full Name: Amit Mojumder
Expertise: Web Design

josh,,....thnx partha bhai...
http://amitmojumder.net (personal folio)
http://stepsg.com (design studio)
Image
Image
User avatar
chhagol
DD Addict
DD Addict
Posts: 899
Joined: Wed Dec 05, 2007 5:17 am
Full Name: Mamun Khandaker
x 2

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...
MAMUN KHANDAKER
Technical Lead
Monstarlab Bangladesh Ltd.
Post Reply

Return to “CSS”