Databases
StackOverflow2013
Postsdbo
POAdvanced drop down menu not aligning to middle of page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdvanced drop down menu not aligning to middle of page
    text
    copied!<p>Basically i have a dropdown menu that is not aligning to the middle of the page as you can see below... It is very annoying because i have tried everything i know possible. I would like to keep it in HTML and CSS please as this part i am not using JavaScript or JQuery to do.</p> <p><strong>CSS Code:</strong></p> <pre><code>&lt;style type="text/css"&gt; /* 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; } &lt;/style&gt; </code></pre> <p><strong>HTML Code:</strong></p> <pre><code> &lt;div class="navtop"&gt; &lt;div id="menu"&gt; &lt;ul id="mega"&gt; &lt;li&gt;&lt;a href="#"&gt;Bookings&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; &lt;span id="top-dropbg"&gt; &lt;span class="drop-box"&gt; &lt;span class="drop-sec1"&gt; &lt;span class="drop-sec1-1"&gt;&lt;h2&gt;Our Services&lt;/h2&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-3"&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;span class="drop-sec1-2"&gt;&lt;h1&gt;Vehicles for Every Pocket&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue.&lt;/p&gt;&lt;/span&gt; &lt;/span&gt; &lt;span class="drop-sec2"&gt; &lt;/span&gt; &lt;span class="drop-sec3"&gt; &lt;span class="drop-sec3-1"&gt;&lt;h1&gt;Membership and Reward Schemes&lt;/h1&gt;&lt;p&gt;Lorem ipsum etiam at risus et justo dignissim congue donec congue lacinia dui.&lt;/p&gt;&lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Explore Our Fleet&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; 2 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Rental Locator&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; 3 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; 4 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Partners&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; 5 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Specials&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; 6 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Bluechip&lt;/a&gt; &lt;div class="popup"&gt; &lt;div class="popup-mid"&gt; 7 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Thank you in advance all :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload