Question

我正在尝试向我的“项目”菜单项添加下拉功能，如图所示[第1/2/3页]。有没有一种有效的方法来做到这一点？（如果适用，欢迎使用jQuery解决方案）

（出于某种原因，在JSFiddle中拉伸了Projects元素，但无论如何它仍然有效）

<html>
 <header id="header">
  <div class="container">
   <img src="<!--logo-->"/>
   <nav id="nav">
    <ul>
     <li>
      <a href="portfolio.html">Portfolio</a>
     </li>
     <li><a href="#">Projects</a>
      <ul>
       <li><a href="page1.html">Page 1</a></li>
       <li><a href="page2.html">Page 2</a></li>
       <li><a href="page3.html">Page 3</a></li>
      </ul>
     </li>
     <li>
      <a href="contact.html">Contact</a>
     </li>
    </ul>
   </nav>
  </div>
 </header>
</html>

1：

Answer 1

＆＃13;

ul{width:100%}
li{height:0;overflow:hidden;background:#888;transition:.2s.4s}
ul:hover li{height:20px}

＆＃13;

<ul>Hover me
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>

＆＃13;

Answer 2

使用ul ul { display: none; }隐藏嵌套菜单，并触发隐藏/嵌套ul以显示li:hover > ul { display: block; }。

＆＃13;

.container {
  position: relative;
  margin: 0 auto;
  width: 94%;
  max-width: 1100px;
  font-family: helvetica, sans-serif;
}

#nav {
  position: absolute;
  right: 0;
  top: -15px;
  height: 60px;
  text-transform: uppercase;
  font-weight: bold;
}

#nav ul li {
  float: left;
  list-style: none;
}

#nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 0 10px;
}

#header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #222;
  color: white;
}

#header img {
  width: 180px;
  height: 60px;
}

#header h1 {
  top: 0px;
  margin: 0px;
  font-size: 1.75em;
}


/* unvisited link */

a:link {
  color: blue;
}


/* visited link */

a:visited {
  color: purple;
}


/* mouse over link - Nav*/

#nav a:hover {
  color: black;
  background-color: gold;
}


/* mouse over link - regular*/

.back a:hover {
  color: blue;
}


/* selected link */

a:active {
  color: blue;
}

ul ul {
  display: none;
  position: absolute;
  background: #222;
  padding: 0;
}

#nav ul ul li {
  float: none;
}

li:hover > ul {
  display: block;
}

＆＃13;

<header id="header">
  <div class="container">
    <img src="<!--logo-->" alt="logo placeholder" />
    <nav id="nav">
      <ul>
        <li>
          <a href="portfolio.html">Portfolio</a>
        </li>
        <li><a href="#">Projects</a>
          <ul>
            <li><a href="page1.html">Page 1</a>
              <li><a href="page2.html">Page 2</a></li>
              <li><a href="page3.html">Page 3</a></li>
          </ul>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
      </ul>
    </nav>
  </div>
</header>

＆＃13;

Answer 3

您应该添加一些类来进行下拉列表。首先隐藏页面列表，并在悬停链接时显示block中的链接。

<li class="dropdown"><a href="#">Projects</a>
<ul class="dropdown-menu">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</li>

CSS

.dropdown {
  position : relative;
  display : block;
}
.dropdown-menu {
    display : none;
    position: absolute;
    background-color: black;
    min-width: 90px;
    padding: 12px 16px;
    z-index: 1;
}
.dropdown:hover > .dropdown-menu {
  display : block;
}

Answer 4

你使用过bootstrap吗？如果是，请参阅以下链接。

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

尝试在现有导航栏上添加下拉项

4 个答案: