Question

我正在尝试制作CSS下拉菜单，但只是使用CSS来保持简单，所以我有一个UL结构化导航菜单，如下所示：

<div class="navbar">
    <ul>
        <li><a href="source/home.php">Home</a></li>
        <li><a href="challenge">placeholder</a></li>
        <li>PVP</li>
            <ul class="inner">
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
            </ul>
        <li>PVE</li>
            <ul class="inner">
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
            </ul>
        <li>Other Services</li>
            <ul class="inner">
                <li><a href="source/placeholder.php">placeholder</a></li>
            </ul>
        <li><a href="source/contact.php">placeholder</a></li>
    </ul>
</div>

现在，我已经使用Display：none隐藏了类“inner”。而且我想在某个父母李某被徘徊的时候这样做，然后就会出现相关的内心。怎么样我最好的方法呢？请让我认识一下，或者你有更好的方法来制作下拉列表？

Answer 1

您的HTML无效。

不要关闭＆＃34; li＆＃34;这么早

    <li>PVE</li>
        <ul class="inner">
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
        </ul>

正确的HTML是：

    <li>PVE
        <ul class="inner">
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
        </ul>
    </li>

和css现在：

.navbar li {
    position: relative;
}
.navbar ul.inner {
    display: none;
    position: absolute;
    top: 20px; // edit it
    left: 0px; // edit it
}
.nav li:hover ul.inner {
    display: block;
}

我希望它有所帮助。

Answer 2

首先，您需要将内部菜单放在li元素中，以便能够对齐它们。

接下来你要将内部的位置设置为absolute，这样当它们下拉时它不会弄乱导航栏。

然后是一些整容，这里有一个例子：Fiddle

Answer 3

您可以快速轻松地创建纯css菜单：http://cssmenumaker.com/pure-css-menus

DEMO：http://jsfiddle.net/NZ6EF/

<强> HTML

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

<强> CSS

#cssmenu {
  width: auto;
  border: 1px solid #6b6363;
  background: #6b6363;
}
#cssmenu > ul {
  padding: 1px 0;
  margin: 0px;
  list-style: none;
  width: 100%;
  height: 21px;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  font: normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  position: relative;
  width: 148px;
}
#cssmenu > ul li a:link,
#cssmenu > ul li a:visited {
  padding: 4px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #6b6363;
  color: #ffffff;
  width: 148px;
}
#cssmenu > ul li:hover a,
#cssmenu > ul li a:hover,
#cssmenu > ul li a:active {
  padding: 4px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #928989;
  color: #ffffff;
  width: 146px;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
#cssmenu > ul li ul {
  margin: 0;
  padding: 1px 1px 0;
  list-style: none;
  display: none;
  background: #ffffff;
  width: 146px;
  position: absolute;
  top: 21px;
  left: -1px;
  border: 1px solid #6b6363;
  border-top: none;
}
#cssmenu > ul li:hover ul {
  display: block;
}
#cssmenu > ul li ul li {
  clear: left;
  width: 146px;
}
#cssmenu > ul li ul li a:link,
#cssmenu > ul li ul li a:visited {
  clear: left;
  background: #6b6363;
  padding: 4px 0;
  width: 146px;
  border: none;
  border-bottom: 1px solid #ffffff;
  position: relative;
  z-index: 1000;
}
#cssmenu > ul li ul li:hover a,
#cssmenu > ul li ul li a:active,
#cssmenu > ul li ul li a:hover {
  clear: left;
  background: #928989;
  padding: 4px 0;
  width: 146px;
  border: none;
  border-bottom: 1px solid #ffffff;
  position: relative;
  z-index: 1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 145px;
  top: -2px;
  padding: 1px 1px 0 1px;
  border: 1px solid #6b6363;
  border-left: 1px solid #6b6363;
  background: #ffffff;
  z-index: 900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
  display: block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link,
#cssmenu > ul li ul li ul.navigation-3 li a:visited {
  background: #6b6363;
}

CSS Hover属性

3 个答案: