Hi,
following up to the thread below, I managed to create the drop down menu like blip.tv's,
http://stackoverflow.com/questions/3508484/drop-down-menu-dotted-border-and-solid-border-in-one-line
here is the outcome,
http://quack-project.net/tmp/3/index.php
I use css and jquery to achieve that.
It works fine on all browers (Firefox, Safari, Chrome, Opera) accept IE (IE7).
Here is the picture showing what doesn't appear correctly on IE,
I don't know what have I done wrong in CSS or jquery. It seems that is the z-index which IE won't get it?? Please let me know if you know where the bugs are...
Below is the jquery code,
/**
loop through each <a>, if it has a sibling, then append the class of 'indicator'.
**/
$("#menu-admin a").each(function () {
if ( $(this).siblings().size() > 0 )
{
$(this).append("<span class='menu-admin-sub-indicator'></span>");
var width = $(this).width();
//alert(width);
$(this).css({width: width+8+'px'});
}
});
/**
control the style of the drop-down:level 1 when you hover it.
**/
$("#menu-admin > ul > li > a").hover(function () {
if ( $(this).siblings().size() > 0 )
{
$(this).css({
zIndex: '100'
});
}
},
function(){
$(this).css({
zIndex: ''
});
});
/**
control the style of all drop-down:level 2 & level 3.
**/
$('#menu-admin > ul > li > ul > li:last-child > a, #menu-admin > ul > li > ul > li > ul > li:last-child > a').css({
borderBottom: '0px solid #666'
});
/**
code below is to control the menu-admin when you hover on the sub menus.
**/
$("#menu-admin > ul > li > ul").hover(function () {
$(this).parent().addClass("hover-grandparent");
},
function(){
$(this).parent().removeClass("hover-grandparent");
});
$("#menu-admin ul ul ul").hover(function () {
$(this).parent().addClass("hover-parent");
$(this).children().addClass("hover-children");
},
function(){
$(this).parent().removeClass("hover-parent");
$(this).children().removeClass("hover-children");
});
below is the css,
/* cmsmenu style */
#menu-admin {
position:fixed;
left:0px;
/*bottom:0px; use this condition if the menu is fixed to the bottom */
top:0; /*use this condition if the menu is fixed to the top */
width:100%;
padding:5px 0px 5px 0px;
overflow:visible;
background-color:#f3f1f1;
border-bottom: 1px solid #c5c5c5;
}
/* IE 6 */
* html #menu-admin {
position:absolute;
top:expression((0-(menu-admin.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
#menu-admin > ul > li > ul {
/*bottom:23px; use this condition if the menu is fixed to the bottom */
}
#menu-admin .current-menu-admin {
color:#000000;
}
#menu-admin .hover-grandparent > a {
background-color:#ffffff !important;
z-index:100;
position:relative;
border-left: 1px solid #c5c5c5;
border-right: 1px solid #c5c5c5;
border-top: 1px solid #c5c5c5;
border-bottom: 1px dotted #c5c5c5;
}
#menu-admin .hover-parent > a {
background-color:#edebeb !important;
}
#menu-admin .hover-children > a {
/*
background-color:#333 !important;
border-bottom: 1px solid #333;
border-left: 0px solid #333;
border-right: 1px solid #333;
*/
}
/**************************************/
/* drop down menu global */
#menu-admin li {
/*
Use 'position: relative' for the third level drop down,
may only consider this only if the menu is fixed to the top
*/
position: relative;/**/
}
#menu-admin a {
display: block;
font-size:11px;
text-decoration: none;
border:0px solid #0066FF;
color:#767575;
}
#menu-admin a:hover {
text-decoration: underline;
}
#menu-admin .admin-menu-singleton:hover {
background-color:#f3f1f1 !important;
border: 1px solid #f3f1f1 !important;
}
/* drop down menu local level 1 */
#menu-admin > ul > li {
float:left;
margin:0px 1px 0px 0px;
}
#menu-admin > ul > li > a {
padding: 2px 8px 2px 8px;
border: 1px solid #f3f1f1;
/**
for testing purposes only:
**
background-color:#ffffff;
border-left: 1px solid #c5c5c5;
border-right: 1px solid #c5c5c5;
border-top: 1px solid #c5c5c5;
border-bottom: 1px dotted #c5c5c5;
**/
/**
very important to have the lines below.
make this element position: relative and gave it a higher z-index than its drop-down menu.
then the dropdown menu <ul> has a solid border all around it and is position absolute. When it appears,
it is positioned 1px under its invoking link (which makes it look like the dotted and solid borders are on the same line).
position:relative;
z-index:100;
**/
position:relative;
}
#menu-admin > ul > li > a > span{
/*
display:block;
padding:0px 15px 0px 0px;
*/
}
#menu-admin > ul > li > a:hover {
background-color:#ffffff;
border-left: 1px solid #c5c5c5;
border-right: 1px solid #c5c5c5;
border-top: 1px solid #c5c5c5;
border-bottom: 1px dotted #c5c5c5;
}
/* drop down menu local level 2 */
#menu-admin > ul > li > ul {
display: none;
position: absolute;
white-space: nowrap;
border: 1px solid #c5c5c5;
margin-top:-1px;
/**
very important to have the line below.
**/
z-index:99;
}
#menu-admin > ul > li > ul > li {
float: none;
}
#menu-admin > ul > li > ul > li > a {
padding:3px 8px 3px 8px;
background-color: #ffffff;
border-bottom: 1px dotted #c5c5c5;
min-width:80px;
}
#menu-admin > ul > li:hover ul,
#menu-admin > ul > li.hover ul {
display: block;
}
#menu-admin > ul > li:hover li > a,
#menu-admin > ul > li.hover li > a {
/*
border-bottom: 1px solid #ffffff;
width:200px; use a fixed width to fix IE if use 'position: relative' on all <li>*/
}
#menu-admin > ul > li > ul > li > a:hover {
background-color:#edebeb;
}
/* drop down menu local level 3 */
#menu-admin > ul > li > ul > li > ul {
display: none;
position: absolute;
white-space: nowrap;
left:100%;
top:-1px; /*use this condition if the menu is fixed to the top */
/*bottom:0; use this condition if the menu is fixed to the bottom */
border: 1px solid #c5c5c5;
}
#menu-admin > ul > li > ul > li > ul > li {
float: none;
}
#menu-admin > ul > li > ul > li > ul > li > a {
padding:3px 8px 3px 8px;
background-color: #f3f1f1;
border-bottom: 1px dotted #c5c5c5;
min-width:80px;
}
/*
don't display the 3rd level drop down
when it hovers on 2nd level.
*/
#menu-admin > ul > li:hover ul ul,
#menu-admin > ul > li.hover ul ul {
display: none;
}
#menu-admin > ul > li > ul > li:hover ul,
#menu-admin > ul > li > ul > li.hover ul {
display: block;
}
#menu-admin > ul > li > ul > li > ul > li > a:hover {
}
#menu-admin ul.showme {
display: block;
}
/*** sub-indicator style **/
.menu-admin-sub-indicator {
position: absolute;
display: block;
right: .50em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/global/arrows-3f70aa.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .menu-admin-sub-indicator { /* give all except IE6 the correct values */
top: .4em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .menu-admin-sub-indicator,
a:hover > .menu-admin-sub-indicator,
a:active > .menu-admin-sub-indicator,
li:hover > a > .menu-admin-sub-indicator,
li.sfHover > a > .menu-admin-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
ul ul.menu-admin-sub-indicator { background-position: -10px 0; }
ul ul a > .menu-admin-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
ul ul a:focus > .menu-admin-sub-indicator,
ul ul a:hover > .menu-admin-sub-indicator,
ul ul a:active > .menu-admin-sub-indicator,
ul ul li:hover > a > .menu-admin-sub-indicator,
ul ul li.sfHover > a > .menu-admin-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
Many thanks, Lau