首页 > 其他 > 详细

手写下拉菜单

时间:2021-08-24 20:48:43      阅读:30      评论:0      收藏:0      [点我收藏+]

html

 <li>
            <a :href="publicPath + ‘matsui.html‘"
              >关于松井
              <div class="nav_matsui">
                <p><a :href="publicPath + ‘matsui/idea.html‘">经营理念</a></p>
                <p><a :href="publicPath + ‘matsui/profile.html‘">公司概要</a></p>
                <p><a :href="publicPath + ‘matsui/message.html‘">最新资讯</a></p>
                <p><a :href="publicPath + ‘matsui/evolution.html‘">历史沿革</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;
}
 
效果如下
 
技术分享图片

 

 

 

手写下拉菜单

原文:https://www.cnblogs.com/yangcaicai/p/15181572.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!