Databases
StackOverflow2013
Postsdbo
POCSS drop down menu positioning in IE7
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS drop down menu positioning in IE7
    primarykey
    data
    text
    <p>I have a CSS only drop down menu that works fine in firefox and chrome. The sub menus line up directly underneath their parents. However, in IE7, they are positioned off to the side. </p> <p>CSS:</p> <pre><code>/* MENU LEVEL 1 */ #nav-img { padding-top: 4px; } #main-nav { height: 30px; /* set to the height you want your menu to be */ margin: 0 0 10px; /* just to give some spacing */ width: 600px; display: inline-block; font-family: Tahoma, Geneva, sans-serif; font-size: 10pt; text-transform: uppercase; } #main-nav ul { margin: 0; padding: 0; /* only needed if you have not done a CSS reset */ } #main-nav li { display: block; border: 1px solid #000; float: left; line-height: 30px; /* this should be the same as your #main-nav height */ height: 30px; /* this should be the same as your #main-nav height */ margin: 0; padding: 0; /* only needed if you don't have a reset */ position: relative; /* this is needed in order to position sub menus */ } #main-nav li a { display: block; height: 30px; line-height: 30px; padding: 0 15px; } #main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover { color: #000; } /* MENU LEVEL 2 */ .sub-menu { text-transform: none; } #main-nav ul ul { /* this targets all sub menus */ display: none; /* hide all sub menus from view */ position: absolute; top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */ } #main-nav ul ul li { /* this targets all submenu items */ float: none; /* overwriting our float up above */ width: 240px; /* set to the width you want your sub menus to be. This needs to match the value we set below */ } #main-nav ul ul li a { /* target all sub menu item links */ padding: 5px 10px; /* give our sub menu links a nice button feel */ } #main-nav ul li:hover &gt; ul { display: block; /* show sub menus when hovering over a parent */ } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="main-nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="a href="#""&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="a href="#""&gt;Services&lt;/a&gt; &lt;br /&gt; &lt;ul class="sub-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Commodities&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Professional Practice&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Shipping&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Commercial&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Corporate Structure&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dispute Resolution and Arbitration&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;International Employment&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Financial Re-structuring&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Intellectual Property&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Team&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Testimonials&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p></p> <p>Any help would be much appreciated. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USanimuson
    1. USmujuw
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS drop down menu positioning in IE7
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POCSS drop down menu positioning in IE7
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POCSS drop down menu positioning in IE7
      1. This table or related slice is empty.
      1. VTDownMod
    1. COMake it in JSFiddle.net ..
      singulars
      1. POCSS drop down menu positioning in IE7
      1. USmatzone
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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