Javascript-форум - Показать сообщение отдельно

PashPP · #1 (**permalink**) 28.08.2012, 17:46

При выставлении в #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>