IM building a site for a client and they have changed their mind in the way they want the navigation to work.
the want to move their solutions into the product level but this creates a 3rd level menu
i currently have something working but they want it to appear all the time rather than on hover
the site url is under NDA so im not sure if i can provide it here....
the chunks are the standard drop down menu from muddydogpaws but the css is as follows (please ignore the opacity client wanted to try it):
/* common styling */
.menu {
font-family:Verdana, Arial, Helvetica, sans-serif;
width:980px;
position:relative;
font-size:11px;
margin:0px 0 0px 0px;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#282560;
min-width:115px;
width:auto;
height:32px;
text-align:left;
background:transparent;
line-height:20px;
font-size:11px;
overflow:hidden;
border-right:1px solid #282560;
text-align:center;
letter-spacing:1px;
}
.menu ul li.last a{
border-right:none;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
margin-right:0px;
position:relative; }
.menu ul li ul {
display: none; }
/* specific to non IE browsers */
.menu ul li:hover a {color:#000000; background:transparent;}
.menu ul li:hover ul {display:block;
position:absolute;
top:32px;
left:0;
width:115px;
font-size:10px;}
.menu ul li:hover ul li a.hide {background:#09b4bc; color:#000000;}
.menu ul li:hover ul li:hover a.hide { color:#000000;}
.menu ul li:hover ul li ul {display: none; }
.menu ul li:hover ul li a {display:block;
background:#09b4bc;
color:#000000;
font-size:10px;
line-height:20px;
height:25px;
text-align:left;
padding-left:5px;
min-width:115px;
letter-spacing:0px;
border-right:none;
/*
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;*/
width:160px;
}
/*drop down colors*/
.menu ul li:hover ul li a:hover {
background: #0bd7e1;
color:#000000;
font-size:10px;
line-height:20px;
/*
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;*/
}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
.menu ul li:hover ul li ul li a {display:block;
background:#09b4bc;
color:#000000;
font-size:10px;
line-height:20px;
height:25px;
text-align:left;
padding-left:5px;
min-width:115px;
letter-spacing:0px;
border-right:none:
/*
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;*/
width:160px;
text-indent:10px;
margin-left:-105px;
}
.menu ul li:hover ul li ul li.first a {display:block;
background:#09b4bc;
color:#000000;
font-size:10px;
line-height:20px;
height:25px;
text-align:left;
padding-left:5px;
min-width:115px;
letter-spacing:0px;
/*
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;*/
width:160px;
text-indent:10px;
margin-left:-105px;
margin-top:25px;
}
/*start of 3rd level*/
.menu ul li:hover ul li ul li a:hover {
background: #0bd7e1;
color:#000000;
font-size:10px;
line-height:20px;
/*
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;*/
top:32px;
}
.menu ul li:hover ul li ul li:hover ul {display:block; position:absolute; left:105px; top:0px;}
.menu ul li:hover ul li ul li:hover ul.left {left:-105px;}
Anyone got a way of making the 3rd level ’always on?’
☆ A M B ☆
e-book about the wayfinder inside-out: "The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder"