...

View Full Version : Resolved Issue with a CSS drop down menu!



fenhopi
10-30-2010, 05:29 PM
Hi, I have a navigation bar that consists of pictures. For example I have an image of people, and that links to the "friend" page. However, when I hover my mouse over the picture, the drop down menu I added, replaces the "friend" image, instead of dropping down under it. Is there a way to fix this?

Here's my html:

<ul id="navbar">
<li><a href="profile.php"><input class="friendsbutton" type="button"></a><ul>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Change Picture</a></li>
<li><a href="#">Something else</a></li></ul>
</li>
</ul>


Here's my CSS:

#navbar {
margin: 0;
padding: 0;
height: 0em; }
#navbar li {
list-style: none;
float:left; }
#navbar li a {
display: list-item;
padding: 0px 0px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display:none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul {
display: block;
position:absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
.friendsbutton{
width:45px;
height:45px;
background-image:url(images/friends3.jpg);
background-repeat:no-repeat;
border:0px;
padding:0px 0px;
margin:0 0px 0 0;
color:#0D0D0D;
float:left;
}
.friendsbutton:hover{
text-decoration: none;
background:url(images/friends3hover.jpg);}


Thank you in advance!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum