-1

我开始开发我的网站，坦率地说，我下载了网站布局并开始编辑代码。开始我有一个普通菜单，但现在我想将其更改为下拉菜单并在 index.xhtml 代码中编写我的代码为

<ul id="nav">
  <ul id="nav-pages">
    <li><a href="index.html" class="current">Home</a></li>
   <li>
    <a href="octet2.xhtml">Oracle</a>
    <ul>
<li><a href="octet2.xhtml">Sql</a></li>
        <li><a href="octet2.xhtml">Pl Sql</a></li>
  </ul>
  </li>
  </ul>

这是我的 .css 代码

#nav { float: left; width: 100%; overflow: hidden; position: relative; margin: 40px 0 0   0; border-top: 5px #eee solid;border-bottom: 5px #eee solid; padding: 12px 0 8px 0; z-index: 999; display: block;  }

#nav ul { clear: left; float: left; margin: 0; padding: 0; position: relative; left: 50%; text-align: center;display: block;  }
#nav ul li { float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%;  }
#nav ul li a {  margin: 0 0 0 1px; padding: 3px 0; font-size: 16px; color: #444; text-transform: uppercase;}
#nav ul li a:hover { color: #0072bc; display: block;  }
#nav li span { padding: 0 20px; color: #444; font-size: 16px; } 
#nav li a.current{ color: #0072bc;  }

提前致谢

4

1 回答 1

0

尝试关闭您的三个<ul>或发布整个代码。

<ul id="nav">
    <ul id="nav-pages">
        <li><a href="index.html" class="current">Home</a><span></span></li>
        <li><a href="octet2.xhtml">Oracle</a>
            <ul>
                <li><a href="octet2.xhtml">Sql</a></li>
                <li><a href="octet2.xhtml">Pl Sql</a></li>
            </ul></li>
    </ul>
</ul>

编辑：你的CSS是错误的

#nav { float: left; width: 100%; overflow: hidden; position: relative; margin: 40px 0 0   0; border-top: 5px #eee solid;border-bottom: 5px #eee solid; padding: 12px 0 8px 0; z-index: 999; display: block;  }

#nav ul {  clear: left; float: left; margin: 0; padding: 0; position: relative; left: 50%; text-align: center;display: block;  }
#nav li:hover ul { left: 0;}//that one display the subcategories
#nav ul li { float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; width: 150px;  }
#nav li ul {left: -9999px;}// that one hide them when not in hover state
#nav ul li a {  margin: 0 0 0 1px; padding: 3px 0; font-size: 16px; color: #444; text-transform: uppercase;}
#nav ul li a:hover { color: #0072bc; display: block;  }
#nav li span { padding: 0 20px; color: #444; font-size: 16px; }
于 2013-06-10T16:40:18.817 回答