Creating CSS Horizontal Dropdown Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul>
<li id="profile"><span><a href="http://www.handycss.com/">Handy CSS</a> <img src="arrow.png" name="arrow_profile" width="18" height="15" align="top" onClick="javascript:showMenu('id_menu_profile')" onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage(0)" onmouseout="javascript:swapImage(2)"></span>
<div id="id_menu_profile">
<a href="http://www.handycss.com/tips/">CSS Tips</a>
<a href="http://www.handycss.com/effects/">CSS Effects</a>
<a href="http://www.handycss.com/tutorials/">CSS Tutorials</a>
<a href="http://www.handycss.com/how/">How to</a>
<a href="http://www.handycss.com/css-menus/">CSS Menu</a>
<a href="http://www.handycss.com/wiki/">CSS Wiki</a>    </div>
</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

body{font-family:Arial, Helvetica, sans-serif; font-size:13px; background:#FFFFFF;}
#container{margin:0 auto; width:600px;margin-top:30px;}
a:link, a:visited{color:#0066CC; text-decoration:none;}
a:hover{text-decoration:underline;}
ul, li{margin:0; border:0; list-style:none; padding:0;}
ul{border-bottom:dotted 1px #DEDEDE;}
ul{height:21px;}
li{display:inline;}
.menu span{border:solid 1px #EFEFEF; padding:4px 2px 4px 6px; border-bottom:none; margin-right:10px; line-height:18px;}
.menu span a{font-weight:bold;}
.menu span:hover{border:solid 1px #DEDEDE; border-right:1px solid #999999; border-bottom:none;}
.arrow{margin-left:4px; cursor:pointer; }
.sub_menu{display:none; position:relative; border:solid 1px #DEDEDE; border-top:none; border-right:solid 1px #999999; border-bottom:solid 1px #999999; padding:10px; top:2px; width:120px; background:#FFFFFF;}
.sub_menu a:link, .sub_menu a:visited, .sub_menu a:hover{display:block; font-size:11px; padding:4px;}
.item_line{border-top:solid 1px #DEDEDE;}

1
2
3
4
5
6
7
8
9
10
11
12
13

var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";
} else {
my_menu.style.display="none";
}
}