求个ie7样式的问题

错误图：

就是每一个div设置的height：auto根本没有撑开

html代码：

<ul>
<li style="background: url(images/leftbg1.jpg) no-repeat ! important; font-weight: 600;
color: #b47220;">
<div class="l_t1">
<img src="images/jh.png" /></div>
<div class="l_t2">
<a>
欧洲系列</a></div>
</li>
<div class="l_xl">
<ul>

<li>
<div class="l_t3">
<img src="images/jh.jpg" /></div>
<div class="l_t2">

<a href='products.aspx?id=28'>
爱尔兰风情</a></div>
</li>

<li>
<div class="l_t3">
<img src="images/jh.jpg" /></div>
<div class="l_t2">
<a href='products.aspx?id=29'>
风笛系列</a></div>
</li>

<li>
<div class="l_t3">
<img src="images/jh.jpg" /></div>
<div class="l_t2">
<a href='products.aspx?id=30'>
默克尔</a></div>
</li>

<li>
<div class="l_t3">
<img src="images/jh.jpg" /></div>
<div class="l_t2">

<a href='products.aspx?id=39'>
贝克汉姆</a></div>
</li>

</ul>
</div>
</ul>


css代码：

.a_nr1{ width:210px; float:left; height:auto; margin-left:12px; _margin-left:6px;}
.a_nr1 ul{ width:210px; float:left; height:auto !important;}
.a_nr1 ul li{ width:200px; height:23px; margin-top:10px; padding-left:10px; list-style:none; background:url(../images/leftbg.jpg) no-repeat; padding-top:8px;}
.a_nr1 a{ text-decoration:none; color:#754a15; }
.a_nr1 a:hover{ text-decoration:none; color:#9f7114;}
.l_t1{ width:10px; float:left; padding-top:4px;}
.l_t2{ width:170px; float:left;}
.l_t3{ width:10px; float:left; padding-top:6px;}
.l_xl{ float:left; height:auto ; margin-left:10px; _margin-left:6px;}
.l_xl ul{ width:210px; float:left; height:300px; }
.l_xl ul li{ width:190px; height:15px; list-style:none; background:none; color:#754a15; margin:0px; padding:0px; padding-top:10px; padding-left:10px;}
.l_xl a{ text-decoration:none; color:#754a15; }
.l_xl a:hover{ text-decoration:none; color:#9f7114;}



[解决办法]
不想展开 就把div隐藏 通过JS控制 内容时显示 还是隐藏咯