全幅メニューを作ろうとしています。display: table-cell は IE7 ではサポートされていないため、IE7 に問題があります。これ以外に解決策はありますか?
ここに私のコード:
<div class="main_nav second">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
CSS:
.main_nav ul {
display: table;
position: relative;
table-layout: auto;
width: 100%;
padding: 0;
border: 1px solid #CCCCCC;
}
.main_nav ul li {
list-style: none;
float: none;
display: table-cell;
}
.main_nav ul li a {
padding: 10px 15px;
display: block;
text-decoration: none;
}
Javascriptでも試してみましたが、メニューに項目を追加するとうまくいきません。貴重な時間をありがとうございました:)