css下拉式菜单排版

Question

请帮我用这个下拉式菜单排版。

这是我的排版现在：

而且我想这个词（Engliash和繁体中文（中国台湾）更紧密地这样

我尝试了一段时间，仍然不能试用 非常感谢你的指导

这里是我的代码：
的#dropdownmenu是一个div下div其ID =头

的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。