...

View Full Version : Horizontal Multi Level Navigation Menu, with Rollover Images



strongbowunited
11-27-2008, 09:11 PM
I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

oesxyl
11-27-2008, 11:30 PM
I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers
what did you have until now? post the code please.

regards

strongbowunited
11-28-2008, 01:13 AM
This is what i have so far!!

<ul class="nav">
<li><strong>Web Design</strong>
<ul>
<li>Web Hosting</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li><strong>Graphic Design</strong>
<ul>
<li>Advertising</li>
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
<li>Login</li>
</ul>


And this is the CSS

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:3.3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #A3D7A0;
color:#11147d;
text-decoration:none;
background-color:#A3D7A0;
}

#nav a:hover{
background-color:#11147d;
color:#A3D7A0;
background-image: url(images/home_new1.gif);
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
width:3.3;
top:1.5em;
display:none;
}

#nav li ul a{
width:7em;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul
{
display:none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul
{
display:block;
}

oesxyl
11-28-2008, 01:52 AM
This is what i have so far!!



<ul class="nav">
<li><strong>Web Design</strong>
<ul>
<li>Web Hosting</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li><strong>Graphic Design</strong>
<ul>
<li>Advertising</li>
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
<li>Login</li>
</ul>


And this is the CSS


#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:3.3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #A3D7A0;
color:#11147d;
text-decoration:none;
background-color:#A3D7A0;
}

#nav a:hover{
background-color:#11147d;
color:#A3D7A0;
background-image: url(images/home_new1.gif);
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
width:3.3;
top:1.5em;
display:none;
}

#nav li ul a{
width:7em;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul
{
display:none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul
{
display:block;
}



put your code between [ code] and [ /code] tags, please. You can edit your post for that. Thank you.
try this way for menu:

http://qrayg.com/learn/code/cssmenus

replace the text with images. I think you need to use javascript for rollover images.

regards

PappaJohn
11-28-2008, 02:11 AM
I think you need to use javascript for rollover images.
Here's one example of a css-only menu using rollover images from CSSplay (http://www.cssplay.co.uk/menus/image_dropdown.html)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum