手写下拉菜单

html

 <li>

            <a :href="publicPath + 'matsui.html'"

              >关于松井

              <div class="nav_matsui">

                <p><a :href="***">经营理念</a></p>

                <p><a :href="***'">公司概要</a></p>

                <p><a :href="***">最新资讯</a></p>

                <p><a :href="**'">历史沿革</a></p>

              </div>

            </a>

          </li>

 

css

/*提示框容器-上三角形*/

.nav_product {

  width: 290px;

  height: 470px;

  position: absolute;

  top: 326%;

  left: -165%;

  border-radius: 5px;

  box-shadow: 3px 3px 20px #888888;

  background: #fff;

  visibility: hidden;

  transition: all 0.3s;

  z-index: 100;

}

/*生成2个叠加的三角形*/

.nav_product:before,

.nav_product:after {

  content: "";

  display: block;

  border-width: 15px;

  position: absolute;

  top: -30px;

  left: 130px;

  border-style: solid dashed dashed solid;

  border-color: transparent transparent #fff transparent;

  font-size: 0;

  line-height: 0;

}

/*将上面的三角形颜色设置和容器背景色相同*/

.nav_product:after {

  top: -27px;

  border-color: transparent transparent #fff transparent;

}

.nav_right_left li:nth-child(4) a:hover .nav_product {

  visibility: visible;

}

.nav_product p {

  text-align: center;

  color: #222222;

  font-weight: 900;

  padding: 15px 0;

}

.nav_product p:nth-child(1) {

  margin-top: 25px;

}

.nav_product p:hover {

  color: #3abde6;

  background: #f5f6f7;

}

 

效果如下