このウェブサイトをご検討ください: http://indivar.biz/test/balkar/ . 「住宅プロジェクト」タブにサブメニュードロップダウンを作成しましたが、ナビゲーションタブ「住宅プロジェクト」にカーソルを合わせると、ナビゲーションの灰色の領域内にサブドロップダウンメニューが表示されますが、灰色の領域の外側に表示したいです。コンテンツ幅いっぱいのナビゲーション。
関連するコードは次のとおりです。
CSS
.left-section {
float: left;
overflow: hidden;
width: 220px;
}
#nav {
background: none repeat scroll 0 0 #E4E4E4;
position: relative;
z-index: 9999;
}
#nav ul {
margin: 0 auto;
padding: 6.5px 0;
width: 197px;
}
#nav ul li {
background: url("../images/nav-line-bottom.jpg") repeat-x scroll center bottom transparent;
height: 29px;
line-height: 34px;
}
#nav ul li a {
color: #242121;
display: block;
font-size: 15px;
height: 30px;
line-height: 23px;
margin-top: 5px;
text-decoration: none;
}
#nav ul li a.home {
background: url("../images/nav-icons.png") no-repeat scroll 0 0 transparent;
padding-left: 32px;
}
#nav ul li a.about {
background: url("../images/nav-icons.png") no-repeat scroll 0 -32px transparent;
padding-left: 32px;
}
#nav ul li a.services {
background: url("../images/nav-icons.png") no-repeat scroll 0 -63px transparent;
padding-left: 32px;
}
#nav ul li a.resi-proj {
background: url("../images/nav-icons.png") no-repeat scroll 0 -96px transparent;
padding-left: 32px;
}
#nav ul li a.comm-proj {
background: url("../images/nav-icons.png") no-repeat scroll 0 -130px transparent;
padding-left: 32px;
}
#nav ul li a.career {
background: url("../images/nav-icons.png") no-repeat scroll 0 -161px transparent;
padding-left: 32px;
}
#nav ul li a.faq {
background: url("../images/nav-icons.png") no-repeat scroll 0 -195px transparent;
padding-left: 32px;
}
#nav ul li a.nri {
background: url("../images/nav-icons.png") no-repeat scroll 0 -228px transparent;
padding-left: 32px;
}
#nav ul li a.cont {
background: url("../images/nav-icons.png") no-repeat scroll 0 -262px transparent;
padding-left: 32px;
}
#nav ul li ul {
background: none repeat scroll 0 0 #CC0000;
display: none;
left: 150px;
position: absolute;
top: 135px;
width: 220px;
z-index: 9999;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li ul li a {
color: #FFFFFF;
display: block;
}
HTML
<div class="left-section">
<!--logo div ends-->
<div class="clear"></div>
<div class="margin-top" id="nav">
<ul>
<li><a class="home" href="#">Home</a></li>
<li><a class="about" href="#">About Us</a></li>
<li><a class="services" href="#">Our Services</a></li>
<li><a class="resi-proj" href="#">Residential Projects</a>
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Apartments</a></li>
<li><a href="#">Floors</a></li>
<li><a href="#">Plots</a></li>
<li><a href="#">Villas</a></li>
</ul>
</li>
<li><a class="comm-proj" href="#">Commercial Projects</a></li>
<li><a class="career" href="#">Career</a></li>
<li><a class="faq" href="#">FAQ's</a></li>
<li><a class="nri" href="#">NRI Club</a></li>
<li style="background: none repeat scroll 0% 0% transparent;"><a class="cont" href="#">Contact Us</a></li>
</ul>
</div>
</div>