0

我正在尝试学习 HTML/CSS，在课程中我想创建一个基于 CSS 的下拉菜单导航栏。我阅读了几乎所有我能找到的教程并最终构建了它，但问题是它没有按预期工作，我让主菜单正常工作，但是列表没有显示。这是我的 HTML 的结构：

 <div id="Header"/>
 <div id="Navigation" > 
<ul id="Menu-H">

        <li id="HOME"><a href="#">HOME</a></li>

        <li id="ITEMS"><a href="#">ITEMS</a></li>
    <ul >
        <li><a href="#">New Item</a></li>
        <li><a href="#">Search Item</a></li>
    </ul>

        <li id="Category"><a href="#">CATALOG</a></li>

        <li id="Inventory"><a href="#">INVENTORY</a></li>

    </ul>
<a class="LogOutButton" href="#">LOG OUT</a>

这是我构建的 CSS：

#Menu-H {    
    padding: 0;
    margin: 0;
    list-style-type: none; 
    margin-left: 50px;      
}

#Menu-H  li {    
    float:left;
}

#Menu-H li:hover {    
    background: #f4f4f4;
    border-radius: 5px 5px 0px 0px;
}

#Menu-H  li  a {

    //border-left: 2px solid blue;
    //border-right: 2px solid blue;
    //background-color: white;
    display:block;
    padding: 5px 15px 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #FFFFFF
}

#Menu-H li:hover a {    
    color: #161616;
    text-shadow: 1px 1px 1px#FFFFFF;
}


/* Drop Down Menu.........*/

#Menu-H ul {    
    background: #161616;
    background:rgba(255,255,255,0);
    list-style: none;
    display: none;
}

Menu-H ul li {    
    padding-top: 1px;;
    float: none;    
}

Menu-H li:hover ul {    
    display:block;
}

#Menu-H li:hover a {    
    background: #6b0c36;        
}

#Menu-H li:hover ul li a:hover {    
    background: #333;
}

我找不到原因。

4

1 回答 1

0

您的 HTML 不正确，您需要将辅助元素<ul>放在父元素中<li> 

<ul id="Menu-H">

        <li id="HOME"><a href="#">HOME</a></li>
        <li id="ITEMS"><a href="#">ITEMS</a>
           <ul>
              <li><a href="#">New Item</a></li>
              <li><a href="#">Search Item</a></li>
          </ul>
        </li>   

        <li id="Category"><a href="#">CATALOG</a></li>
        <li id="Inventory"><a href="#">INVENTORY</a></li>

</ul>

此外，您忘记#在 CSS 中为两个 id-s 添加。这是我做的一个小提琴，你可以看到我做了一些我正在谈论的改变并且它有效：

http://jsfiddle.net/SJQ9B/

于 2012-10-21T09:02:00.213 回答