Note that there are some explanatory texts on larger screens.

plurals
  1. POHorizontal navigation bar not working in IE6
    text
    copied!<p>My horizontal navigation bar is working fine with Chrome, Opera, Mozilla, even IE8 but it's not working on IE6. </p> <p>Codes as follows:</p> <h2>HTML part</h2> <pre><code>&lt;div id="mainNav" class="container"&gt; &lt;div id="menuh"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.html" class="top_parent"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.html" class="top_parent"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="why_us.html" class="top_parent"&gt;Why Us?&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="services.html" class="parent"&gt;What I can do for you&lt;/a&gt;&lt;/li&gt; &lt;!-- No need to anchor to [#ancService1] --&gt; &lt;li&gt;&lt;a href="services.html#ancWhatyouget" class="parent"&gt;What you can get&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="services.html#ancTestimonials" class="parent"&gt;Testimonials&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="free_resources.html" class="top_parent"&gt;Free Resources&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="how_much.html" class="top_parent"&gt;How Much?&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html" class="top_parent"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="register.html" class="top_parent"&gt;Register&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h2>CSS part</h2> <pre><code>#mainNav {height: 30px;} #menuh { font-size: 0.9em; width:80%; float:left; position: absolute; } #menuh a { text-align: center; display:block; white-space:nowrap; margin:0; padding: 3px 15px 3px 15px; border-right: 1px solid #036; height: 24px; } #menuh a:visited, #menuh a:active { color: white; text-decoration:none; } #menuh a.parent:link { color: white; background-color: #204988; text-decoration:none; } #menuh a.top_parent { background-position: right center; background-repeat: no-repeat; height: 24px; padding: 10px 15px 0 15px; } #menuh a.top_parent:hover { color: #8CBA01; text-decoration:none; background-image: url(../_images/img_nav.jpg); background-repeat: repeat-x; } #menuh a.parent { background-position: right center; background-repeat: no-repeat; height: 24px; padding: 7px 15px 0 15px; } #menuh a.parent:hover { color: #8CBA01; background-color: #036; text-decoration:none; } #menuh ul { list-style:none; margin:0; padding:0; width: auto; } #menuh li { float:left; position:relative; } #menuh li li a { text-align: left; width: 140px; } #menuh ul ul { position:absolute; z-index:500; top:auto; display:none; } div#menuh li:hover { cursor:pointer; z-index:100; } div#menuh li:hover ul ul, div#menuh li li:hover ul ul {display:none;} div#menuh li:hover ul, div#menuh li li:hover ul {display:block;} </code></pre> <p>Any help would be great! Thanks.</p>
 

Querying!

 
Guidance

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