更改div中的元素会使其他元素更改位置

Question

我遇到了问题所以我为我的List项目制作了代码，这是顶部的菜单栏。我添加了一张图片，但是当我这样做时，列表项位置向下移动而不是向右移动。我试图将它们设置为绝对位置，但这并不起作用。

HTML： -

<div id="header">
            <img  class="quote" src="images/quote.png"/>
            <ul>
                <li class="li">
                    <a href="store.html">Online store </a>
                </li>
                <li class="li">
                    <a href="beauty.html">Beauty </a>
                </li>
                <li class="li">
                    <a href="discover.html">Discover</a>
                </li>
                <li class="li">
                    <a href="men.html">Men</a>
                </li>
                <li class="li">
                    <a href="women.html">Women</a>
                </li>
            </ul>
        </div>

CSS： -

#header{
    background-color: #262626;
    height: 90px;
    width: ;
    position: relative;
}
#header ul{

}
#header ul li {
    display: block;
    list-style-type: none;
    display: inline-block;
    margin-top: 30px;
    margin-right: 80px;
    padding-right: 5px;
    padding-top: 10px;
    float: right;
}
#header ul li a{
    text-decoration: none;
    color: #ffffe6;
    font-family: medieval;
}
#header img{
    width: 200px;
    position: relative;
    margin-top: 20px;
}