Hi All,
Im working on a dropline menu for a client, everything is working fine however they want the menu to only display the dropline for the active page. i followed the cssplay example and amended the code from a previous post about aligning the dropline 2nd level to the right.
as it stands now you click on an element, the drop line shows underneath it, as you mouse over to the left or right the sublevels will show on hover. we want them to not display the sub level until you click on the required page.
my code is as follows:
CSS:
/* common styling */
.menu
{
font-family: arial, sans-serif;
width:959px;
position:relative;
margin:0;
font-size:12px;
margin:0px 0;
background:transparent;
position:relative;
}
.menu ul
{
float:right;
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li
{
float:left;
border-left:1px solid #eee;
width:auto;
}
.menu ul li.last
{
border-right:1px solid #eee;
}
.menu ul li a, .menu ul li a:visited
{
display:block;
float:left;
width:auto;
text-decoration:none;
padding:0 15px 0 15px;
height:36px;
line-height:36px;
color:#fff;
}
.menu ul li ul
{
display: none;
}
/* specific to non IE browsers */
.menu ul li:hover a, .menu ul li:active a {
color:#fff;
background-image: url(../pulse/images/nav-bg-hover.jpg);
background-repeat:repeat-x;
}
.menu ul li:hover ul, .menu ul li.active ul
{
display:block;
position:absolute;
width:900px;
top:36px;
right:0;
background:transparent;
color:#fff;
height:29px;
float:right;
}
.menu ul li:hover ul li a.hide, .menu ul li.active ul li a.hide
{
color:#fff;
}
.menu ul li:hover ul li:hover a.hide, .menu ul li:.active ul li.active a.hide
{
color:#fff;
}
.menu ul li:hover ul li ul, .menu ul li.active ul li ul
{
display: inline;
}
.menu ul li:hover ul li a, .menu ul li.active ul li a
{
display:block;
background:transparent;
height:29px;
padding:0px;
margin:0px;
line-height:28px;
padding-left:6px;
padding-right:6px;
}
.menu ul li:hover ul li a:hover
{
background:#144F6F;
color:#fff;
line-height:28px;
}
inner:
<div style="text-align:right;">
<ul>
[+wf.wrapper+]
</ul>
</div>
outer
<div[+wf.classes+]>
<ul>
[+wf.wrapper+]
</ul>
</div>
parent row
<li[+wf.classes+]><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<!--[if lte IE 6]>
<a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
<table><tr><td>
<![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
row:
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
Thanks for any help, i really need to stop our designers using droplines.
