can anybody guide me to help me fix my drop down menu since i couldnt find a tutorial for it i really need help
hey thanks but why did it work with percentage than pixels i dont get it thats all i changed and it worked
I just googled it. The keyword I used was “css htc”. It really helped me a lot with the menus I created. Why not change you menu? there are a lot of jquery menu out there.
Hi,
The htc files are for IE6 because it does not support li:hover. All other browsers do so there is no need to use htc on anyone but IE6. The sfhover script is another one that does basically the same thing.
The concept behind dropdowns are pretty simple.
Things get complicated with multi levels and styles changing deeper in those levels.
From what I could make out of your menu (without having the images you are using) I have reduced the code to this and have it working, untested in all browsers though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dropdown</title>
<style type="text/css">
#topmenu {
width: 720px;
height: 50px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font:10px/27px verdana, helvetica, tahoma, arial, times, sans-serif;
background: #5546ca;
}
#topmenu li {
float:left;
margin:0 1px;
display:inline;/*ie6 float margin bug*/
background: url("topmenubg4.gif") no-repeat;
position:relative;
}
#topmenu li:hover {
background:red url("topmenuhoverbg4.gif") no-repeat;
}
#topmenu li a {
float:left;
width:100px;
height:50px;
text-decoration:none;
color:#fff;
}
#topmenu li span {
float:left;
width:100px;
height:20px;
background:lime url("topmenudropdown.gif") no-repeat;
}
#topmenu li:hover span{
background:cyan url("topmenudropdownhover.gif") no-repeat;
}
#topmenu li ul {
position:absolute;
left:0;
top:100%;
width:150px;
margin:0 0 0 -999em;
padding:0;
list-style:none;
}
#topmenu li:hover ul {
margin-left:0;
}
#topmenu ul li,
#topmenu ul li a { /*resets from #topmenu li*/
float:none;
display:block;
background:none;
}
#topmenu ul li a {
width:130px;
height:30px;
padding-left:20px;
text-align:left;
background: #5546ca;
}
#topmenu ul li a:hover {background:red}
</style>
</head>
<body>
<ul id="topmenu">
<li><a href="www.omnideify.com">Home</a></li>
<li><a href="www.omnideify.com">Modify<span></span></a>
<ul>
<li><a href="www.omnideify.com">Edit Acount</a></li>
<li><a href="www.omnideify.com">Edit Profile</a></li>
<li><a href="www.omnideify.com">Edit Dashboard</a></li>
<li><a href="www.omnideify.com">Edit Friends</a></li>
<li><a href="www.omnideify.com">Edit Menu</a></li>
<li><a href="www.omnideify.com">Edit Comments</a></li>
<li><a href="www.omnideify.com">Edit Forum</a></li>
<li><a href="www.omnideify.com">Edit Blog</a></li>
<li><a href="www.omnideify.com">Edit Groups</a></li>
</ul>
</li>
<li><a href="www.omnideify.com">My Profile</a></li>
<li><a href="www.omnideify.com">Dashboard<span></span></a>
<ul>
<li><a href="www.omnideify.com">View Multimedia</a></li>
<li><a href="www.omnideify.com">View Photos</a></li>
<li><a href="www.omnideify.com">View Favorites</a></li>
<li><a href="www.omnideify.com">View Posts</a></li>
</ul>
</li>
<li><a href="www.omnideify.com">Control Panel</a></li>
<li><a href="www.omnideify.com">Video<span></span></a>
<ul>
<li><a href="www.omnideify.com">My Videos</a></li>
<li><a href="www.omnideify.com">Community</a></li>
<li><a href="www.omnideify.com">Channels</a></li>
</ul>
</li>
<li><a href="www.omnideify.com">More<span></span></a>
<ul>
<li><a href="www.omnideify.com">The Occult</a></li>
<li><a href="www.omnideify.com">People</a></li>
<li><a href="www.omnideify.com">Forum</a></li>
<li><a href="www.omnideify.com">Events</a></li>
<li><a href="www.omnideify.com">Converse</a></li>
<li><a href="www.omnideify.com">Calender</a></li>
<li><a href="www.omnideify.com">Divinity</a></li>
<li><a href="www.omnideify.com">Groups</a></li>
<li><a href="www.omnideify.com">Blog</a></li>
<li><a href="www.omnideify.com">Questions</a></li>
</ul>
</li>
</ul>
</body>
</html>
sure its multi tabbed
<div id="topmenu">
<ul>
<li><a href="www.omnideify.com">Home</a></li>
<li><a href="www.omnideify.com">Modify<span></span><strong></strong></a>
<ul>
<li><a href="www.omnideify.com">Edit Acount</a></li>
<li><a href="www.omnideify.com">Edit Profile</a></li>
<li><a href="www.omnideify.com">Edit Dashboard</a></li>
<li><a href="www.omnideify.com">Edit Friends</a></li>
<li><a href="www.omnideify.com">Edit Menu</a></li>
<li><a href="www.omnideify.com">Edit Comments</a></li>
<li><a href="www.omnideify.com">Edit Forum</a></li>
<li><a href="www.omnideify.com">Edit Blog</a></li>
<li><a href="www.omnideify.com">Edit Groups</a></li>
</ul>
</li>
<li><a href="www.omnideify.com">My Profile</a></li>
<li><a href="www.omnideify.com">Dashboard<span></span></a>
<ul>
<li><a href="www.omnideify.com">View Multimedia</a></li>
<li><a href="www.omnideify.com">View Photos</a></li>
<li><a href="www.omnideify.com">View Favorites</a></li>
<li><a href="www.omnideify.com">View Posts</a></li>
</ul>
</li>
<li><a href="www.omnideify.com">Control Panel</a></li>
<li><a href="www.omnideify.com">Video<span></span></a>
<ul>
<li><a href="www.omnideify.com">My Videos</a></li>
<li><a href="www.omnideify.com">Community</a></li>
<li><a href="www.omnideify.com">Channels</a></li>
</ul>
</li>
<li><a href="www.omnideify.com">More<span></span></a>
<ul>
<li><a href="www.omnideify.com">The Occult</a></li>
<li><a href="www.omnideify.com">People</a></li>
<li><a href="www.omnideify.com">Forum</a></li>
<li><a href="www.omnideify.com">Events</a></li>
<li><a href="www.omnideify.com">Converse</a></li>
<li><a href="www.omnideify.com">Calender</a></li>
<li><a href="www.omnideify.com">Divinity</a></li>
<li><a href="www.omnideify.com">Groups</a></li>
<li><a href="www.omnideify.com">Blog</a></li>
<li><a href="www.omnideify.com">Questions</a></li>
</ul>
</li>
</ul>
</div>
#topmenu{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
background:#5546ca;
width:720px;
height:50px;
margin:0;
padding:0;
}
#topmenu ul{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
float:left;
margin:0;
padding:0;
list-style-type:none;
margin:0 0 0 3px;
}
#topmenu ul li{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
float:left;
margin:0;
padding:0;
position:relative;
}
#topmenu li ul {
display:none;
position: absolute;
left: 0;
top: 50px;
}
#topmenu li:hover ul {
display: block;
}
#topmenu li:hover ul ul{
display: block;
height:200px;
}
#topmenu ul li a{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
color:#fff;
text-align:center;
line-height:27px;
display:block;
width:100px;
height:40px;
background-image:url("topmenubg4.gif");
background-repeat: no-repeat;
margin:0;
padding:0;
margin:0 1px 0 1px;
text-decoration:none;
}
#topmenu ul li a:hover{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
color:#fff;
text-align:center;
line-height:27px;
display:block;
width:100px;
height:40px;
background-image:url("topmenuhoverbg4.gif");
background-repeat: no-repeat;
margin:0;
padding:0;
margin:0 1px 0 1px;
text-decoration:none;
}
#topmenu ul li span {
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
text-align:center;
line-height:27px;
display:block;
width:100px;
height:20px;
background-image:url("topmenudropdown.gif");
background-repeat: no-repeat;
margin:0;
padding:0;
text-decoration:none;
}
#topmenu ul li span:hover {
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
text-align:center;
line-height:27px;
display:block;
width:100px;
height:20px;
background-image:url("topmenudropdownhover.gif");
background-repeat: no-repeat;
margin:0;
padding:0;
text-decoration:none;
}
#topmenu ul ul{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
width:200px;
margin:0;
padding:0;
list-style-type:none;
margin:0 0 0 3px;
}
#topmenu ul ul li{
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
margin:0;
padding:0;
}
#topmenu ul ul li a {
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
color:#fff;
text-indent:20px;
text-align:left;
background:#5546ca;
width:130px ;
height:30px;
margin:0;
padding:0;
text-decoration:none;
}
#topmenu ul ul li a:hover {
font-family:verdana,helvetica,tahoma,arial,times,sans-serif;
font-size:10px;
color:#fff;
cursor:default;
text-indent:20px;
text-align:left;
background:#5546ca;
width:130px;
height:30px;
margin:0;
padding:0;
text-decoration:none;
}
hmm where did you learn htc
Could you post the code you have so far?
As it stands now we can only make wild guesses what could be going wrong 
Last year I used a drop down menu using css and I have problems viewing it in different browsers. I used a css .htc file so that it will be working in cross browsers.