Help on a nav bar menu please [Archive]

zoe20

11-28-2009, 04:10 AM

hi am making a horizontal nav bar with drop downs. and every thing working well and i need to show a a button there with more prominent ( In this case button "Important one" ) so i want to add a different background image for that specific button compared to the rest of the buttons. How to achieve this? Am also enclosing the Live demo of the page and also the css and xhtml. Plz help me solve this problem.

regards
zoe

Live demo o the page:
Live Demo (http://hook4adesign.com/test/all.htm)
css:
html,body {
background: url(../images/bg.png) repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
}
#wrapper {
background:#FFFFFF url(none);
width:1024px;
margin: 0 auto;
height: 600px;
}
#header{
background: url(../images/top%20header.png) no-repeat;
height: 120px;
width: 1024px;
}
#logo{
background: no-repeat;
width: 478px;
height: 109px;
margin-top: 8px;
margin-left: 4px;
float: left;
}

#navigation
{
width: 1024px;
margin: 0px auto 0;
background: url(../images/navbar1.png) repeat-x;
height: 40px;
padding: 0;
}
#navigation UL
{
margin: 0;
padding: 0;
background: no-repeat;
height: 40px;
float: left;
}
#navigation UL LI
{
list-style-type: none;
float: left;
position: relative;
border-left: 1px solid #875CA3;
}
#navigation UL LI A
{
padding: 8px 15px 10px;
height: 22px;
display: block;
color: #000000;
text-decoration: none;
font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;

}
#navigation UL LI A:hover
{
background: url(../images/hover.png) repeat-x left top;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
text-decoration: none;
}
#navigation UL LI UL
{
position: absolute;
top: 40px;
left: -1px;
width: 220px;
visibility: hidden;
padding: 0;
margin: 0;
height: auto;
border-bottom: 1px solid #474646;
}
#navigation UL LI:hover UL
{
visibility: visible;
color: #FFFFFF;
}
#navigation UL LI UL LI
{
float: none;
position: static;
border: 1px solid #474646;
border-bottom: 0;
background: url(../images/sublibg.png);
}

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<link href="css/zoe.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/ynmc logo.png" width="478" height="109" border="0" usemap="#Map" />
<map name="Map" id="Map"></div>
<area shape="rect" coords="3,3,136,105" href="index.htm" />
</map></div>
<div id="navigation"><ul>
<li><a href="" title="">Button-</a></li>
<li><a href="" title="">Courses</a>
<ul>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="">Button-1</a></li>
</ul>
</li>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="">Button-1</a>
<ul>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="">Button-2</a></li>
</ul>
</li>
<li><a href="" title="">Button-1 </a>
<ul>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="" target="_blank">Button-1</a></li>
</ul>
</li>
<li><a href="imp.htm" title="">Button-1</a> </li>
<li><a href="imp.htm" title="">Important One</a> </li>
<li><a href="imp.htm" title="">Button-1</a> </li>
<li><a href="imp.htm" title="">Button-1</a> </li>
<li><a href="imp.htm" title="">Button-1</a> </li>

</ul>
</div>

</div>
</body>
</html>