Databases
StackOverflow2013
Postsdbo
POJavaScript May Be Interfering with CSS 3-Level Navigation System
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript May Be Interfering with CSS 3-Level Navigation System
    primarykey
    data
    text
    <p>This fiddle works (see <code>We Distribute</code> under Products):</p> <p><a href="http://jsfiddle.net/dgUFw/1362/" rel="nofollow">http://jsfiddle.net/dgUFw/1362/</a></p> <p>But on the page in the context of the website I'm building, I have JavaScript running (including jQuery). There is a slideshow on the home page, for example, and when I hover the 3rd level of the fiddle navigation, it goes away after a second or two. Plus, there are other weird behaviors I can't explain, like the 3rd level <code>li</code> moving to be on top of the 2nd level list, etc, where this doesn't occur in the fiddle.</p> <p>I'm relatively new to integrating CSS and JavaScript together, so I have not seen this behavior.</p> <p>When I turned off JavaScript in Firefox, the behavior seemed to subside.</p> <p>What is causing this and how can I fix it? I tried different JS libraries and CSS normalization on <code>jsfiddle.net</code> as well, and the results were the same. I also tried Opera with same fiddle results and worse website results. Chrome seems to be more robust and less prone to mis-behaving.</p> <p>You may have noticed also that when inside the 3rd level, the 2nd level <code>We Distribute</code> text is black. I'm also having difficulty getting this to remain white. But this isn't my primary question here. I'm most interested in the JavaScript/CSS interactions.</p> <p><strong>EDIT NOTE</strong></p> <p>I took some advice from below and tested this more:</p> <p>I did some more testing on the fiddle: <a href="http://jsfiddle.net/nicorellius/dgUFw/1368/" rel="nofollow">http://jsfiddle.net/nicorellius/dgUFw/1368/</a> I found that if you click "We Distribute" the menu collapses on itself. This is actually similar behavior to what I'm seeing on the website, except the collapse occurs without clicking. After clicking the menu and it collapses, then hover doesn't bring it back to normal, which I would expect it would.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdfeuer
    1. USnicorellius
    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. POJavaScript May Be Interfering with CSS 3-Level Navigation System
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIf I include jQuery on that fiddle (http://jsfiddle.net/stevegreatrex/dgUFw/1363/) then the menu still works as I would expect. What are you seeing?
      singulars
      1. POJavaScript May Be Interfering with CSS 3-Level Navigation System
      1. USSteve Greatrex
    2. COI tried that too and I'm seeing the same as you. What I'm seeing is described above. On the website (not the fiddle), the menu behaves differently until I disabled JS in the browser.
      singulars
      1. POJavaScript May Be Interfering with CSS 3-Level Navigation System
      1. USnicorellius
    3. COIt does really vanish after a second without moving the mouse? Because there is a little space between the button and the dropdown and therefor its not working very good.
      singulars
      1. POJavaScript May Be Interfering with CSS 3-Level Navigation System
      1. USAce7k3
 

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