HTML+CSS+JS练习设计06-补充

个人练习，在csdn做记录

练习设计06，补充一个带箭头的矩形框，这种写法也经常用来做对话框

效果视频：

模拟京东-01补充

代码内容就不重复记录，在练习设计06找到对应位置插进去

html内容：

<div class="model1-item model1-item9">
    <span>手机京东</span>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</div>

css内容：

model-1.css

.model-1 .model1-item9 ul{
    position: absolute;
    background-color: #ffffff;
    width: 100px;
    top: 50px;
    border: 1px solid #9b9b99;
    display: none;
}
.model-1 .model1-item9:hover:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 30px;
    border: 10px solid;
    border-color: transparent transparent #9b9b99;
    left: 33px;
}
.model-1 .model1-item9:hover:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 32px;
    border: 10px solid;
    border-color: transparent transparent white;
    left: 33px;
}
.model-1 .model1-item9:hover ul{
    display: block;
}