子菜單將不會水平

Question

我知道其他人已經問過這個問題，但我無法讓我的子菜單變得水平。

這裏是我的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><a href="index.html"> <!--id="home"-->Home</a></code></li> 
<li><code><a href="about.html">About Us</a></code></li> 
<li><code><a href="index.html" class="MenuBarItemSubmenu">Portfolio</a> 
    <ul> 
     <li><a href="#">Commercial</a></li> 
     <li><a href="#">Residential</a></li> 
     <li><a href="#">Heritage</a></li> 
     <li><a href="#">Renovations/Additions</a></li> 
    </ul> 
</code></li> 
<li><code><a href="services.html">Services</a></code></li> 
<li><code><a href="contact.html">Contact us</a></code></li> 
</ul> 
</nav> 
</header> 

，這裏是我的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; 
} 

，這裏是從Dreamweaver中的CSS：

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; 
} 
} 

我需要爲我的課程作業，所以請幫忙。

Answer 1

嘿，我已經創造搗鼓你請這個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; 
}