Submenu won't go horizontal - css

Question

I know others have asked this question, but I just cannot get my submenu to go horizontal.
Here's my html:
<div id="main">
<header>
<h1 id="hheading">Australian Design Architects</h1>
<img src="logo2.gif" alt="ADA LOGO" width="100" height="100" id="himg" />
<nav>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><code> <!--id="home"-->Home</code></li>
<li><code>About Us</code></li>
<li><code>Portfolio
<ul>
<li>Commercial</li>
<li>Residential</li>
<li>Heritage</li>
<li>Renovations/Additions</li>
</ul>
</code></li>
<li><code>Services</code></li>
<li><code>Contact us</code></li>
</ul>
</nav>
</header>
and here's my css:
nav {
font-size: 18px;
position: absolute;
padding-top: 50px;
padding-left: 140px;
padding-bottom:50px;
zoverflow:visible;
}
nav ul{
list-style: none;
float: left;
margin:0;
padding:0;
zclear: both;
}
nav ul li{
float:left;
display:inline;
}
nav ul li:after{
content:'|';
}
nav li a {
font-family:'flux_architect_regular', sans-serif;
text-decoration:none;
text-shadow: 1px 1px #333;
}
nav ul ul li a{
border:1px solid #000;
position:absolute;
display: inline-block;
overflow:hidden;
zwidth:550px;
zleft:0;
zlist-style:none;
zfloat: left;
zclear: both;
zmargin-left:-200px;
zpadding:100px;
}
and here's the css from dreamweaver:
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 9.2em;
float: left;
}
#MenuBar1 li code #home {
text-align: center;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal a
{
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #6a8c3f;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #6a8c3f;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
#media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
I need this for my course assignment, so please help.

Answer 1

hey i have created fiddle for you please check this link
http://jsfiddle.net/cooolkiran/zL2xR/
nav {
font-size: 18px;
position: absolute;
padding-top: 50px;
padding-left: 140px;
padding-bottom:50px;
zoverflow:visible;
}
nav ul {
list-style: none;
float: left;
margin:0;
padding:0;
zclear: both;
}
nav ul li {
float:left;
display:inline;
}
nav ul li:after {
content:'|';
}
nav ul li:last-child:after {
content:'';
}
nav li a {
font-family:'flux_architect_regular', sans-serif;
text-decoration:none;
text-shadow: 1px 1px #333;
padding:5px;
}
nav ul ul {
display:none;
}
nav ul li:hover ul {
display:block;
position:absolute;
width:auto;
left: 56px;
}
nav ul li li {
display:inline-block;
}
nav ul ul li a {
border:1px solid #000;
display: inline-block;
}