>[color=blue]
> The answers you've had so far as "New menu items appear when rolled over".
>
> If you are looking for "Pretty colour change" then see
>
http://dorward.me.uk/www/hover/[/color]
Got your demo and started working on it but having troubles.
I am trying to make this css hover menu:
<style>
/* Navigation bar ************************************************/
#navbar {
position: absolute;
left:10px;
top:205px;
width:200px;
background-color: #996633;
color: #f0e0c8;
font-size:12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0;
margin: 0.5em -2em 0.5em 1em;
border: solid #c00000 3px;
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
border-style: none;
}
#navMenu li a, #navbar li span {
text-decoration: none;
display: block;
padding: 0.5ex 0.5ex 0.5ex 0.5ex;
margin: 0;
border-bottom: 0.1ex solid #cc9966;
border-right-width: 1ex;
width: 100%;
height: 100%;
}
html>body #navMenu a, html>body #navMenu span {
width: auto;
}
#navbar a:link {
background-color: transparent;
color: #f0e0c8;
}
#navMenu a:link {
border-right-style: none;
}
#navbar a:visited {
background-color: transparent;
color: #fffs;
}
#navMenu a:visited {
border-right-color: #eee;
border-right-style: none;
}
#navMenu li.active > a, #navMenu li.active > span {
border-right-color: #999;
border-right-style: solid;
background-color: #f0e0c8;
color: 996633;
}
#navMenu a:hover {
border-right-color: #cc9966;
border-right-style: solid;
}
#navbar a:hover {
background-color: #f0e0c8;
color: #996633;
}
#navbar a:focus {
background-color: #f0e0c8;
color: #996633;
}
#navMenu ul {
/* margin-left: 1.5em;*/
}
</style>
<div id="navbar" class="menu">
<ul id="navMenu">
<li><a href="tables.html" title="Tables" accesskey="T">Tables</a></li>
<li><a href="bedrooms.html" title="Bedrooms" accesskey="B">Bedrooms</a>
</li>
<li><a href="entert.html" title="Entertainment Centers">Entertainment
Centers</a></li>
<li><a href="office.html" title="Office">Office</a></li>
<li><a href="quilts.html" title="Quilts">Quilts</a></li>
<li><a href="gifts.html" title="Gifts & Food">Gifts & Food</a></li>
</ul>
</div>
look like this image:
http://64.191.18.27/~austin1/js_menu.gif
Can it be done?
