コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド CSSチュートリアル 純粋な div CSS (JS なし) で作成された 5 つのポップアップ メニュー

純粋な div CSS (JS なし) で作成された 5 つのポップアップ メニュー

PHP中文网
PHP中文网
May 16, 2016 pm 12:07 PM
html

1. 最も基本的なもの: 第 2 レベルのドロップダウン ポップアップ メニュー

<!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>
ログイン後にコピー


第 2 レベルと第 3 レベルのドロップダウン ポップアップ メニュー p>

<!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>
ログイン後にコピー


3. フライアウト - 垂直 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>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>
ログイン後にコピー


4. dropline-horizo​​ntal 3 レベルの水平ポップアップ メニュー

p>
<!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>
ログイン後にコピー


5. upmenu - 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>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>
ログイン後にコピー


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD
R.E.P.O.で節約説明した（そしてファイルを保存）
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
4週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7572
15
CakePHP チュートリアル
1386
52
Steamのアカウント名の形式は何ですか
87
11
Win11 Activation Key Permanent
62
19
NYTの接続はヒントと回答です
28
110
もっと見る
Related knowledge
HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles