Hello

 

I'm trying to make a menu which has a hover to any other menu i cant find the problem why its not working anyone able to help??

 

CSS is

 

 

#menu ul {
margin: 0px;
list-style: none;
line-height: normal;
}

#menu {
padding-right:50px;
float: right;
width:600px;
}

#menu li {
float: left;
width: 100px;
font-size: 16px;
font-weight: bold;
}

#menu a {
background: url(images/menu_button.png);
width: 200px;
height: 150px;

}

#menu a:hover {
background: url(images/menu_button_hover.png);
width: 200px;
height: 150px;
font-size: 18px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

 

 

 

HTML is

 

 

<div id="menu">
<ul>
	<li><a href="Home"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
       <li><a href="#"></a></li>
 	</ul>
</div>

Edited February 5, 201115 yr by Ben
Changed title

I came in here thinking you had a problem with men first haha.

 

Have you got a link to how you have attempted this? Depending on your image, you need to have a separate class for each button. Check this link out. Demo of those buttons here

I came in here thinking you had a problem with men first haha.

 

lol, ditto!

 

 

Kyle

As said above, I thought you had a problem with men!

 

Without a link to your live website, there's no real way I can help. Please post your website so we can analyze the code .

LOL - Have now changed the title! - Carry on!

First thanks Ben miss type error LOL

 

Yes everyone i have just started the website and is not on the internet yet jut here the images I'm using for the photos.

 

It doesn't matter about the position of the menu area its just the hover and make the menu buttons the right size.

Edited February 5, 201115 yr by Vulcan

Hi mate,

 

I've taken your buttons and taken my own code to make your button into a working example. I'm not sure if you can make a navigation with separate images but the best way to do it is merge the two images together like I have for yours.

 

 

Here is the CSS:

 

body {
background: #333333;
}

#menu ul {
height: 56px;
position: relative;
background: url(images/menu_button.png) no-repeat 0 0;
list-style: none;
margin-left: 389px;
margin-top: 55px;
}
#menu li {
display: inline;
}
#menu li a:link, #menu li a:visited {
border: none;
width: 143px;
height: 56px;
display: block;
position: absolute;
text-indent: -7000px;
outline: none;
}
#menu li.home a:link, #menu li.home a:visited {
left: 0;
}
#menu li.home a:hover {
background: url(images/menu_button.png) no-repeat 0 -56px;
}
#menu li.homeActive a {
background: url(images/menu_button.png) no-repeat 0px -56px;
left: 0;
}

 

And the HTML:

 

<div id="menu">
   <ul>
	<li class="home"><a href="index.html">Home</a></li>

   </ul>
</div>

 

If you want to add buttons all you would do is all the <li> in the CSS with .home just change that to .example and then you would give that value a negative value in pixels where the next button starts.

 

#navigation li.home a:link, #navigation li.home a:visited {
left: 0;
}
#navigation li.about a:link, #navigation li.about a:visited {
left: 100px
}
#navigation li.home a:hover {
background: url(images/nav1.png) no-repeat 0 -56px;
}
#navigation li.about a:hover {
background: url(images/nav1.png) no-repeat -100px -56px;
}
#navigation li.indexActive a {
background: url(images/nav1.png) no-repeat 0px -56px;
left: 0;
}

#navigation li.aboutActive a {
background: url(images/nav1.png) no-repeat -100px -56px;
left: 100px;
}

 

Here are some tutorials to get you through it.

 

http://skyje.com/2010/02/css-sprites/

Edited February 6, 201115 yr by j05hr

Ok thanks, how do i make it stay on the white when i clicked on it ect and as well leave as the hover,

What i want is the back menus and then when i hover over it will turn white and when i click on that menu it will stay white.

yes well i'm trying to put j05hr's code it i don't get the last bit. But background is a blue colour

 

Do you understand what i want

Edited February 6, 201115 yr by Vulcan

Why are you using text-indent for the menus? He has a solid color background and will need the items to be visible.

 

Sorry I just took a live example where they're just images so didn't need it.

 

Vulcan this is a working example of what you want. http://www.sampleestateagent.com/testing/services.html

 

To get rid of the background colour just delete

 

body {
 background: #42c0f5;
}

 

I just added that because with a white hover, you can't see if the background is white too.

 

If you want to add an active navigation in the html just use it as a class

 

<li class="aboutActive"><a href="about.html">About</a></li>

 

And this is the code for the CSS

 

#menu li.aboutActive a {
background: url(images/menu_button.png) no-repeat -143px -56px;
left: 143px;
}

Full code

 

CSS:

body {
background: #42c0f5;
}

#menu ul {
height: 56px;
position: relative;
background: url(images/menu_button.png) no-repeat 0 0;
list-style: none;
margin-left: 389px;
margin-top: 55px;
}
#menu li {
display: inline;
}
#menu li a:link, #menu li a:visited {
border: none;
width: 143px;
height: 56px;
display: block;
position: absolute;
outline: none;
color: #f615e9;
}
#menu li.home a:link, #menu li.home a:visited {
left: 0;
}
#menu li.about a:link, #menu li.about a:visited {
left: 143px;
}
#menu li.services a:link, #menu li.services a:visited {
left: 286px;
}
#menu li.home a:hover {
background: url(images/menu_button.png) no-repeat 0 -56px;
}
#menu li.about a:hover {
background: url(images/menu_button.png) no-repeat -143px -56px;
}
#menu li.services a:hover {
background: url(images/menu_button.png) no-repeat -286px -56px;
}
#menu li.homeActive a {
background: url(images/menu_button.png) no-repeat 0px -56px;
left: 0;
}
#menu li.aboutActive a {
background: url(images/menu_button.png) no-repeat -143px -56px;
left: 143px;
}
#menu li.servicesActive a {
background: url(images/menu_button.png) no-repeat -286px -56px;
left: 286px;
}

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="css.css" />

</head>
<div id="menu">
   <ul>
	<li class="home"><a href="test.html">Home</a></li>
	<li class="aboutActive"><a href="about.html">About</a></li>
	<li class="services"><a href="services.html">Services</a></li>
   </ul>
</div>

its not working

its not working

 

Not working how? I posted a link with a working example

 

Link again: http://www.sampleestateagent.com/testing/services.html

Not working how? I posted a link with a working example

 

Link again: http://www.sampleestateagent.com/testing/services.html

 

well the whites not working with it when i do it. maybe is because im useing php

 

But im away now so i'll try in the weekend