Databases
StackOverflow2013
Postsdbo
POCSS width of absolute positioned drop down menu and IE7 issue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS width of absolute positioned drop down menu and IE7 issue
    primarykey
    data
    text
    <p>how can I automatically define width of drop down menu depending on the contained links length:</p> <p>Here are pictures of what I have and what I want:</p> <p>This is reality:</p> <p><img src="https://i.stack.imgur.com/Fv9g1.png" alt="enter image description here"></p> <p>This is what I need to get:</p> <p><img src="https://i.stack.imgur.com/sfWBG.png" alt="enter image description here"></p> <p>Here is my html and css (I reduced the HTML as much as possible - just left the menu):</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt; /* Main styles */ /*drop default browser css settings*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { font: .8em 'Trebuchet MS', Trebuchet,Verdana, sans-serif; line-height: 1; color: #444; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } #second_menu { margin: 25px 25px 0 40px; border-bottom: 1px dotted #BBBBBB; } #second_menu li { font-size: 1.1em; font-weight: bold; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; padding: 10px 20px 15px 0; position: relative; height: auto; } #second_menu li a { color: #757575; text-decoration: none; } #second_menu li.multiple &gt; a { cursor: default; } #second_menu li:hover a, #second_menu li.current a { color: #6F8936; } #second_menu li.multiple a span { background: url(../img/icons/sprite10.png) no-repeat -244px -370px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; width: 7px; height: 7px; margin-left: 5px; vertical-align: middle; } #second_menu li.multiple:hover a span, #second_menu li.multiple.current a span { background-position: -244px -379px; } #second_menu ul.subnav { list-style: none; position: absolute; top: 39px; left: -10px; background-color: #fff; border: 1px dotted #BBBBBB; border-top: none; } #second_menu .subnav li { display: block; padding: 0; margin: 0; } #second_menu .subnav li a { color: #868686; padding: 10px; display: block; font-weight: normal; } #second_menu .subnav li a:hover { color: #616161; background-color: #DFEBBD; } #second_menu li.multiple .subnav { display: none; } #second_menu li.multiple:hover .subnav { display: block; } &lt;/style&gt; &lt;/head&gt; &lt;body id="main-page"&gt; &lt;div id="user-message-container"&gt;&lt;/div&gt; &lt;!-- Header --&gt; &lt;div id="header"&gt; &lt;div class="header-content"&gt; &lt;div id="user-block"&gt; &lt;/div&gt; &lt;div id="header-wrapper"&gt; &lt;div id="header-left"&gt; &lt;div id="logo"&gt; &lt;a href="http://mysite.com/" title=""&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="header-menu"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="header-content"&gt; &lt;div id="info-search"&gt; &lt;/div&gt; &lt;ul id="second_menu"&gt; &lt;li class="current multiple"&gt;&lt;a href="#"&gt;MENU1&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="subnav"&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;Short name&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;This is a very long name&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;Shorty&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="multiple"&gt;&lt;a href="#"&gt;MENU2&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="subnav"&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;submenu1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;submenu2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;MENU3&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;MENU4&lt;/a&gt; &lt;/li&gt; &lt;li class="multiple"&gt;&lt;a href="#"&gt;MENU5&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="subnav"&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;submenu1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;submenu2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;MENU6&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="http://mysite.com/"&gt;MENU7&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- // Header --&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;!-- Wrapper --&gt; &lt;div id="wrapper"&gt; &lt;!-- // Main content (left column) --&gt; &lt;!-- Sidebar (right column) --&gt; &lt;div id="sidebar"&gt; &lt;/div&gt; &lt;!-- // Sidebar (right column) --&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- // Wrapper --&gt; &lt;!-- Footer --&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;!-- // Footer --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Would appreciate any help with this.</p> <p>PS another issue is in IE7 - when I move cursor from menu name to submenu block - the submenu block dissapears as if :hover effect is lost.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVolder
    1. USVolder
    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
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI put it in a jsfiddle for you http://jsfiddle.net/EUj69/1/
      singulars
      1. POCSS width of absolute positioned drop down menu and IE7 issue
      1. USLowkase
 

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