Question

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

先谢谢

Answer 1

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

下拉菜单不起作用？

1 个答案: