Skip to main content

javascript/css navigation menu not hiding nested ul



I have a navigation made and it has sub-levels, which works fine. However, I now want to add ANOTHER level to a sub-level, so that I can choose Lookup-->Webinar-->By Date





The way I have this set up, the extra level is not hidden by default. It is only supposed to show when the word "Webinar" gets hovered over. Can someone help?







<div id="menuwrapper">

<ul id="p7menubar">

<li><a href="#" class="trigger">Lookup</a>

<ul>

<li><a href="/ProductLookup.aspx">Product</a></li>

<li><a href="/CategoryLookup.aspx">Category</a></li>

<li><a href="#" class="subtrigger">Webinar</a>

<ul>

<li><a href="/WebinarLookupByDate.aspx">By Date</a></li>

<li><a href="/WebinarLookupByName.aspx">By Name</a></li>

<li><a href="/WebinarLookupByCategory.aspx">By Category</a></li>

</ul>

</li><!--end subtrigger-->

</ul>

</li><!-- end lookup trigger -->

</ul><!--end p7menubar-->

<br class="clearit" />

</div><!--end menuwrapper-->





/*

------------------------------------

PVII Menu CSS Express Drop-Down Menu

by Project Seven Development

www.projectseven.com

------------------------------------

*/



body {

font-family: "Trebuchet MS", Arial, sans-serif;

font-size: 100%;

background-color: #FFFFFF;

margin: 24px 0;

padding: 0; }



#menuwrapper {

border-bottom: 1px solid #EAEAEA;

background-color: #909090;

width: 100%;

background-image: url(/images/loginStatusBkgd.png);

background-repeat: repeat-x;

height: 29px;

font-size: 10pt; }



.clearit {

clear: both;

height: 0;

line-height: 0.0;

font-size: 0; }





#p7menubar, #p7menubar ul {

padding: 0;

margin: 0;

list-style: none;

font-family: Arial, Helvetica, sans-serif;

padding-right: 10px;

padding-left: 10px;

font-size: 10pt; }



#p7menubar a {

display: block;

text-decoration: none;

padding: 7px 10px 5px 10px;

border-right: 1px solid #EAEAEA;

font-size: 10pt;

color: #909090; }



#p7menubar a.trigger {

padding: 7px 16px 5px 10px;

background-image: url(/images/p7PM_dark_south.gif);

background-repeat: no-repeat;

background-position: right center;}



#p7menubar a.subtrigger{

padding: 2px 0px 5px 16px;

background-image: url(/images/p7PM_dark_south.gif);

background-repeat: no-repeat;

background-position: right center; }



#p7menubar li {

float: left;

width: 9em; }



#p7menubar li ul, #p7menubar ul li {

width: 12em; }



#p7menubar ul li a {

color: #565656;

border-right: 0;

padding: 3px 12px 3px 16px; }



#p7menubar li ul {

position: absolute;

display: none;

background-color: #FFFFFF;

border: 1px solid #EAEAEA; }





#p7menubar li:hover a, #p7menubar a:focus,

#p7menubar a:active, #p7menubar li.p7hvr a {

background-color: #365F91;

color: White;

text-decoration: none; }



#p7menubar li:hover ul, #p7menubar li.p7hvr ul {

display: block; }



#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {

background-color: #365F91;

color: #909090;

text-decoration: none;

background-color: transparent; }



#p7menubar ul a:hover {

background-color: #365F91!important;

color: White!important; }



#p7menubar li {width: auto; }









I don't know if the javascript will help, but I threw it in too.

*/

function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com

if(navigator.appVersion.indexOf("MSIE")==-1){return;}

var i,k,g,lg,r=/\s*p7hvr/,nn='',c,cs='p7hvr',bv='p7menubar';

for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){

lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){

lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;

this.className=cl;};lg[k].onmouseout=function(){c=this.className;

this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}




Comments

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.