为啥把i的绝对定位去掉就看不见它了

来源：2-3 页面顶部的开发（2）

慕仙2169824

2020-12-11 14:11:00

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕云游商城 - 机票、酒店、旅游攻略</title>
    <meta name="Keywords" content="机票,酒店,旅游攻略,签证,出国,自由行">
    <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/css.css">

</head>

<body>
    <header class="site-head">
        <div class="top-bar">
            <div class="center-wrap"> 
                <nav class="shortcut-links">
                    <ul>
                        <li><a href="">目的地</a></li>
                    </ul>

                    <ul>
                        <li><a href="">锦囊</a></li>
                    </ul>

                    <ul>
                        <li class="have-menu">
                            <a href="">社区</a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>

                    </ul>

                    <ul>
                        <li><a href="">行程助手</a></li>
                    </ul>

                    <ul>
                        <li  class="have-menu"><a href="">商城</a></li>
                    </ul>

                    <ul>
                        <li  class="have-menu"><a href="">酒店·民宿</a></li>
                    </ul>

                    <ul>
                        <li><a href="">特价酒店</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
</body>

</html>

CSS部分

/* 顶部黑绿白三个条的总高 */
.site-head{
    height: 150px;
}

/* 设置最上面的黑色条的基本样式 */
.site-head .top-bar{
    height: 32px;
    background-color: #2A2A2A;
    color: #FFFFFF ;
    line-height: 32px;
}

.site-head .top-bar a{
    color: white;
}

/* 黑条左边内容相对于黑条左浮动 */
.site-head .top-bar .shortcut-links{
    /* background-color: #bcbcbc; */
    float: left;
}

/* 黑条左边内容相对于黑条左浮动----里面的选项依次左浮动，在一行排列 */
.site-head .top-bar .shortcut-links>ul{
    float: left;
    margin-right: 18px;
    font-size: 14px;
}

/* 设置有下三角的选项为have-menu类，加右padding，留出空间让下三角浮动（元素可以在padding中浮动） */
.site-head .top-bar .shortcut-links>ul>.have-menu{
    padding-right: 12px;
    position: relative;
}

.site-head .top-bar .shortcut-links .arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    /* background-color: orange; */
    right: 0;
    top: 50%;
    margin-top: -6px;
    margin-right:-6px ;
}

.site-head .top-bar .shortcut-links .arrow b{
    /* position: absolute; */
    width: 7px;
    height: 7px;
    background-color: orange;
    transform: rotate(45deg);

}

.site-head .top-bar .shortcut-links .arrow i{
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #2A2A2A;
    transform: rotate(45deg);
    top: -2px;
}