CODEWITHSUNDEEP
css
user1406271
user1406271

Reputation: 297

Css based dropdown menu: incorrect width of <li> elements

Need to fix width problem of <li>elements in this drop down menu. All <li>s must have the same width as the top <li> (MENU1, MENU2, MENU3) + must have the same size on mouse over.

It works correctly only if #mymenu ul li a have fixed width. When I change it's width to 100%, all <li>s have different width.

enter image description here

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>

Upvotes: 0

Views: 144

Answers (2)

Felix A J
Felix A J

Reputation: 6470

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/

Upvotes: 0

Stanimir Dimitrov
Stanimir Dimitrov

Reputation: 1890

To fix the <li> and <ul> tags add this code:

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

Upvotes: 1

Related Questions