При выставлении в #menu .menu-subList width: 100% все браузеры ведут себя хорошо, и ставят полный размер по родительскому блоку, мозила же растягивает все, опираясь на ширину экрана или еще чего там.
Как выкрутиться? И почему оно так?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My menu</title>
<style>
body {
margin: 0;
padding: 0;
}
#menu-full {
display: table;
width: 800px;
height: 30px;
}
#menu ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#menu .menu-block {
position: relative;
display:table-cell;
border: 1px solid black;
text-align: center;
}
#menu .menu-subList {
width: 100%;
overflow: hidden;
position: absolute;
top: 32px;
border: 1px solid green;
}
#menu .menu-subList :last-child a {
border-bottom: none;
}
#menu .menu-subList a {
text-decoration: none;
display: block;
width: 100%;
padding: 5px 0px ;
color: black;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id='menu'>
<ul id='menu-full'>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 111 </li>
<ul class='menu-subList'>
<li><a href='#1'>Первый в списке</a></li>
<li><a href='#2'>Второй в списке</a></li>
<li><a href='#3'>Третий в списке</a></li>
<li><a href='#4'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 222 </li>
<ul class='menu-subList'>
<li><a href='#11'>Первый в списке</a></li>
<li><a href='#22'>Второй в списке</a></li>
<li><a href='#33'>Третий в списке</a></li>
<li><a href='#44'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 333 </li>
<ul class='menu-subList'>
<li><a href='#111'>Первый в списке</a></li>
<li><a href='#222'>Второй в списке</a></li>
<li><a href='#333'>Третий в списке</a></li>
<li><a href='#444'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 444 </li>
<ul class='menu-subList'>
<li><a href='#1111'>Первый в списке</a></li>
<li><a href='#2222'>Второй в списке</a></li>
<li><a href='#3333'>Третий в списке</a></li>
<li><a href='#4444'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 555 </li>
<ul class='menu-subList'>
<li><a href='#11111'>Первый в списке</a></li>
<li><a href='#22222'>Второй в списке</a></li>
<li><a href='#33333'>Третий в списке</a></li>
<li><a href='#44444'>Четвертый в списке</a></li>
</ul>
</ul>
</ul>
</div>
</body>
<script type='text/javascript'>
</script>
</html>
