css设置下拉框，撑开下面的内容，且不影响整体布局

首先我们看一下需要达到的样子

鼠标移入到商品会有商品的基本信息的展示，且不影响下面的布局

下面开始堆代码

首先我们把整体的样式设置出来

html部分：

      <li class="cosmetics">
          <a href="#">
            <span>1</span>
            Za姬芮新能真皙美白隔离霜 35g 
          </a>
        </li>
        <li class="cosmetics">
          <a href="#">
            <span>2</span>
             美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml 
          </a>
          
        </li>
        <li class="cosmetics">
          <a href="#">
            <span>3</span>
             菲奥娜水漾CC霜40g
          </a>
          
        </li>
        <li  class="cosmetics">
          <a href="#">
            <span>4</span>
             DHC 蝶翠诗橄榄卸妆油 200ml 
          </a>
          
        </li>
        <li>
          <a href="#">
            <span>5</span>
             倩碧保湿洁肤水2号 200ml
          </a>
        </li>
        <li>
          <a href="#">
            <span>6</span>
            比度克细肤淡印霜 30g
          </a>
        </li>
        <li>
          <a href="#">
            <span>7</span>
            兰芝 (LANEIGE)夜间修护锁水面膜 80ml
          </a>
        </li>
        <li>
          <a href="#">
            <span>8</span>
            SK-II护肤精华露 215ml
          </a>
        </li>
        <li>
          <a href="#">
            <span>9</span>
            欧莱雅青春密码活颜精华肌底液
          </a>
        </li>

 css部分：

li {
  list-style: none;
  border-bottom: 1px dashed #676767;
}

a {
  text-decoration: none;
}
.nav {
  width: 320px;
  height: 237px;
  background-color: #fff;
}
header {
  padding: 5px;
  color: white;
  font-size: 16px;
  background-color: #e9185a;
}
/* 设置圆圈以及其属性 */
.nav > ul > li > a > span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #373b3c;
  text-align: center;
  line-height: 16px;
  color: white;
}
ul > li > a {
  color: #676767;
  font-size: 16px;
}

ul > li > a {
  font-size: 12px;
}
/* 鼠标移入圆圈变色 */
.nav > ul > li:hover span {
  background-color: #e9185a;
}
/* 鼠标移入字体变色 */
li:hover a {
  color: #e9185a;
}

接下来我们设置下拉框以及下拉框的动画效果

html部分

 
<div class="shopping">
            <a href="#">
              <img src="./大家都喜欢的彩妆img/icon-2.jpg" alt="" />
              <p>￥89.00 最近13610人购买</p>
            </a>
          </div>
//商品的基本信息展示

css部分

/* 设置下拉框 */
.cosmetics {
  overflow: hidden;        //溢出的部分隐藏
  width: 320px;
  height: 20px;
  transition: all 0.5s;    //设置旋转
}

.shopping > a > img {
  margin-left: 70px;
}
.shopping > a > p {
  text-align: center;
  color: red;
}

设置hover效果，让鼠标移入到商品时，展示商品的基本信息

.nav > ul > .cosmetics:hover {
  height: 220px;
}