Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Issue with a CSS drop down menu!

    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:
    Code:
            <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:
    Code:
    #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!
    Last edited by fenhopi; 10-30-2010 at 07:05 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •