Hi,
How can I use css to make the dotted border and solid border in one line in a drop down menu this site,
here is the image I highlighted the line that I meant above,
here is the link of the drop menu which I fail to make the line like above. what I get is either a total solid border or dotted border, and I can’t have them both dynamical like the site above.
http://quack-project.net/tmp/list_2.htm
some abstract of the css,
/* drop down menu local level 1 */
#footer > ul > li {
float:left;
margin:0px 15px 0px 0px;
}
#footer > ul > li > a {
padding: 4px 8px 4px 0px;
list-style-type:disc;
list-style-position:inside;
display:list-item;
text-decoration:none;
color:#ffffff;
border:0px solid #0066FF;
}
#footer > ul > li > a:hover {
color:#000000;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
/* drop down menu local level 2 */
#footer > ul > li > ul{
display:none;
position: absolute;
border: 1px solid #000;
min-width:200px;
}
#footer > ul > li > ul > li {
float: none;
}
#footer > ul > li > ul > li > a {
padding:4px 15px 4px 15px;
}
#footer > ul > li:hover ul ,
#footer > ul > li.hover ul {
display: block;
}
#footer > ul > li:hover li > a,
#footer > ul > li.hover li > a {
background-color: #b8b2b2;
border-bottom: 1px solid #ffffff;
color: #000000;
/*width:200px; use a fixed width to fix IE if use 'position: relative' on all <li>*/
}
#footer > ul > li > ul > li > a:hover {
color:#000000;
background-color:#cccccc;
}
is it some tricks in javascript or using images?
many thanks
Lau
