Databases
StackOverflow2013
Postsdbo
POhorizontal navigation bar with a horizontal second tier that uses images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhorizontal navigation bar with a horizontal second tier that uses images
    text
    copied!<p>can someone please recommend a horizontal navigation bar with a horizontal second tier that uses images. When the user hovers over an image, a mouse over changes the image.</p> <p>Something similar to this....http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ but using images.</p> <p>i started off working on this and have gotten quite far , but since i used images for the secondary nav bar, i can only get my images to display as vertical rather than horizontal.</p> <p>I know the offending class is this one below, when the secondary nav is set to horizontal. As when i added different classes....boyLink and girlLink to the tag, it started displaying vertical. I'm not sure if i should be adding boyLink and girlLink to ul#topnav li span a ?<br> :<br> <code> /<em>--Show subnav on hover--</em>/ ul#topnav li span a { display: inline; } </code> </p> <p><code> ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; font-size: 1.2em; }</p> <pre><code> ul#topnav li { float: left; margin: 0; padding: 0; background-color: Red; } ul#topnav li a { padding: 0px 0px 0px 0px; margin: 0px; display: block; text-decoration: none; } ul#topnav li span { float: left; margin: 0; padding: 0; position: absolute; left: 0; top: 25px; display: none; /*--Hide by default--*/ width: 970px; } ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ ul#topnav li span a { display: inline; float:left; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ ul#topnav li span a:hover { text-decoration: underline; display: inline; } img { border: none; } ul#topnav li #homeLink { width: 51px; height: 25px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/nav01U.jpg"); } ul#topnav li:hover #homeLink:hover { background-image: url("Content/Images/Nav/nav01.jpg"); } ul#topnav li #collectionLink { width: 97px; height: 25px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/nav02U.jpg"); } ul#topnav li:hover #collectionLink:hover { background-image: url("Content/Images/Nav/nav02.jpg"); } ul#topnav li:hover #contactUsLink:hover { background-image: url("Content/Images/Nav/nav06.jpg"); } ul#topnav li:hover span .girlLink { width: 38px; height: 31px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/snav01U.jpg"); } ul#topnav li:hover span .girlLink:hover { background-image: url("Content/Images/Nav/snav01.jpg"); } ul#topnav li:hover span .boyLink { width: 37px; height: 31px; display: block; font-size: 10px; text-decoration: none; background-repeat: no-repeat; background-image: url("Content/Images/Nav/snav02U.jpg"); } ul#topnav li:hover span .boyLink:hover { background-image: url("Content/Images/Nav/snav02.jpg"); } &lt;/style&gt; </code></pre> <p></code></p> <p>Html Code</p> <p><code> <li> </li></p> <pre><code> &lt;li&gt; &lt;a href="collection.aspx" id="collectionLink"&gt;&amp;nbsp; &lt;/a&gt; &lt;!--Subnav Starts Here--&gt; &lt;span&gt; &lt;a href="girl.aspx" class="girlLink"&gt;&amp;nbsp; &lt;/a&gt; &lt;a href="boy.aspx" class="boyLink"&gt;&amp;nbsp; &lt;/a&gt; &lt;/span&gt; &lt;!--Subnav Ends Here--&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p></code></p>
 

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