基于Css的下拉菜单：<li>元素

Question

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

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

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/

Answer 2

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; position: relative;}
#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;
width: 100%;
}
#mymenu ul li a{width:100%;font-size:12px;color:#000; box-sizing: border-box;}
#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;}

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

https://jsfiddle.net/Lq8ay2L6/6/