IE8 layout help?

[eiranix]

Can anyone help me fix this layout problem I'm having in IE8?

Works fine in IE11/Firefox. I don't know what's causing the difference...

 

I have a drop-down menu that works by simply changing the height of the sub buttons container. When I test it in IE8 it puts the sub menu to one side and makes the main buttons extra wide...

#header {    background-color: blue;  position: relative;  margin-right:auto;  margin-left:auto;         width:960px;  height:250px;  top: 0px;}#nav {  position: absolute;  width:960px;  bottom:0px;  left:0px;}.button {  border:1px solid green;  position:relative;  float:left;  padding-top:8px;  min-width:50px;  height:29px;  text-align:center;  overflow:visible;  width:16.66%;  background-color: pink;}.button:hover {background-color: red;}.drop {  position:absolute;  width:160px;  top:37px;  height: 0px;  left:0px;  overflow:hidden;}.button:hover #menu1 {  height:90px;}.button:hover #menu2 {  height:300px;}.sub {  font-size:10pt;  color: black;  height:25px;  padding-top:5px;  width:100%;}

<div id="header">	<div id="nav">		<a href="#"><div class="btn button">Menu1			<div id="menu1" class="drop">			<a href="#"><div class="sub button">Item1</div></a>			<a href="#"><div class="sub button">Item2</div></a>			<a href="#"><div class="sub button">Item3</div></a>			</div>		</div></a>				<a href="#"><div class="btn button">Menu2			<div id="menu2" class="drop">			<a href="#"><div class="sub button">Item1</div></a>			<a href="#"><div class="sub button">Item2</div></a>			<a href="#"><div class="sub button">Item3</div></a>			<a href="#"><div class="sub button">Item4</div></a>			<a href="#"><div class="sub button">Item5</div></a>			<a href="#"><div class="sub button">Item6</div></a>			<a href="#"><div class="sub button">Item7</div></a>			<a href="#"><div class="sub button">Item8</div></a>			<a href="#"><div class="sub button">Item9</div></a>			<a href="#"><div class="sub button">Item10</div></a>			</div>		</div></a>		</div></div>

[eiranix]

I just figured out what I've been doing wrong....<a> tags around block elements....I didn't realize this was bad.

 

I have converted the divs into list items and put the links within them, making them display as block to get the same result but valid.

[dsonesuk]

Used to be bad, BUT! its acceptable in html5, but! since IE8 is old ancient crappy browser which does not work well with html5 without JS helping it to recognise new html5 tags, you have to work with old method until all IE browser less than 10 are wiped from internet forever.