Question

我已经开始开发一个网站：www.bossfakeid.co.uk - 在它所说的产品的导航栏中，我需要它来实现这个下拉菜单：http://codepen.io/williamjamesclark/pen/HynGo - 所有我需要的是下拉菜单菜单和插入符号。没有别的，我可以改变颜色。请帮帮我。

提前致谢！

Answer 1

首先，您需要在<ul>内设置一个<li>您想拥有一个子菜单。

<li>
      <a href="#" >Products<span style="color:#1D8A4C">▼</span></a>
      <ul class="submenu">
      <li><a href="">Submenu item</a></li>
      <li><a href="">Submenu item</a></li>
      <li><a href="">Submenu item</a></li>
      <li><a href="">Submenu item</a></li>
      </ul>
</li>

然后，需要以下css来正确设置样式：

.submenu {
  position: absolute; /*1*/
  border-top: 15px solid transparent; /*2*/
  left: -9999px /*3*/
}

 li:hover > .submenu {
  left: -50px;
}



.submenu:before {
 content: ""; 
 position: absolute;
 z-index: 1; /* bring in front of border */
 margin-top: 5px; /*1*/
 left: -9999px; /*2*/
 top: -15px;
 /* borders for up arrow */
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #34495e;
}

.submenu > li:first-of-type {
  border-radius: 5px 5px 0 0; /*1*/
}

/*
  1. bottom rounded edges on submenu
*/
.submenu > li:last-of-type {
  border-radius: 0 0 5px 5px; /*1*/
}

.submenu a {
  font-size: 90%; /*1*/
  margin: 3px; /*2*/
  border-radius: 5px;
  transition: background ease .3s; /*3*/
}

/* 
  submenu hover styles
*/
.submenu a:hover {
  background: #2AC56C;
}
.submenu li {
  background:#3B3B3B;
}
#menu .active a {
    background: none repeat scroll 0% 0% #2AC56C;
    border-radius: 5px;
}
.submenu:before {
 content: ""; 
 position: absolute;
 z-index: 1; /* bring in front of border */
 margin-top: 5px; /*1*/
 left: 100px; /*2*/
 top: -15px;
 /* borders for up arrow */
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #3B3B3B;
}

Here is a JSFiddle with the proper coding and example 您将需要研究用于菜单构建的CSS：
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
Google before you ask

添加HTML / CSS下拉列表到导航

1 个答案: