css下拉菜单排版

Question

请帮我处理这个下拉菜单排版。

这是我的排版现在：

我希望这个词（Engliash和繁体中文（台湾）更像这样

我试了一会儿，仍然无法尝试 请指导我，非常感谢你。

这是我的代码：
#dropdownmenu是div下的div，其中id = header

jsfiddle：http://jsfiddle.net/kkadso/yk3tprnv/1/

<ul id="header">
    <li data-menuanchor="firstPage"><a href="#">About</a>
    </li>
    <li>
        <div id='dropmenu'>
            <img src="{% static 'img/lan.png' %}" />
            <ul class="submenu">

                <input name="language" type="hidden" id="lang"/>
                <li  value="en" id="langtext"><a href="#" >English</a></li>
                <li  value="zh-tw" id="langtext"><a href="#" >Traditional Chinese(Taiwan)</a></li>

            </ul>
        </div>
    </li>
</ul>

Answer 1

您应该在css中进行以下更改更改：

#dropmenu {
    position : relative;
}

#dropmenu > ul {
    position: absolute;
    background-color: #000;
    display: none;    //<- this should be uncommented
    /*width: 100px;*/ //<-this should be commented
}
#dropmenu:hover > ul {
    display: block!important; // !mportant must be added to show child content when hover
    background: #666666;
    padding-left: 0;          //<- This must be added
}
#dropmenu:hover > ul > li {
    position : relative;      //<-This must be relative
}
#langtext > a {
    font-size: 0.8rem;
}

#header {
    text-align: center;
    top: 0;
    right: 0;
    height: 60px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
    /* postition: relative; */ //<-This must be commented
}
#header li {
    font-size: 1rem;
    display: inline-block;
    margin: 20px;
    color: #e6e7e8;
    text-align: left;    // <- This must be added. Aligning text.
}
#header li.active {
    color: #fff;
}
#header li a {
    text-decoration: none;
    color: #e6e7e8;
}
#header li.active a:hover {
    color: #fff;
}
#header li:hover {
    background-color: transparent;
}
#header li a,
#header li.active a {
    display: block;
    white-space: pre;
}
#header li.active a {
    color: #fff;
    font-weight: 600;
}

这是Demo。