基本的に、以下に示すように、ページの中央に配置されていないドロップダウンメニューがあります...可能な限りすべてを試したので、非常に面倒です。この部分はJavaScriptやJQueryを使用していないため、HTMLとCSSで保持したいと思います。
CSSコード：
<style type="text/css">
/* TOP MENU DROP DOWN */
#menu li {
color: #222222;
}
#mega {
list-style:none;
font-weight:bold;
}
#mega li {
float:left;
clear:right;
padding-left: 15px;
}
#mega li div div {
float:none;
clear:both;
}
#mega li:hover {
border-bottom:0;
z-index:1;
position:center;
}
#mega a {
color:#000;
text-decoration:none;
}
#mega a:hover {
color:#077fcc;
}
#mega div {
left:-999em;
}
#mega li:hover div {
position:center;
display:block;
left:0;
}
a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
.popup {
position:fixed;
width:100%;
height:300px;
text-align:center;
vertical-align:middle;
background-image:url(img/dropdownbg.gif);
background-repeat:no-repeat;
background-position:center;
}
.popup-mid {
text-align:left;
position:center;
height:100%;
width:950px;
}
/* TOP INSIDE*/
#top-dropbg {
width:100%;
height:300px;
}
.drop-box {
margin:30px 15px;
height:240px;
}
.drop-sec1 {
float:left;
clear:right;
height:240px;
width:70%;
}
.drop-sec1-1 {
width:100%;
height:20px;
}
.drop-sec1-2 {
float:left;
clear:right;
width:25%;
height:95px;
}
.drop-sec1-3 {
width:100%;
height:5px;
float:left;
clear:left;
border-bottom:1px dotted #CCC;
}
.drop-sec2 {
float:left;
clear:right;
height:240px;
width:1%;
margin-right:1%;
border-right:1px solid #CCC;
}
.drop-sec3 {
float:left;
clear:right;
height:240px;
width:25%;
}
/* END TOP MENU */
h1 {
color:#858585;
font-size:14px;
}
h2{
color:#333333;
font-size:24px;
}
p {
color:#333333;
font-size:14px;
}
</style>
HTMLコード：
<div class="navtop">
<div id="menu">
<ul id="mega">
<li><a href="#">Bookings</a>
<div class="popup">
<div class="popup-mid">
<span id="top-dropbg">
<span class="drop-box">
<span class="drop-sec1">
<span class="drop-sec1-1"><h2>Our Services</h2></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-3"></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
</span>
<span class="drop-sec2">
</span>
<span class="drop-sec3">
<span class="drop-sec3-1"><h1>Membership and Reward Schemes</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue lacinia dui.</p></span>
</span>
</span>
</span>
</div>
</div>
</li>
<li><a href="#">Explore Our Fleet</a>
<div class="popup">
<div class="popup-mid">
2
</div>
</div>
</li>
<li><a href="#">Rental Locator</a>
<div class="popup">
<div class="popup-mid">
3
</div>
</div>
</li>
<li><a href="#">Services</a>
<div class="popup">
<div class="popup-mid">
4
</div>
</div>
</li>
<li><a href="#">Partners</a>
<div class="popup">
<div class="popup-mid">
5
</div>
</div>
</li>
<li><a href="#">Specials</a>
<div class="popup">
<div class="popup-mid">
6
</div>
</div>
</li>
<li><a href="#">Bluechip</a>
<div class="popup">
<div class="popup-mid">
7
</div>
</div>
</li>
</ul>
</div>
</div>
よろしくお願いします:)