Databases
StackOverflow2013
Postsdbo
POHTML CSS Navigation Bar trouble with Sub-Menu on mouse hover
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML CSS Navigation Bar trouble with Sub-Menu on mouse hover
    text
    copied!<p>I built a navigation bar after studying the tutorials </p> <p>from the website and following some demo examples. Now I </p> <p>am stuck at one thing, the following is the code for my </p> <p>navigation bar, and the code works fine except when </p> <p>mouse is brought over one of the bars which has sub </p> <p>menu. When done so, it gives flickering image of the </p> <p>entire navigation bar without the result that it should </p> <p>give. Please help me out in this and point me where I am </p> <p>making the mistake?</p> <p>This is the HTML Code for the navigation bar that I am </p> <p>using:</p> <pre><code>&lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Tutorials&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Photoshop&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Illustrator&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Articles&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;User Experience&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Cloud Computing&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>The stylesheet for the following is this:</p> <pre><code>nav ul ul { display: none; /*hides the unordered list inside the unordered list */ } nav ul li:hover &gt; ul { /*the &gt; child selector makes sure only the child ul of the li being hovered is targeted, rather than all sub menus appearing at once.*/ display: block; /*displays the hidden list when mouse is brought over it */ } nav ul{ /* Affects the UL element */ overflow: hidden; display: inline-block; } nav ul li{ /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */ background-color: #f0f0f0; background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0),color-stop(0.51, #e6e6e6)); background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -o-linear-gradient(#fefefe 0%,#f0f0f0 50%, #e6e6e6 51%); background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); border-right: 1px solid rgba(9, 9, 9, 0.125); /* Adding a 1px inset highlight for a more polished efect: */ box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255,0.6) inset; -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; position:relative; float: left; list-style: none; } nav ul li:after{ /* This creates a pseudo element inslide each LI */ content:'.'; text-indent:-9999px; overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; opacity:0; /* Gradients! */ background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5))); background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; /* This will create a smooth transition for the opacity property */ -moz-transition:0.25s all; -webkit-transition:0.25s all; -o-transition:0.25s all; transition:0.25s all; } /* Treating the first LI and li:after elements separately */ nav ul li:first-child{ border-radius: 4px 0 0 4px; } nav ul li:first-child:after, nav ul li.selected:first-child:after{ box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; border-radius:4px 0 0 4px; } nav ul li:last-child{ border-radius: 0 4px 4px 0; } /* Treating the last LI and li:after elements separately */ nav ul li:last-child:after, nav ul li.selected:last-child:after{ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; border-radius:0 4px 4px 0; } nav ul li:hover:after, nav ul li.selected:after, nav ul li:target:after{ /* This property triggers the CSS3 transition */ opacity:1; } nav ul:hover li.selected:after, nav ul:hover li:target:after{ /* Hides the targeted li when we are hovering on the UL */ opacity:0; } nav ul li.selected:hover:after, nav ul li:target:hover:after{ opacity:1 !important; } /* Styling the anchor elements */ nav ul li a{ color: #5d5d5d; display: inline-block; font: 20px/1 Lobster,Arial,sans-serif; padding: 12px 35px 14px; position: relative; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); z-index:2; text-decoration:none !important; white-space:nowrap; } nav{ display: block; margin: 300px auto 0; text-align: center; width: 600px; } a, a:visited { text-decoration:none; outline:none; color:#54a6de; </code></pre> <p>}</p> <pre><code>a:hover{ text-decoration:underline; } </code></pre>
 

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