Navigation Bar

[RowanMonterde]

I'm trying to add a navigation bar on top of the page, but it just isn't working correctly.

 

So in header.php I have:

 

 

<div id="header" class="grid_24">

<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

　

<script type="text/javascript">

$("#headerShortcuts").buttonset();

</script>

</div>

<table border="0" width="100%" cellspacing="0" cellpadding="2">

<tr>

<td>

<style media="all" type="text/css">@import "includes/menu_style.css";</style>

<div class="menu">

<ul>

<li><a id="current" href="" target="_self" >Home</a>

</li>

<li><a href="" target="_self" >About</a>

</li>

<li><a href="" target="_self" >Products</a>

</li>

<li><a href="" target="_self" >Contact</a>

</li>

<li><a href="" target="_self" >Site</a>

<ul>

<li><a href="" target="_self">Shipping & Returns</a></li>

<li><a href="" target="_self">Privacy Notice</a></li>

<li><a href="" target="_self">Conditions of Use</a></li>

</ul>

</li>

</ul>

</div>

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header infoBoxHeading"><?php echo ' ' . $breadcrumb->trail(' » '); ?></div>

</div>

</td>

</tr>

</table>

..........and so on and so forth.

Now here is the entire /includes/menu_style.css

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:#8e8e8e;

}

.menu ul{

background:url(images/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(images/current-bg.gif) top left repeat-x;

color:#ffffff;

}

With both of those things this is what my header looks like now:

<p class="menu">

• Home
  
• About
  
• Products
  
• Contact
  
• Site
  
  • Shipping & Returns
    
  • Privacy Notice
    
  • Conditions of Use
    

 

So it looks as if the <ul><li> codes worked, but I want it to look like an actual navigation bar with a drop down for "Site."

 

 

 

Thanks in advance for help!

-Row

[HPOS]

#nav-menu ul

{

list-style: none;

padding: 0;

margin: 0;

}

 

#nav-menu li

{

float: left;

margin: 0 0.15em;

}

 

#nav-menu li a

{

background: url(background.gif) #fff bottom left repeat-x;

height: 2em;

line-height: 2em;

float: left;

width: 9em;

display: block;

border: 0.1em solid #dcdce9;

color: #0d2474;

text-decoration: none;

text-align: center;

}

 

/* Hide from IE5-Mac \*/

#nav-menu li a

{

float: none

}

/* End hide */

 

#nav-menu

{

width:30em

}

 

Thanks. Try this one if this your looking for.