Html css下拉菜单排版

请帮我排版这个下拉菜单

这是我现在的排版：

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

我试了一会儿，还是试不出来 请引导我，非常感谢

这是我的代码：

#下拉菜单

是id=标题的div下的

div

jsfiddle：

您应该在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;
}

#下拉菜单{
位置：相对位置；
}
#下拉菜单>ul{
位置：绝对位置；
背景色：#000；
显示：无；//li{
位置：相对；//a{
字体大小：0.8rem；
}
#标题{
文本对齐：居中；
排名：0；
右：0；
高度：60px；
z指数：70；
宽度：100%；
填充：0；
保证金：0；
/*position:relative；*///把你的代码放在JSFIDLE中。这里！非常感谢！英语和繁体中文（台湾）之间的距离（它们之间有空格）能更近吗？对不起，我的英语表达不够好。是的，你可能也需要它们吗？所以你可以操纵#页眉ul.子菜单>li{margin:10px；}不好。我想这是因为：#页眉li{margin:20px；}无论如何，谢谢你帮了我这么多！！@user2492364你能清楚地说明你需要li的边距大小吗？我是说右边边距，上面边距，左边边距，下面边距。第一个和最后一个li应该不同吗？
#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;
}