HTML 子菜单不起作用

Question

我正在尝试制作一个带有下拉菜单的网站。在阅读了几本指南甚至在这里搜索之后，菜单一直在做奇怪的事情。我尝试了很多东西，所以有些行可能会变得多余。

子菜单不在菜单下面，而是在菜单旁边。

有人可以帮助我吗？提前谢谢

html:

<div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
            <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
            <ul>
            <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
            <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
            </ul></li>

            <li><a href="#" accesskey="3" title="">About Us</a></li>
            <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a></li>
            <li><a href="#" accesskey="5" title="">Contact Us</a>

            </li>
        </ul>
    </div> <!-- menu -->

CSS:

#menu
{
    position: absolute;
    right: 0;
}

#menu ul
{
    display: inline-block;
    line-height: 1em;
    position: relative; /* naast elkaar*/
    right: 0;
    top: 2em;
    list-style: none;
    /*display: inline-table;*/
}
/*
#menu ul: after
{
        content: ""; 
        clear: both; 
        display: inline-block;
}*/

#Menu ul ul {
display: none;
}
/*
#Menu ul li:hover > ul 
{
    display: inline-block;
    }

*/
#menu ul li
{
    float: left; /* op een lijn */
    margin-left: 0.50em;
    padding: 1em 1.5em;
    letter-spacing: 0.20em;
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    color: #OOC;
    outline: 0;
}
#menu ul li:hover {
        background: #00F;
}
#menu ul li:hover a {
            color: #FFF;
}


#menu ul li a /*#menu ul li span*/
{
    display: inline-block
    margin-left: 0.50em;
    letter-spacing: 0.20em;
    text-decoration: none; /* geen onderlijning*/ 
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    color: #OOC;
}


#menu ul ul /* submenu*/
{
    background: #00F;
    top: 100%;
    padding: 0;
    position: absolute; 
    visibility: hidden;
}

#menu ul:hover ul
{
    visibility:visible;
}
#menu ul ul li
{
    float: none; /*onder mekaar */
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    position: relative;
    color: #FFF;
}

Answer 1

这将帮助您:

HTML

<div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="#" accesskey="3" title="">About Us</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="#" accesskey="5" title="">Contact Us</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
        </ul>
    </div>

样式表

#menu {
  position: absolute;
  right: 0;
}
#menu ul {
  display: inline-block;
  line-height: 1em;
  position: relative;
  /*right: 0;*/

  top: 2em;
  list-style: none;
}
#menu ul li {
  float: left;
  padding: 1em 1.5em;
  letter-spacing: 0.20em;
  font-size: 0.90em;
  font-weight: 600;
  text-transform: uppercase;
  color: #00C;
  outline: 0;
}
#menu ul li a {
  display: inline-block;
  margin-left: 0.50em;
  letter-spacing: 0.20em;
  text-decoration: none;
  font-size: 0.90em;
  font-weight: 600;
  text-transform: uppercase;
  outline: 0;
  color: #00c;
}
#menu ul li:hover {
  background: #00F;
}
#menu ul li:hover a {
  color: #FFF;
}
#menu ul:hover ul {
  visibility: visible;
}
#menu ul ul {
  /*display: none;*/

  background: #00F;
  top: 100%;
  padding: 0;
  position: absolute;
  visibility: hidden;
}
#menu ul ul li {
  float: none;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  position: relative;
  color: #FFF;
}

这是 Demo