Css 子菜单赢得'；不要横着走

我知道其他人问过这个问题，但我就是不能让我的子菜单水平

这是我的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>

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

---

我的课程作业需要这个，所以请帮忙。

嘿，我已经为你创建了小提琴，请检查这个

---

您能否编辑您的问题，以更具体地指出您试图实现的行为？你说的“水平”相当含糊。很抱歉说得太含糊了。我有水平菜单，菜单中的一个项目上有一个子菜单。不管我怎么做，这个子菜单都不会在线显示。非常感谢你的帮助。我真的很感激。你不会相信这一点，但它仍然不起作用。我做了所有必要的调整，我甚至注释掉了导航css中的一位，在那里我有一堆东西要显示：block，它仍然是垂直的，而不是水平的。这很令人沮丧。不过我很感谢你的帮助。为什么不发一张截图呢。我不能添加一张图片，因为我的声誉只有一张，至少需要十张。我可以发电子邮件给你吗？是的，请。。cooolkiran@gmail.com

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

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