5 Popup-Menüs, erstellt mit reinem Div+CSS (kein JS)-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

5 Popup-Menüs, erstellt mit reinem Div+CSS (kein JS)

PHP中文网

May 16, 2016 pm 12:07 PM

html

Erstens das Grundlegendste: das Dropdown-Popup-Menü der zweiten Ebene

<!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 &#39;other browsers&#39; */ 
.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>

Nach dem Login kopieren

Das Dropdown-Popup-Menü der zweiten und dritten Ebene

<!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>

Nach dem Login kopieren

3. Flyout-vertikales dreistufiges Popup-Menü

<!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>

Nach dem Login kopieren

4 Dreistufiges horizontales Popup-Menü

<!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>dropline-水平三级横向弹出菜单</title> 
<style type="text/css"> 
/* common styling */ 
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} 
.menu ul {padding:0; margin:0; list-style-type: none;} 
.menu ul li {float:left; border-left:1px solid #eee; width:106px;} 
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} 
.menu ul li ul {display: none;} 

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#b3ab79;} 
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} 
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} 
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} 
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} 
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} 
.menu ul li:hover ul.right li {float:right;} 
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} 

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
table {border-collapse:collapse; margin:0; padding:0;} 

.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, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;} 


.menu ul li a:hover {color:#fff; background:#b3ab79;} 
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} 
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;} 
.menu ul li a:hover ul.left_side li {float:left;} 
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} 
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;} 

</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 class="right_side"> 
            <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> 
    </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> 
    </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 class="right_side"> 
    <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 class="right_side"> 
    <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_side"> 
            <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>

Nach dem Login kopieren

5. Horizontales und vertikales Popup-Menü mit bis zu drei Ebenen

<!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>upmenu-水平竖弹向上三级弹出菜单</title> 
<style type="text/css"> 
/* common styling */ 
.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} 
.menu ul {padding:0; margin:0;list-style-type: none; } 
.menu ul li {float:left; position:relative;} 
.menu ul li ul {display: none;} 

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#000; background:#e9e9c7;} 
.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;} 
.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;} 
.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} 
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} 
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;} 
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} 

.menu ul li:hover ul.left {left:-105px;} 
.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;} 

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
table {border-collapse:collapse; margin:0; padding:0;} 
.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:#000; background:#e9e9c7;} 
.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;} 
.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;} 
.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;} 
.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;} 
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} 

.menu ul li a:hover ul.left {left:-105px;} 
.menu ul li a:hover ul li a:hover ul.left {left:-210px;} 

</style> 
<![endif]--> 
</head> 

<body> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<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 class="left"> 
    <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> 

    <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>

Nach dem Login kopieren

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7393

Java-Tutorial

1630

CakePHP-Tutorial

1358

Laravel-Tutorial

1268

PHP-Tutorial

1217

Related knowledge

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

See all articles