2nd level navigation with dropdown on hover

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

umbracov 38 posts 58 karma points

Mar 22, 2011 @ 18:57

0

2nd Level Navigation with Dropdown on hover

I have top level horizontal navigation with multiple tabs. Clicking/hovering on one should diplay all the sub menu's as dropdown and the user should be able to click on it to display the page. I have the code that displays the 2nd level navigation as ul/li in relative position.Could some one help me hovering effect on the SubMenu or direct me on samples that might already be in there.

Copy Link
Daniel Bardi 927 posts 2562 karma points

Mar 22, 2011 @ 19:02
0
Using CSS, set the sub ul to display:none then set the li:hover ul to display:block
```
.menu li ul {display:none;}
.menu li:hover ul {display:block;}
```
Here's a good overview: http://www.seoconsultants.com/css/menus/tutorial/
Copy Link

umbracov 38 posts 58 karma points

Mar 24, 2011 @ 19:15

Daniel,

Thanks for your help. I have been able to get this working on FF but not in IE. I have IE 8 and the display: blok does not display the subpages. Here is the CSS I use. Any insight on this highly apprecialted.

#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menu a, #menu h2 {
display: block;
border-width: 0px;
border-style: none;
margin: 0;
padding: 0px 0px;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background:green;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;}

#menu ul ul ul {
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

HTML code as follows........ I have reference to csshover.htc

 < div id="menu">
 <ul>
 <li><a href="#"> <img name="About" src="" width="141" height="39" border="0" id="Img1" /></a> 
 
<ul>
 <li><a href="">Management</a></li>
 <li><a href="">Careers</a></li>
 <li><a href="">Privacy Policy</a></li>
 </ul>
 </li>
 </ul>
 <ul>
 <li><a href=""> <img name="byindustry" width="135" height="39" border="0" id="Img2" src="" /></a>
 <ul>
 <li><a href="">Origination</a></li>
 <li><a href="">Servicing</a></li>
 <li><a href="">Quality Control</a></li>
 </ul>
 </li>
 </ul>
</
 
div>

Thanks.

Copy Link

umbracov 38 posts 58 karma points

Mar 25, 2011 @ 19:56
0
I had the below code in my Template and removing it from there seemed to make the Hover effect work perfectly as intended.
```
<xsl:copy-of select="$currentPage"/>
```
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?