Question

我有一个现有的网站，下面有菜单代码，我想在我的网站上添加更多内容，但是用户需要直接访问这些页面，请帮我在下拉菜单中添加一个子菜单。请帮帮忙？

HTML：

<!-- Header -->
<div id="header">
  <div id="nav-wrapper"> 
    <!-- Nav -->
    <nav id="nav">
      <ul>
        <li class="active"><a href="index.html">Homepage</a></li>
        <li><a href="left-sidebar.html">Left Sidebar</a></li>
        <li><a href="right-sidebar.html">Right Sidebar</a></li>
        <li><a href="no-sidebar.html">No Sidebar</a></li>
      </ul>
    </nav>
  </div>
</div>

CSS：

#nav {
}

#nav-wrapper {
    background: rgba(0,0,0,.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#nav > ul {
    margin: 0;
    padding: 0;
    text-align: center;         
}

#nav > ul > li {
    display: inline-block;
    border-right: 1px solid;
    border-color: rgba(255,255,255,.1);
}

#nav > ul > li:last-child {
    padding-right: 0;
    border-right: none;
}

#nav > ul > li > a, #nav > ul > li > span {
    display: inline-block;
    padding: 1.5em 1.5em;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    outline: 0;
    color: #FFF;
}

#nav li.active a {
    color: #FFF;
}

#nav > ul > li > ul {
    display: none;
}

#nav li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

Answer 1

CSS：

#nav
{
}

#nav-wrapper
{
    background: rgba(0,0,0,.1);
    text-align:center;
    margin:0;
    padding:0;
    width: 100%;
}


#nav ul {
  display: inline;
  margin: 0;
  padding: 0;
  text-align: center; 
  padding: 15px 4px 17px 0;
  list-style: none;
  border-right: 1px solid;
  border-color: rgba(255,255,255,.1);
  color: white;
}
ul li {
  border-right: 1px solid;
  border-color: rgba(255,255,255,.1);
  display: inline-block;
  margin: -4px;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-align: center; 
  color: white;
}
ul li:hover {
  border-right: 1px solid;
  border-color: rgba(255,255,255,.1);
  color: white;
}
ul li ul {
  position: absolute;
  top: 90px;
  left: 0;
  width: 200px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  border-right: 1px solid;
  border-color: rgba(255,255,255,.1); 
  background: rgba(0,0,0,.1);
  display: block; 
  text-transform: uppercase;
  font-size: 1.1em;
  outline: 0;
  color: #FFF;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


#nav  ul  li  a,
#nav  ul  li  span
{
    display: inline-block;
    padding: 1.5em 1.5em;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    outline: 0;
    color: #FFF;
}

#nav li.active a
{
    color: #FFF;
}

HTML：

<div id="header">
    <div id="nav-wrapper"> 
        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li class="active"><a href="index.html">Homepage</a></li>
                <li><a href="pictures.html">Pictures</a>
              <ul>
                  <li><a href="#xcv">test</a></li>
                  <li><a href="#xcv">test2</a></li>
              </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>

            </ul>
        </nav>
    </div>

JSFIDDLE DEMO

Answer 2

更改您的CSS

    #nav li:hover > ul
    {
        opacity: 1;
        display: block;
        margin: 0;
        position:absolute;
        background:green;
    }

<nav id="nav">
    <ul>
        <li class="active"><a href="index.html">Homepage</a>
        <ul>
            <li><a href="index.html">Homepage</li>
            <li><a href="pictures.html">Pictures</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        </li>
        <li><a href="pictures.html">Pictures</a></li>
        <li><a href="contact.html">Contact</a></li>

    </ul>
</nav>

如何添加下拉菜单？

2 个答案: