Hello,
Thanks for looking. I am working on re-designing the header portion of a website, and it seems to be working fine in the browser, however, when I view it on my smartphone the navigation links are not appearing.

The version I'm working on can be seen at www.furniturelab.com/_headertest4.cfm

Also, I want the entire navigation to stay centered in the browser window when it resizes, rather than left-aligned.

Lastly, I would like to use a small icon above the navigation link to indicate the current page that is selected. Does anyone know how I would go about doing this?

Any help in these areas, plus any code improvements would be much appreciated.

CSS:

Code:
<style>

.body {
	margin:0px;
	padding:0px;
	display:block;
}

#headerContainer {
	width:940;
	height:150;
	background:#F99;
	display:block;

}

#logoContainer {
	float:left;
	position:relative;
	display:block;

}

#phoneContainer {
	height:35px;
	position:absolute;
	float:right;
	display:block;
	left:750px;
	top:-10px;
}

#searchBox {
	position:absolute;
	left:750px;
	width:150px;
	top:30px;
	float:right;
	 display:block;
}

/* defines rounded corners, green gradient & drop shadow */

#navBar1{
	position:absolute;
	left:400px;
	width:350px;
	float:right;
}

#navBar1 ul ul{
display:none;
top:0px;
left:0px;
color:#F30;
}

/* Get rid of any margin/padding & set list style to none */

#navBar1 ul {
	width:375px;
padding:0;
margin:0;
list-style:none;
position:fixed;
top:75px;
left:550px;
z-index:5;
color:#F30;
}

/* Change display mode to block & float each list item to left */

#navBar1 ul li{
display:block;
float:left;
padding-top:0px;
padding-bottom:0px;
color:#F30;
}

#divider {
	position:relative;
	width:100%;
}

#navBar1 ul li a{
display:block;
padding:0px;
padding-left:10px;
padding-right:13px;
color:#333;
text-decoration:none;
font-family:Helvetica Neue Light, Helvetica, sans-serif;
font-size:80%;
}

#navBar1 ul li a:active{
	display:inline;
	widows:100%;
	height:100%;
	background-image:url(/images/menu-marker.jpg);
	background-repeat:no-repeat;
	background-position:center;
}

/* Change Font color & underline with hover */

#navBar1 ul li a:hover{ 
color:#F60;
text-decoration:none;
z-index:5;
}

/*Change position to absolute */

#navBar1 ul ul{
position:fixed;
top:15px;
width:400px;
/* border:thin solid #849c92; */
font-size:70%;
display:none;
}

/* Adds hover popup to nav items */ 

#navBar1 ul li:hover ul{
position:absolute;
display:block;
color:#F60;
z-index:5;
}

/* Add a bit of padding */

#navBar1 ul ul li{
padding:0;
padding-top:5px;
padding-bottom:2px;
}

/*Change text color */

#navBar1 ul ul li a{
border:none;
color: #333;
}

#navBar1 ul ul li a:active{
color: #F60;
}

#navBar1 ul ul li a:visited{
color: #333;
}


/* Link hover color */

#navBar1 ul ul li a:hover{
color: #F60;
}


.showingItems {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333300;
}

.showingItems a:visited {
	color:#666;
}

.red {
	color: #F30;
}

body#home a#nav-home,
body#products a#nav-products,
body#gallery a#nav-gallery,
body#about a#nav-about
{
border: 1px red;
}

</style>
HTML:
Code:

<!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>Untitled Document</title>

</head>

<body id="navigation">

	<div align="center" id="headerContainer">

		<div id="logoContainer">
        
			<a href="http://furniturelab.com/"><img src="/FL-logo.jpg" border="0" alt="FurnitureLab logo" width="271" height="68" style="padding:5px;"></a>
    		</div>
   
   <!--Phone Number & Search Box -->
     <div id="phoneContainer">
    
  <FORM method="get" action="search_results.cfm">
      <p align="right" valign="top">
      
      	<img src="images/phone2009_2.jpg" alt="800.449.8677" name="Phone" width="148" height="22">      </p> 
        </div>
        
	<div id="searchBox"> 
        
<cfoutput>
                <input name="keyword" type="text" class="textbox-search" id="keyword" size="10" value="#session.keyword#">
                <input name="Submit" type="submit" class="showingItems" value="Search">
              </cfoutput>
  </FORM></div>

  
  <!--Navigation-->

<div id="navBar1" style="position:fixed;width:300px;overflow:hidden;clear:both";>

	<ul>
		<li class="headerList1"><a href="http://furniturelab.com" class="red"> Home</a>
  </li>
        
		<li class="headerList1"><span><a href="http://furniturelab.com/table_design.cfm"> Products</a></span>
			<ul>
				<li> <a href="http://furniturelab.com/seating_chair.cfm"> Seating </a></li>
				<li> <a href="http://furniturelab.com/table_design.cfm"> Table Tops </a></li>
				<li> <a href="#"> Table Bases </a></li>
                <li> <a href="#"> Booths </a></li>
                <li> <a href="#"> Trash Units</a></li>
            </ul>
       </li>
       
        <li class="headerList1"><span><a href="#"> Markets</a></span>
            <ul>
                <li> <a href="#"> Healthcare </a></li>
                <li> <a href="#"> Hospitality</a></li>
                <li> <a href="#"> Education </a></li>
                <li> <a href="#"> Corporate </a></li>
				<li> <a href="#"> Shopping Malls </a></li>

            </ul>
        </li>

        <li class="headerList1"><span><a href="#"> Resources</a></span>
            <ul>
                <li> <a href="#"> Reps </a></li>
                <li> <a href="#"> Gallery </a></li>
                <li> <a href="#"> GSA & State Contracts </a></li>
                <li> <a href="#"> 2D/3D Models </a></li>
                <li> <a href="#"> Contests</a></li>
            </ul>
        </li>

        <li><span><a href="#"> Contact</a></span>
            <ul>
                <li> <a href="#"> Quote Request </a></li>
                <li> <a href="#"> Catalog Request </a></li>
                <li> <a href="#"> Our Story </a></li>
           </ul>
       </li>

    </ul>
    

</div>

<div style="float:left;position:relative;top:2px;z-index:4">
<img src="/images/Divider.jpg" width="900" />
    </div>

</div></body>
    

</body>

</html>