ナビゲーションの途中でバナーをコーディングするのはこれが初めてでしたが、残念ながらうまくいきませんでした。オーバーフローを試みましたが、うまくいかなかったようです。
HTML:
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Register</a></li>
<li><a href="">About</a></li>
<li class="logo"><a href="#"></a></li>
<li><a href="">Home</a></li>
<li><a href="">Register</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
スタイル:
nav ul {
width: auto;
height: 74px;
position: relative;
z-index: 5;
overflow: visible;
}
nav ul li {
list-style-type: none;
float: left;
display: inline-block;
padding: 0px 30px;
width: auto;
height: 74px;
}
nav ul li.logo {
background: url(logo.png) no-repeat;
width: 200px;
height: 175px;
position: relative;
top: -83px;
left: 5px;
}
ご覧のとおり、バナーはナビゲーション自体の高さよりも大きく、Chrome、Firefox、Opera などのブラウザーで問題なく表示されます。ただし、Internet Explorer では、バナーが内側で切り取られて表示され、オーバーフローしません。オーバーフロー プロパティを試しましたが、機能していないようです。私は何をすべきか?