JS,CSS菜單
轉自:
http://www.cnbruce.com/blog/showlog.asp?log_id=1086
1,
3,
4,
1,
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > css菜单 </ title >
< style >
body {
background-color : #B8B8A0 ;
}
#fbtn {
display : none ;
overflow : hidden ;
border-style : solid ;
border-width : 1px ;
border-color : #e1e1c9 #e1e1c9 #6e6e56 #6e6e56 ;
padding : 1 1 1 1 ;
width : 115px ;
height : 30px ;
}
#fbtn_txt {
position : relative ;
}
#fbtn_txt div {
height : 30px ;
padding-top : 11px ;
font-size : 12px ;
color : #800080 ;
text-align : center ;
cursor : hand ;
}
#fbtn_mask {
background-color : #ffffff ;
position : relative ;
width : 100% ;
height : 100% ;
}
</ style >
</ head >
< body >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G1 </ div >
< div > good morning </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G2 </ div >
< div > good evening </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M1 </ div >
< div > my name is fireyy </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M2 </ div >
< div > mm mm i love u </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G1 </ div >
< div > good morning </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G2 </ div >
< div > good evening </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M1 </ div >
< div > my name is fireyy </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M2 </ div >
< div > mm mm i love u </ div >
</ div >
</ div >
< script >
var current = null ;
var t = null ;
for ( var i = 0 ;i < fbtn.length;i ++ ){
fbtn_txt[i].style.posTop =- 30 ;
fbtn_mask[i].style.posTop =- 30 ;
fbtn[i].index = i;
fbtn[i].style.display = " block " ;
fbtn[i].onmouseover = function (){
if ( ! current){
current = this ;
domove( this .index);
}
else
if (current != this ){
domove(current.index);
domove( this .index);
current = this ;
}
}
fbtn[i].onmouseout = function (){
if (event.toElement == this .parentElement & t == this ){
domove( this .index);
current = null ;
}
}
}
function domove(num){
var o = fbtn_txt[num];
var m = fbtn_mask[num];
if (o.style.posTop <- 60 ){
o.style.display = " none " ;
var t = o.children[ 1 ].innerHTML;
o.children[ 1 ].innerHTML = o.children[ 0 ].innerHTML;
o.children[ 0 ].innerHTML = t;
o.style.posTop =- 30 ;
o.style.display = " block " ;
if (m.style.posTop > 30 )
m.style.posTop =- 30 ;
else
m.style.posTop = 0 ;
}
else {
m.style.posTop += 3 ;
o.style.posTop -= 3 ;
setTimeout( ' domove( ' + num + ' ) ' , 15 );
}
}
</ script >
</ body >
</ html >
2,
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > css菜单 </ title >
< style >
body {
background-color : #B8B8A0 ;
}
#fbtn {
display : none ;
overflow : hidden ;
border-style : solid ;
border-width : 1px ;
border-color : #e1e1c9 #e1e1c9 #6e6e56 #6e6e56 ;
padding : 1 1 1 1 ;
width : 115px ;
height : 30px ;
}
#fbtn_txt {
position : relative ;
}
#fbtn_txt div {
height : 30px ;
padding-top : 11px ;
font-size : 12px ;
color : #800080 ;
text-align : center ;
cursor : hand ;
}
#fbtn_mask {
background-color : #ffffff ;
position : relative ;
width : 100% ;
height : 100% ;
}
</ style >
</ head >
< body >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G1 </ div >
< div > good morning </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G2 </ div >
< div > good evening </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M1 </ div >
< div > my name is fireyy </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M2 </ div >
< div > mm mm i love u </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G1 </ div >
< div > good morning </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > G2 </ div >
< div > good evening </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M1 </ div >
< div > my name is fireyy </ div >
</ div >
</ div >
< div id =fbtn >
< div id =fbtn_mask ></ div >
< div id =fbtn_txt >
< div > M2 </ div >
< div > mm mm i love u </ div >
</ div >
</ div >
< script >
var current = null ;
var t = null ;
for ( var i = 0 ;i < fbtn.length;i ++ ){
fbtn_txt[i].style.posTop =- 30 ;
fbtn_mask[i].style.posTop =- 30 ;
fbtn[i].index = i;
fbtn[i].style.display = " block " ;
fbtn[i].onmouseover = function (){
if ( ! current){
current = this ;
domove( this .index);
}
else
if (current != this ){
domove(current.index);
domove( this .index);
current = this ;
}
}
fbtn[i].onmouseout = function (){
if (event.toElement == this .parentElement & t == this ){
domove( this .index);
current = null ;
}
}
}
function domove(num){
var o = fbtn_txt[num];
var m = fbtn_mask[num];
if (o.style.posTop <- 60 ){
o.style.display = " none " ;
var t = o.children[ 1 ].innerHTML;
o.children[ 1 ].innerHTML = o.children[ 0 ].innerHTML;
o.children[ 0 ].innerHTML = t;
o.style.posTop =- 30 ;
o.style.display = " block " ;
if (m.style.posTop > 30 )
m.style.posTop =- 30 ;
else
m.style.posTop = 0 ;
}
else {
m.style.posTop += 3 ;
o.style.posTop -= 3 ;
setTimeout( ' domove( ' + num + ' ) ' , 15 );
}
}
</ script >
</ body >
</ html >
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU </ title >
< style type ="text/css" >
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family : arial, sans-serif ;
width : 750px ;
margin : 0 ;
margin : 50px 0 ;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding : 0 ;
margin : 0 ;
list-style-type : none ;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float : left ;
position : relative ;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display : block ;
text-align : center ;
text-decoration : none ;
width : 104px ;
height : 30px ;
color : #000 ;
border : 1px solid #fff ;
border-width : 1px 1px 0 0 ;
background : #c9c9a7 ;
line-height : 30px ;
font-size : 11px ;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display : none ;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color : #fff ;
background : #b3ab79 ;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display : block ;
position : absolute ;
top : 31px ;
left : 0 ;
width : 105px ;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display : block ;
background : #faeec7 ;
color : #000 ;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background : #dfc184 ;
color : #000 ;
}
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<![endif] -->
</ head >
< body >
< div class ="menu" >
< ul >
< li >< a class ="hide" href ="../menu/index.html" > DEMOS </ a >
<!-- [if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/zero_dollars.html" title ="The zero dollar ads page" > zero dollars </ a ></ li >
< li >< a href ="../menu/embed.html" title ="Wrapping text around images" > wrapping text </ a ></ li >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/shadow_boxing.html" title ="Multi-position drop shadow" > shadow boxing </ a ></ li >
< li >< a href ="../menu/old_master.html" title ="Image Map for detailed information" > image map </ a ></ li >
< li >< a href ="../menu/bodies.html" title ="fun with background images" > fun backgrounds </ a ></ li >
< li >< a href ="../menu/fade_scroll.html" title ="fade-out scrolling" > fade scrolling </ a ></ li >
< li >< a href ="../menu/em_images.html" title ="em size images compared" > em sized images </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="index.html" > MENUS </ a >
<!-- [if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../layouts/index.html" > LAYOUTS </ a >
<!-- [if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../layouts/bodyfix.html" title ="Cross browser fixed layout" > Fixed 1 </ a ></ li >
< li >< a href ="../layouts/body2.html" title ="Cross browser fixed layout" > Fixed 2 </ a ></ li >
< li >< a href ="../layouts/body4.html" title ="Cross browser fixed layout" > Fixed 3 </ a ></ li >
< li >< a href ="../layouts/body5.html" title ="Cross browser fixed layout" > Fixed 4 </ a ></ li >
< li >< a href ="../layouts/minimum.html" title ="A simple minimum width layout" > minimum width </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../boxes/index.html" > BOXES </ a >
<!-- [if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../mozilla/index.html" > MOZILLA </ a >
<!-- [if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../mozilla/dropdown.html" title ="A drop down menu" > drop down menu </ a ></ li >
< li >< a href ="../mozilla/cascade.html" title ="A cascading menu" > cascading menu </ a ></ li >
< li >< a href ="../mozilla/content.html" title ="Using content:" > content: </ a ></ li >
< li >< a href ="../mozilla/moxbox.html" title =":hover applied to a div" > mozzie box </ a ></ li >
< li >< a href ="../mozilla/rainbow.html" title ="I can build a rainbow" > rainbow box </ a ></ li >
< li >< a href ="../mozilla/snooker.html" title ="Snooker cue" > snooker cue </ a ></ li >
< li >< a href ="../mozilla/target.html" title ="Target Practise" > target practise </ a ></ li >
< li >< a href ="../mozilla/splittext.html" title ="Two tone headings" > two tone headings </ a ></ li >
< li >< a href ="../mozilla/shadow_text.html" title ="Shadow text" > shadow text </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../ie/index.html" > EXPLORER </ a >
<!-- [if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../ie/exampleone.html" title ="Example one" > example one </ a ></ li >
< li >< a href ="../ie/weft.html" title ="Weft fonts" > weft fonts </ a ></ li >
< li >< a href ="../ie/exampletwo.html" title ="Vertical align" > vertical align </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../opacity/index.html" > OPACITY </ a >
<!-- [if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../opacity/colours.html" title ="colour wheel" > opaque colours </ a ></ li >
< li >< a href ="../opacity/picturemenu.html" title ="a menu using opacity" > opaque menu </ a ></ li >
< li >< a href ="../opacity/png.html" title ="partial opacity" > partial opacity </ a ></ li >
< li >< a href ="../opacity/png2.html" title ="partial opacity II" > partial opacity II </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
<!-- clear the floats if required -->
< div class ="clear" > </ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU </ title >
< style type ="text/css" >
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family : arial, sans-serif ;
width : 750px ;
margin : 0 ;
margin : 50px 0 ;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding : 0 ;
margin : 0 ;
list-style-type : none ;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float : left ;
position : relative ;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display : block ;
text-align : center ;
text-decoration : none ;
width : 104px ;
height : 30px ;
color : #000 ;
border : 1px solid #fff ;
border-width : 1px 1px 0 0 ;
background : #c9c9a7 ;
line-height : 30px ;
font-size : 11px ;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display : none ;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color : #fff ;
background : #b3ab79 ;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display : block ;
position : absolute ;
top : 31px ;
left : 0 ;
width : 105px ;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display : block ;
background : #faeec7 ;
color : #000 ;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background : #dfc184 ;
color : #000 ;
}
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<![endif] -->
</ head >
< body >
< div class ="menu" >
< ul >
< li >< a class ="hide" href ="../menu/index.html" > DEMOS </ a >
<!-- [if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/zero_dollars.html" title ="The zero dollar ads page" > zero dollars </ a ></ li >
< li >< a href ="../menu/embed.html" title ="Wrapping text around images" > wrapping text </ a ></ li >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/shadow_boxing.html" title ="Multi-position drop shadow" > shadow boxing </ a ></ li >
< li >< a href ="../menu/old_master.html" title ="Image Map for detailed information" > image map </ a ></ li >
< li >< a href ="../menu/bodies.html" title ="fun with background images" > fun backgrounds </ a ></ li >
< li >< a href ="../menu/fade_scroll.html" title ="fade-out scrolling" > fade scrolling </ a ></ li >
< li >< a href ="../menu/em_images.html" title ="em size images compared" > em sized images </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="index.html" > MENUS </ a >
<!-- [if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../layouts/index.html" > LAYOUTS </ a >
<!-- [if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../layouts/bodyfix.html" title ="Cross browser fixed layout" > Fixed 1 </ a ></ li >
< li >< a href ="../layouts/body2.html" title ="Cross browser fixed layout" > Fixed 2 </ a ></ li >
< li >< a href ="../layouts/body4.html" title ="Cross browser fixed layout" > Fixed 3 </ a ></ li >
< li >< a href ="../layouts/body5.html" title ="Cross browser fixed layout" > Fixed 4 </ a ></ li >
< li >< a href ="../layouts/minimum.html" title ="A simple minimum width layout" > minimum width </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../boxes/index.html" > BOXES </ a >
<!-- [if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../mozilla/index.html" > MOZILLA </ a >
<!-- [if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../mozilla/dropdown.html" title ="A drop down menu" > drop down menu </ a ></ li >
< li >< a href ="../mozilla/cascade.html" title ="A cascading menu" > cascading menu </ a ></ li >
< li >< a href ="../mozilla/content.html" title ="Using content:" > content: </ a ></ li >
< li >< a href ="../mozilla/moxbox.html" title =":hover applied to a div" > mozzie box </ a ></ li >
< li >< a href ="../mozilla/rainbow.html" title ="I can build a rainbow" > rainbow box </ a ></ li >
< li >< a href ="../mozilla/snooker.html" title ="Snooker cue" > snooker cue </ a ></ li >
< li >< a href ="../mozilla/target.html" title ="Target Practise" > target practise </ a ></ li >
< li >< a href ="../mozilla/splittext.html" title ="Two tone headings" > two tone headings </ a ></ li >
< li >< a href ="../mozilla/shadow_text.html" title ="Shadow text" > shadow text </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../ie/index.html" > EXPLORER </ a >
<!-- [if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../ie/exampleone.html" title ="Example one" > example one </ a ></ li >
< li >< a href ="../ie/weft.html" title ="Weft fonts" > weft fonts </ a ></ li >
< li >< a href ="../ie/exampletwo.html" title ="Vertical align" > vertical align </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../opacity/index.html" > OPACITY </ a >
<!-- [if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../opacity/colours.html" title ="colour wheel" > opaque colours </ a ></ li >
< li >< a href ="../opacity/picturemenu.html" title ="a menu using opacity" > opaque menu </ a ></ li >
< li >< a href ="../opacity/png.html" title ="partial opacity" > partial opacity </ a ></ li >
< li >< a href ="../opacity/png2.html" title ="partial opacity II" > partial opacity II </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
<!-- clear the floats if required -->
< div class ="clear" > </ div >
</ div >
</ body >
</ html >
3,
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 三级dropdown弹出菜单 </ title >
< style type ="text/css" >
/* common styling */
.menu { font-family : arial, sans-serif ; width : 750px ; position : relative ; margin : 0 ; font-size : 11px ; margin : 50px 0 ; }
.menu ul li a, .menu ul li a:visited { display : block ; text-decoration : none ; color : #000 ; width : 104px ; height : 20px ; text-align : center ; color : #fff ; border : 1px solid #fff ; background : #710069 ; line-height : 20px ; font-size : 11px ; overflow : hidden ; }
.menu ul { padding : 0 ; margin : 0 ; list-style-type : none ; }
.menu ul li { float : left ; margin-right : 1px ; position : relative ; }
.menu ul li ul { display : none ; }
/* specific to non IE browsers */
.menu ul li:hover a { color : #fff ; background : #36f ; }
.menu ul li:hover ul { display : block ; position : absolute ; top : 21px ; left : 0 ; width : 105px ; }
.menu ul li:hover ul li a.hide { background : #6a3 ; color : #fff ; }
.menu ul li:hover ul li:hover a.hide { background : #6fc ; color : #000 ; }
.menu ul li:hover ul li ul { display : none ; }
.menu ul li:hover ul li a { display : block ; background : #ddd ; color : #000 ; }
.menu ul li:hover ul li a:hover { background : #6fc ; color : #000 ; }
.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 ; }
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
</style>
<![endif] -->
</ head >
< body >
< div class ="menu" >
< ul >
< li >< a class ="hide" href ="../menu/index.html" > DEMOS </ a >
<!-- [if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/zero_dollars.html" title ="The zero dollar ads page" > zero dollars </ a ></ li >
< li >< a href ="../menu/embed.html" title ="Wrapping text around images" > wrapping text </ a ></ li >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a class ="hide" href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > HOVER/CLICK > </ a >
<!-- [if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > hover/click </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a href ="../menu/shadow_boxing.html" title ="Multi-position drop shadow" > shadow boxing </ a ></ li >
< li >< a href ="../menu/old_master.html" title ="Image Map for detailed information" > image map </ a ></ li >
< li >< a href ="../menu/bodies.html" title ="fun with background images" > fun backgrounds </ a ></ li >
< li >< a href ="../menu/fade_scroll.html" title ="fade-out scrolling" > fade scrolling </ a ></ li >
< li >< a href ="../menu/em_images.html" title ="em size images compared" > em sized images </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="index.html" > MENUS </ a >
<!-- [if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../layouts/index.html" > LAYOUTS </ a >
<!-- [if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../layouts/bodyfix.html" title ="Cross browser fixed layout" > Fixed 1 </ a ></ li >
< li >< a href ="../layouts/body2.html" title ="Cross browser fixed layout" > Fixed 2 </ a ></ li >
< li >< a href ="../layouts/body4.html" title ="Cross browser fixed layout" > Fixed 3 </ a ></ li >
< li >< a href ="../layouts/body5.html" title ="Cross browser fixed layout" > Fixed 4 </ a ></ li >
< li >< a href ="../layouts/minimum.html" title ="A simple minimum width layout" > minimum width </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../boxes/index.html" > BOXES </ a >
<!-- [if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../mozilla/index.html" > MOZILLA </ a >
<!-- [if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../mozilla/dropdown.html" title ="A drop down menu" > drop down menu </ a ></ li >
< li >< a href ="../mozilla/cascade.html" title ="A cascading menu" > cascading menu </ a ></ li >
< li >< a href ="../mozilla/content.html" title ="Using content:" > content: </ a ></ li >
< li >< a href ="../mozilla/moxbox.html" title =":hover applied to a div" > mozzie box </ a ></ li >
< li >< a href ="../mozilla/rainbow.html" title ="I can build a rainbow" > rainbow box </ a ></ li >
< li >< a href ="../mozilla/snooker.html" title ="Snooker cue" > snooker cue </ a ></ li >
< li >< a href ="../mozilla/target.html" title ="Target Practise" > target practise </ a ></ li >
< li >< a href ="../mozilla/splittext.html" title ="Two tone headings" > two tone headings </ a ></ li >
< li >< a href ="../mozilla/shadow_text.html" title ="Shadow text" > shadow text </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../ie/index.html" > EXPLORER </ a >
<!-- [if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../ie/exampleone.html" title ="Example one" > example one </ a ></ li >
< li >< a href ="../ie/weft.html" title ="Weft fonts" > weft fonts </ a ></ li >
< li >< a href ="../ie/exampletwo.html" title ="Vertical align" > vertical align </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../opacity/index.html" > OPACITY </ a >
<!-- [if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../opacity/colours.html" title ="colour wheel" > opaque colours </ a ></ li >
< li >< a href ="../opacity/picturemenu.html" title ="a menu using opacity" > opaque menu </ a ></ li >
< li >< a href ="../opacity/png.html" title ="partial opacity" > partial opacity </ a ></ li >
< li >< a href ="../opacity/png2.html" title ="partial opacity II" > partial opacity II </ a ></ li >
< li >< a class ="hide" href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > < HOVER/CLICK </ a >
<!-- [if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK
<table><tr><td>
<![endif] -->
< ul class ="left" >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > hover/click </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 三级dropdown弹出菜单 </ title >
< style type ="text/css" >
/* common styling */
.menu { font-family : arial, sans-serif ; width : 750px ; position : relative ; margin : 0 ; font-size : 11px ; margin : 50px 0 ; }
.menu ul li a, .menu ul li a:visited { display : block ; text-decoration : none ; color : #000 ; width : 104px ; height : 20px ; text-align : center ; color : #fff ; border : 1px solid #fff ; background : #710069 ; line-height : 20px ; font-size : 11px ; overflow : hidden ; }
.menu ul { padding : 0 ; margin : 0 ; list-style-type : none ; }
.menu ul li { float : left ; margin-right : 1px ; position : relative ; }
.menu ul li ul { display : none ; }
/* specific to non IE browsers */
.menu ul li:hover a { color : #fff ; background : #36f ; }
.menu ul li:hover ul { display : block ; position : absolute ; top : 21px ; left : 0 ; width : 105px ; }
.menu ul li:hover ul li a.hide { background : #6a3 ; color : #fff ; }
.menu ul li:hover ul li:hover a.hide { background : #6fc ; color : #000 ; }
.menu ul li:hover ul li ul { display : none ; }
.menu ul li:hover ul li a { display : block ; background : #ddd ; color : #000 ; }
.menu ul li:hover ul li a:hover { background : #6fc ; color : #000 ; }
.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 ; }
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
</style>
<![endif] -->
</ head >
< body >
< div class ="menu" >
< ul >
< li >< a class ="hide" href ="../menu/index.html" > DEMOS </ a >
<!-- [if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/zero_dollars.html" title ="The zero dollar ads page" > zero dollars </ a ></ li >
< li >< a href ="../menu/embed.html" title ="Wrapping text around images" > wrapping text </ a ></ li >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a class ="hide" href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > HOVER/CLICK > </ a >
<!-- [if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > hover/click </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a href ="../menu/shadow_boxing.html" title ="Multi-position drop shadow" > shadow boxing </ a ></ li >
< li >< a href ="../menu/old_master.html" title ="Image Map for detailed information" > image map </ a ></ li >
< li >< a href ="../menu/bodies.html" title ="fun with background images" > fun backgrounds </ a ></ li >
< li >< a href ="../menu/fade_scroll.html" title ="fade-out scrolling" > fade scrolling </ a ></ li >
< li >< a href ="../menu/em_images.html" title ="em size images compared" > em sized images </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="index.html" > MENUS </ a >
<!-- [if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../layouts/index.html" > LAYOUTS </ a >
<!-- [if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../layouts/bodyfix.html" title ="Cross browser fixed layout" > Fixed 1 </ a ></ li >
< li >< a href ="../layouts/body2.html" title ="Cross browser fixed layout" > Fixed 2 </ a ></ li >
< li >< a href ="../layouts/body4.html" title ="Cross browser fixed layout" > Fixed 3 </ a ></ li >
< li >< a href ="../layouts/body5.html" title ="Cross browser fixed layout" > Fixed 4 </ a ></ li >
< li >< a href ="../layouts/minimum.html" title ="A simple minimum width layout" > minimum width </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../boxes/index.html" > BOXES </ a >
<!-- [if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../mozilla/index.html" > MOZILLA </ a >
<!-- [if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../mozilla/dropdown.html" title ="A drop down menu" > drop down menu </ a ></ li >
< li >< a href ="../mozilla/cascade.html" title ="A cascading menu" > cascading menu </ a ></ li >
< li >< a href ="../mozilla/content.html" title ="Using content:" > content: </ a ></ li >
< li >< a href ="../mozilla/moxbox.html" title =":hover applied to a div" > mozzie box </ a ></ li >
< li >< a href ="../mozilla/rainbow.html" title ="I can build a rainbow" > rainbow box </ a ></ li >
< li >< a href ="../mozilla/snooker.html" title ="Snooker cue" > snooker cue </ a ></ li >
< li >< a href ="../mozilla/target.html" title ="Target Practise" > target practise </ a ></ li >
< li >< a href ="../mozilla/splittext.html" title ="Two tone headings" > two tone headings </ a ></ li >
< li >< a href ="../mozilla/shadow_text.html" title ="Shadow text" > shadow text </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../ie/index.html" > EXPLORER </ a >
<!-- [if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../ie/exampleone.html" title ="Example one" > example one </ a ></ li >
< li >< a href ="../ie/weft.html" title ="Weft fonts" > weft fonts </ a ></ li >
< li >< a href ="../ie/exampletwo.html" title ="Vertical align" > vertical align </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../opacity/index.html" > OPACITY </ a >
<!-- [if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../opacity/colours.html" title ="colour wheel" > opaque colours </ a ></ li >
< li >< a href ="../opacity/picturemenu.html" title ="a menu using opacity" > opaque menu </ a ></ li >
< li >< a href ="../opacity/png.html" title ="partial opacity" > partial opacity </ a ></ li >
< li >< a href ="../opacity/png2.html" title ="partial opacity II" > partial opacity II </ a ></ li >
< li >< a class ="hide" href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > < HOVER/CLICK </ a >
<!-- [if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK
<table><tr><td>
<![endif] -->
< ul class ="left" >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > hover/click </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
</ div >
</ body >
</ html >
4,
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > flyout-竖向三级弹出菜单 </ title >
< style type ="text/css" >
/* common styling */
.menu { font-family : arial, sans-serif ; width : 106px ; height : 150px ; position : relative ; margin : 0 ; font-size : 11px ; margin : 50px 0 ; }
.menu ul li a, .menu ul li a:visited { display : block ; text-decoration : none ; color : #000 ; width : 104px ; height : 20px ; text-align : center ; color : #fff ; border : 1px solid #aaa ; background : #710069 ; line-height : 20px ; font-size : 11px ; overflow : hidden ; }
.menu ul { padding : 0 ; margin : 0 ; list-style-type : none ; }
.menu ul li { float : left ; margin-right : 1px ; position : relative ; }
.menu ul li ul { display : none ; }
/* specific to non IE browsers */
.menu ul li:hover a { color : #fff ; background : #36f ; }
.menu ul li:hover ul { display : block ; position : absolute ; top : 0 ; left : 105px ; width : 105px ; }
.menu ul li:hover ul li a.hide { background : #6a3 ; color : #fff ; }
.menu ul li:hover ul li:hover a.hide { background : #6fc ; color : #000 ; }
.menu ul li:hover ul li ul { display : none ; }
.menu ul li:hover ul li a { display : block ; background : #eee ; color : #000 ; }
.menu ul li:hover ul li a:hover { background : #6fc ; color : #000 ; }
.menu ul li:hover ul li:hover ul { display : block ; position : absolute ; left : 105px ; top : 0 ; }
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
</style>
<![endif] -->
</ head >
< body >
< div class ="menu" >
< ul >
< li >< a class ="hide" href ="../menu/index.html" > DEMOS </ a >
<!-- [if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/zero_dollars.html" title ="The zero dollar ads page" > zero dollars </ a ></ li >
< li >< a href ="../menu/embed.html" title ="Wrapping text around images" > wrapping text </ a ></ li >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a class ="hide" href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > HOVER/CLICK > </ a >
<!-- [if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > hover/click </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a href ="../menu/shadow_boxing.html" title ="Multi-position drop shadow" > shadow boxing </ a ></ li >
< li >< a href ="../menu/old_master.html" title ="Image Map for detailed information" > image map </ a ></ li >
< li >< a href ="../menu/bodies.html" title ="fun with background images" > fun backgrounds </ a ></ li >
< li >< a href ="../menu/fade_scroll.html" title ="fade-out scrolling" > fade scrolling </ a ></ li >
< li >< a href ="../menu/em_images.html" title ="em size images compared" > em sized images </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="index.html" > MENUS </ a >
<!-- [if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../layouts/index.html" > LAYOUTS </ a >
<!-- [if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../layouts/bodyfix.html" title ="Cross browser fixed layout" > Fixed 1 </ a ></ li >
< li >< a href ="../layouts/body2.html" title ="Cross browser fixed layout" > Fixed 2 </ a ></ li >
< li >< a href ="../layouts/body4.html" title ="Cross browser fixed layout" > Fixed 3 </ a ></ li >
< li >< a href ="../layouts/body5.html" title ="Cross browser fixed layout" > Fixed 4 </ a ></ li >
< li >< a href ="../layouts/minimum.html" title ="A simple minimum width layout" > minimum width </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../boxes/index.html" > BOXES </ a >
<!-- [if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../mozilla/index.html" > MOZILLA </ a >
<!-- [if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../mozilla/dropdown.html" title ="A drop down menu" > drop down menu </ a ></ li >
< li >< a href ="../mozilla/cascade.html" title ="A cascading menu" > cascading menu </ a ></ li >
< li >< a href ="../mozilla/content.html" title ="Using content:" > content: </ a ></ li >
< li >< a href ="../mozilla/moxbox.html" title =":hover applied to a div" > mozzie box </ a ></ li >
< li >< a href ="../mozilla/rainbow.html" title ="I can build a rainbow" > rainbow box </ a ></ li >
< li >< a href ="../mozilla/snooker.html" title ="Snooker cue" > snooker cue </ a ></ li >
< li >< a href ="../mozilla/target.html" title ="Target Practise" > target practise </ a ></ li >
< li >< a href ="../mozilla/splittext.html" title ="Two tone headings" > two tone headings </ a ></ li >
< li >< a href ="../mozilla/shadow_text.html" title ="Shadow text" > shadow text </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../ie/index.html" > EXPLORER </ a >
<!-- [if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../ie/exampleone.html" title ="Example one" > example one </ a ></ li >
< li >< a href ="../ie/weft.html" title ="Weft fonts" > weft fonts </ a ></ li >
< li >< a href ="../ie/exampletwo.html" title ="Vertical align" > vertical align </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../opacity/index.html" > OPACITY </ a >
<!-- [if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../opacity/colours.html" title ="colour wheel" > opaque colours </ a ></ li >
< li >< a href ="../opacity/picturemenu.html" title ="a menu using opacity" > opaque menu </ a ></ li >
< li >< a href ="../opacity/png.html" title ="partial opacity" > partial opacity </ a ></ li >
< li >< a href ="../opacity/png2.html" title ="partial opacity II" > partial opacity II </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > flyout-竖向三级弹出菜单 </ title >
< style type ="text/css" >
/* common styling */
.menu { font-family : arial, sans-serif ; width : 106px ; height : 150px ; position : relative ; margin : 0 ; font-size : 11px ; margin : 50px 0 ; }
.menu ul li a, .menu ul li a:visited { display : block ; text-decoration : none ; color : #000 ; width : 104px ; height : 20px ; text-align : center ; color : #fff ; border : 1px solid #aaa ; background : #710069 ; line-height : 20px ; font-size : 11px ; overflow : hidden ; }
.menu ul { padding : 0 ; margin : 0 ; list-style-type : none ; }
.menu ul li { float : left ; margin-right : 1px ; position : relative ; }
.menu ul li ul { display : none ; }
/* specific to non IE browsers */
.menu ul li:hover a { color : #fff ; background : #36f ; }
.menu ul li:hover ul { display : block ; position : absolute ; top : 0 ; left : 105px ; width : 105px ; }
.menu ul li:hover ul li a.hide { background : #6a3 ; color : #fff ; }
.menu ul li:hover ul li:hover a.hide { background : #6fc ; color : #000 ; }
.menu ul li:hover ul li ul { display : none ; }
.menu ul li:hover ul li a { display : block ; background : #eee ; color : #000 ; }
.menu ul li:hover ul li a:hover { background : #6fc ; color : #000 ; }
.menu ul li:hover ul li:hover ul { display : block ; position : absolute ; left : 105px ; top : 0 ; }
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
</style>
<![endif] -->
</ head >
< body >
< div class ="menu" >
< ul >
< li >< a class ="hide" href ="../menu/index.html" > DEMOS </ a >
<!-- [if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/zero_dollars.html" title ="The zero dollar ads page" > zero dollars </ a ></ li >
< li >< a href ="../menu/embed.html" title ="Wrapping text around images" > wrapping text </ a ></ li >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a class ="hide" href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > HOVER/CLICK > </ a >
<!-- [if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../menu/form.html" title ="Styling forms" > styled form </ a ></ li >
< li >< a href ="../menu/nodots.html" title ="Removing active/focus borders" > active focus </ a ></ li >
< li >< a href ="../menu/hover_click.html" title ="Hover/click with no active/focus borders" > hover/click </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a href ="../menu/shadow_boxing.html" title ="Multi-position drop shadow" > shadow boxing </ a ></ li >
< li >< a href ="../menu/old_master.html" title ="Image Map for detailed information" > image map </ a ></ li >
< li >< a href ="../menu/bodies.html" title ="fun with background images" > fun backgrounds </ a ></ li >
< li >< a href ="../menu/fade_scroll.html" title ="fade-out scrolling" > fade scrolling </ a ></ li >
< li >< a href ="../menu/em_images.html" title ="em size images compared" > em sized images </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="index.html" > MENUS </ a >
<!-- [if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../layouts/index.html" > LAYOUTS </ a >
<!-- [if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../layouts/bodyfix.html" title ="Cross browser fixed layout" > Fixed 1 </ a ></ li >
< li >< a href ="../layouts/body2.html" title ="Cross browser fixed layout" > Fixed 2 </ a ></ li >
< li >< a href ="../layouts/body4.html" title ="Cross browser fixed layout" > Fixed 3 </ a ></ li >
< li >< a href ="../layouts/body5.html" title ="Cross browser fixed layout" > Fixed 4 </ a ></ li >
< li >< a href ="../layouts/minimum.html" title ="A simple minimum width layout" > minimum width </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../boxes/index.html" > BOXES </ a >
<!-- [if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="spies.html" title ="a coded list of spies" > spies menu </ a ></ li >
< li >< a href ="vertical.html" title ="a horizontal vertical menu" > vertical menu </ a ></ li >
< li >< a href ="expand.html" title ="an enlarging unordered list" > enlarging list </ a ></ li >
< li >< a href ="enlarge.html" title ="an unordered list with link images" > link images </ a ></ li >
< li >< a href ="cross.html" title ="non-rectangular links" > non-rectangular </ a ></ li >
< li >< a href ="jigsaw.html" title ="jigsaw links" > jigsaw links </ a ></ li >
< li >< a href ="circles.html" title ="circular links" > circular links </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../mozilla/index.html" > MOZILLA </ a >
<!-- [if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../mozilla/dropdown.html" title ="A drop down menu" > drop down menu </ a ></ li >
< li >< a href ="../mozilla/cascade.html" title ="A cascading menu" > cascading menu </ a ></ li >
< li >< a href ="../mozilla/content.html" title ="Using content:" > content: </ a ></ li >
< li >< a href ="../mozilla/moxbox.html" title =":hover applied to a div" > mozzie box </ a ></ li >
< li >< a href ="../mozilla/rainbow.html" title ="I can build a rainbow" > rainbow box </ a ></ li >
< li >< a href ="../mozilla/snooker.html" title ="Snooker cue" > snooker cue </ a ></ li >
< li >< a href ="../mozilla/target.html" title ="Target Practise" > target practise </ a ></ li >
< li >< a href ="../mozilla/splittext.html" title ="Two tone headings" > two tone headings </ a ></ li >
< li >< a href ="../mozilla/shadow_text.html" title ="Shadow text" > shadow text </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../ie/index.html" > EXPLORER </ a >
<!-- [if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../ie/exampleone.html" title ="Example one" > example one </ a ></ li >
< li >< a href ="../ie/weft.html" title ="Weft fonts" > weft fonts </ a ></ li >
< li >< a href ="../ie/exampletwo.html" title ="Vertical align" > vertical align </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
< li >< a class ="hide" href ="../opacity/index.html" > OPACITY </ a >
<!-- [if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif] -->
< ul >
< li >< a href ="../opacity/colours.html" title ="colour wheel" > opaque colours </ a ></ li >
< li >< a href ="../opacity/picturemenu.html" title ="a menu using opacity" > opaque menu </ a ></ li >
< li >< a href ="../opacity/png.html" title ="partial opacity" > partial opacity </ a ></ li >
< li >< a href ="../opacity/png2.html" title ="partial opacity II" > partial opacity II </ a ></ li >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
</ div >
</ body >
</ html >