基于 Css 的下拉菜单 : incorrect width of elements

Question

需要修复<li>的宽度问题此下拉菜单中的元素。全部<li> s 必须与顶部宽度相同 <li> (MENU1, MENU2, MENU3) + 在鼠标悬停时必须具有相同的大小。

只有在 #mymenu ul li a 时才能正常工作有固定的宽度。当我将它的宽度更改为 100% 时，所有 <li> s 有不同的宽度。

jsfiddle

CSS:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}

div#mymenus{margin:0px auto;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
#mymenu,#mymenu ul{list-style:none;}
#mymenu{float:left;font-family:Arial;}
#mymenu > li{float:left;}
#mymenu li a{padding:11px 10px 12px 10px;text-decoration:none;position:relative; display:inline-block;}
#mymenu ul {position:absolute;display:none;z-index:999;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}
#mymenu ul li a{width:100%;font-size:12px;color:#000;}
#mymenu li:hover ul{display:block;}
#mymenu > li > a{color: #fff;font-weight:700;}
#mymenu > li:hover > a{background:#EAD593;color:#000;} 
#mymenu ul li:hover a{background:#FFC97C;}
.lsub:nth-child(odd){background-color:#EFDEAB}
.lsub:nth-child(even){background-color:#EAD593;}

html:

<div id="mymenus">
<ul id="mymenu">
<li><a href="/">MENU ONE</a></li>
<li><a href="/">MENU TWO</a>
<ul>
<li class="lsub"><a href="/">Submenu1</a></li>
<li class="lsub"><a href="/">Submenu2</a></li>
<li class="lsub"><a href="/">Submenu3</a></li>
</ul>
</li>

<li><a href="/">MENU THREE</a>
<ul>
<li class="lsub"><a href="/">Submenu1</a></li>
<li class="lsub"><a href="/">Submenu2</a></li>
<li class="lsub"><a href="/">Submenu3</a></li>
</ul>
</li>

<li><a href="/">MENU FOUR</a></li>
</ul>
</div>

Answer 1

修复 <li>和 <ul>标签添加这段代码:

#mymenu li a{padding:11px 10px 12px 10px;text-decoration:none;position:relative; display:block;}
#mymenu ul {position:relative;display:none;z-index:999;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}
#mymenu ul li a{font-size:12px;color:#000;}

https://jsfiddle.net/Lq8ay2L6/5/