Question

我遇到了如何编写下拉菜单的问题。我只是希望我的投资组合菜单有一个下拉列表，所以我可以在其上放置其他子级别。有人可以帮帮我吗？

这是我的示例代码：

HTML

<div id="wrap">
    <div class="top_corner"></div>
    <div id="main_container">

        <div id="header">
            <div id="logo"><a href="index.html"><img src="images/cc.gif" alt="" title="" border="0" /></a></div>

            <div id="menu">
                <ul>
                    <li><a href="index.html" title="">Home</a></li>
                    <li><a href="about.html" title="">AboutMe</a></li>
                    <li><a class="current" href="gallery.html" title="">Portfolio</a></li>
                    <li><a href="forum.html" title="">What Do I Do</a></li>
                    <li><a href="contact.html" title="">Contact Me</a></li>
                </ul>
            </div>
        </div>

        <div class="center_content_pages">
            <center>
                <table id = "models">
                    <tr>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                    </tr>
                    <tr>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                    </tr>
                    <tr>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                        <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td>
                    </tr>
                </table>
            </center>
        </div>

        <div class="footer">
            <div class="copyright">Copyright 2015, Chriselle Cristobal</div>
        </div>

        <footer>
            <ul>
                <li><a href="https://www.facebook.com/chrisellecristobal?fref=ts">Facebook</a></li>
                <li><a href="https://twitter.com/LolaSeeelya">Twitter</a></li>
                <li><a href="https://instagram.com/chrcrstbl/">Instagram</a></li>
            </ul>
        </footer>

    </div>

Answer 1

在<ul>内加<li>来实现此目标

<div id="menu">
        <ul>                                                                                            
            <li><a href="index.html" title="">Home</a></li>
            <li><a href="about.html" title="">AboutMe</a></li>
            <li><a class="current" href="gallery.html" title="">Portfolio</a>
                <ul>
                    <li><a href="proj1.html" title="">Project1</a></li>
                    <li><a href="proj2.html" title="">Project2</a></li>
                    <li><a href="proj3.html" title="">Project3</a></li>
                </ul>
            </li>
            <li><a href="forum.html" title="">What Do I Do</a></li>
            <li><a href="contact.html" title="">Contact Me</a></li>
        </ul>
</div>

Answer 2

这是一个完整的例子：

#menu li:hover ul {
  display: block;
}
#menu {
  display: block;
  position: relative;
}
#menu ul {
  margin: 0;
  padding: 0;
}
#menu ul li {
  position: relative;
  float: left;
  list-style-type: none;
  padding: 10px;
  background-color: #DDD;
}
#menu ul ul {
  position: absolute;
  display: none;
  left: 0;
  width: 0;
}

<div id="menu">
  <ul>
    <li><a href="index.html" title="">Home</a></li>
    <li><a href="about.html" title="">AboutMe</a></li>
    <li><a class="current" href="gallery.html" title="">Portfolio</a>
      <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
      </ul>
    </li>
    <li><a href="#">last one</a></li>
  </ul>
</div>

html中的下拉菜单

2 个答案: