Help me Fix horizontal Nav bar [Archive]

vijetha

08-11-2010, 08:12 PM

Hi respected css gurus am customizing a java script and css based drop down menu and and am almost done and i need some experts help to sort out some problems. Am enclosing the css , xtml and the live demo of the page as well.
i want some margins after each button i tried to edit the css with out success and i want to add icons before the each name of the buttons and also on the drop down buttons like this . Marked with red arrows

http://i34.tinypic.com/35ndkdc.jpg
http://i36.tinypic.com/awcdxj.jpg

This is the css :
.chromestyle{
width: 1024px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(nav_bg.png) repeat-x center center; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(hover.png) repeat-x center center; /*THEME CHANGE HERE*/
color: #FFFFFF;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px/18px Verdana, Arial, Helvetica, sans-serif;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}

.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

This is the Mark Up :

<!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" lang="en" xml:lang="en">
<head>
<title>Chrome CSS Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />

<script type="text/javascript" src="chromejs/chrome.js">

</script>

</head>

<body>

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#">Button-1</a></li>
<li><a href="#">Button-2</a></li>
<li><a href="#">Button-3</a></li>
<li><a href="#" rel="dropmenu1">Button-4</a></li>
<li><a href="#" rel="dropmenu2">Button-5</a></li>
<li><a href="#" rel="dropmenu3">Button-6</a></li>
</ul>
</div>


<div id="dropmenu1" class="dropmenudiv">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
<a href="#">Link-4</a>
<a href="#">Link-5</a>
</div>


<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>


<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>
<p> </p>
</body>

</html>

This is the Live Demo (http://vijethansp.com/chaitu/demo.htm) Of the page