下拉菜单不工作 - Drop down menu is not working?

Drop down menu is not working?

本文关键字：工作下拉菜单 | 更新日期: 2023-09-27

我开始开发我的网站，坦率地说，我下载了网站布局并开始编辑代码。一开始我有一个普通菜单但现在我想把它改成下拉菜单并在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;  }

Thanks in Advance

尝试关闭三个<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; }