css 질문 입니다. 채택완료

</p>

<p><style>

.help .wrap {

    position: absolute;

    width: 10em;

}

.help .wrap .speech-bubble {

    position: absolute;

    top: 0.3em;

    right: 2em;

    width: 1em;

    height: 1em;

    background-color: #1d1d1d;

    border-radius: 0.2em;

    transform: rotate(45deg);

}</p>

<p>.help .wrap .speech-items {

    position: absolute;

    top: 0.5em;

    background-color: #1d1d1d;

    border-radius: 0.3em;

    list-style-type: none;

    padding: 0;

    margin: 0;

    width: 100%;

}

.help .wrap .speech-items li {

    border-bottom: 0.1em solid #333;

}

.help .wrap .speech-items li:last-child {

    border-bottom: 0;

}

.help .wrap .speech-items a {

    display: block;

    padding: 0.8em;

    text-decoration: none;

    color: #fff;

}

</style></p>

<p><div class="help">

    <div class="wrap">

        <div class="speech-bubble"></div>

        <ul class="speech-items">

            <li><a href="#">A</a></li>

            <li><a href="#">B</a></li>

            <li><a href="#">Log out</a></li>

        </ul>

    </div>

</div></p>

<p>