最新網頁設計二級菜單代碼_dw網頁二級菜單代碼怎麼做！很著急把它放在一級導航底下！

1、製作網頁下拉菜單的代碼是什麼

第1步：將下列代碼復制到網頁的標簽之間：
第2步：將下面的代碼復制到標簽的右邊，位置緊挨著標簽：
第3步：添加菜單的內容。編輯menucontext.js文件，所有的菜單選項都在這里設置。默認的menucontext.js裡面的內容，比較復雜我現在把代碼精簡出來。給大家做一個說明。整個代碼如下： function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);
//主菜單定義
menu = new Menu();
menu.addItem("multimedia", "多媒體", "多媒體軟體", null, null);
menu.addItem("image", "圖像處理", "圖像處理軟體", null, null);
//多媒體子菜單定義
menu.addSubItem("multimedia", "凡人網路", "凡人網路", "http://www.venshop.com");
menu.addSubItem("multimedia", "我要網上開店", "我要網上開店", "http://www.venshop.com");
//圖像處理子菜單定義
menu.addSubItem("image", "開店系統", "開店系統", "http://www.venshop.com");
menu.addSubItem("image", "網上開店系統", "網上開店系統", "http://www.venshop.com");
menu.addSubItem("image", "網上購物系統", "網上購物系統", "http://www.venshop.com");
//結束菜單定義
menu.showMenu();
}
上面的例子中製作的是一個有兩個主菜單的菜單。一個主菜單為多媒體，一個主菜單為圖像處理。主要靠兩個命令來製作Additem為添加主菜單項目。格式為AddItem(菜單標記, 文本說明, 文本提示, 位置,替換位置)。AddSubItem為添加子菜單項目，idparent為主菜單的菜單標記，其餘同前。
第4步：上傳菜單文件。將 menu.js和menucontext.js文件上傳到和網頁文件同一目錄下。這樣就完成了所有的操作。
菜單安裝的一些善後工作：
安裝了菜單之後，如果需要將菜單完全與網頁頂部和左邊緊密結合的話，你可以把標簽修改成為。
或許大家會對菜單里的文字感到不滿意。你可以把製作菜單第一步的CSS代碼進行修改。比如
將裡面的字體大小換成了10.5磅的話，中文字就會簡潔干凈多了。
同樣如果對菜單的表格感到不滿意的話，可以修改menu.js文件中的代碼例如：
function Menu()
{
this.bgColor = "#008080";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
// this.fontColor = "white";
this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;
this.bgcolor 修改的是菜單屬性
this.mainPaneBorder 修改的是主菜單的邊框寬度
this.subMenuPaneBorder 修改的是子菜單的邊框寬度。

2、網頁設計里，滑鼠放在導航條圖片上再出現水平菜單的代碼？不是下拉菜單。

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

</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

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

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

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

</li>
<li><a class="hide" href="index.html">MENUS</a>

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

</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

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

</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>

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

</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

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

</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>

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

</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>

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

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

</li>
</ul>

</li>
</ul>
</div>
</body>
</html>

基本的模板給你了，怎麼修改樣式應該不用我教吧

3、網站製作中怎麼把這個2級菜單欄修改成3級的？

不妨看看這個：

把裡面相關的菜單改成你自己的就行了。

<! html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksaverl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksaverl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<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>

</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html" _fcksaverl="../menu/index.html">DEMOS</a>

<ul>
<li><a href="../menu/zero_dollars.html" _fcksaverl="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" _fcksaverl="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" _fcksaverl="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" _fcksaverl="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" _fcksaverl="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

<ul>
<li><a href="../menu/form.html" _fcksaverl="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" _fcksaverl="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" _fcksaverl="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

</li>
<li><a href="../menu/shadow_boxing.html" _fcksaverl="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" _fcksaverl="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" _fcksaverl="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" _fcksaverl="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" _fcksaverl="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

</li>
<li><a class="hide" href="index.html" _fcksaverl="index.html">MENUS</a>

<ul>
<li><a href="spies.html" _fcksaverl="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" _fcksaverl="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" _fcksaverl="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" _fcksaverl="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" _fcksaverl="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" _fcksaverl="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" _fcksaverl="circles.html" title="circular links">circular links</a></li>
</ul>

</li>
<li><a class="hide" href="../layouts/index.html" _fcksaverl="../layouts/index.html">LAYOUTS</a>

<ul>
<li><a href="../layouts/bodyfix.html" _fcksaverl="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" _fcksaverl="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" _fcksaverl="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" _fcksaverl="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" _fcksaverl="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

</li>
<li><a class="hide" href="../boxes/index.html" _fcksaverl="../boxes/index.html">BOXES</a>

<ul>
<li><a href="spies.html" _fcksaverl="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" _fcksaverl="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" _fcksaverl="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" _fcksaverl="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" _fcksaverl="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" _fcksaverl="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" _fcksaverl="circles.html" title="circular links">circular links</a></li>
</ul>

</li>
<li><a class="hide" href="../mozilla/index.html" _fcksaverl="../mozilla/index.html">MOZILLA</a>

<ul>
<li><a href="../mozilla/dropdown.html" _fcksaverl="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" _fcksaverl="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" _fcksaverl="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" _fcksaverl="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" _fcksaverl="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" _fcksaverl="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" _fcksaverl="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" _fcksaverl="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" _fcksaverl="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

</li>
<li><a class="hide" href="../ie/index.html" _fcksaverl="../ie/index.html">EXPLORER</a>

<ul>
<li><a href="../ie/exampleone.html" _fcksaverl="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" _fcksaverl="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" _fcksaverl="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

</li>
<li><a class="hide" href="../opacity/index.html" _fcksaverl="../opacity/index.html">OPACITY</a>

<ul>
<li><a href="../opacity/colours.html" _fcksaverl="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" _fcksaverl="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" _fcksaverl="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" _fcksaverl="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" _fcksaverl="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>

<ul class="left">
<li><a href="../menu/form.html" _fcksaverl="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" _fcksaverl="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" _fcksaverl="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

</li>
</ul>

</li>
</ul>
</div>
</body>
</html>

4、網頁製作，慢慢下拉的菜單怎麼做？

這個效果你可以通過2中途徑實現，使用框架或者是使用JavaScript代碼。

1.使用框架：查找框架中的二級菜單組建，如Bootstrap中的導航條中的二級菜單。下面的是一個二級下拉菜單的例子

<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>

詳細內容參見http://v3.bootcss.com/components/#navbar

2.使用JavaScript代碼。使用jQuery的動畫實現，如slideToggle()可使元素上下滑動，並且可以使用參數控制快慢。

slideToggle()請參考http://www.w3school.com.cn/jquery/jquery_slide.asp

5、請利用HTML標記符設計一個個人網站，網頁要有菜單、圖片、表格、命令按鈕等。要截圖代碼形式的報告ORZ

不然就是繁瑣，看著都頭疼，花半個小時做還不如玩局游戲，反正都是金幣

6、dw網頁二級菜單代碼怎麼做！很著急把它放在一級導航底下！

方法和詳細的操作步驟如下：

1、第一步，打開dw軟體並創建一個新文件，見下圖，轉到下面的步驟。

2、第二步，執行完上面的操作之後，單擊「常用」選項，選擇「布局」按鈕，然後繪制一個圖層，見下圖，轉到下面的步驟。

3、第三步，執行完上面的操作之後，再次單擊該層並繪制另一個，看到第一層是layer1，第二層是layer2，見下圖，轉到下面的步驟。

4、第四步，執行完上面的操作之後，將游標放在layer1上，然後單擊「插入表格」，建立一個具有一行三列且寬度為288的表，見下圖，轉到下面的步驟。

5、第五步，執行完上面的操作之後，在表格中輸入百度經驗，百度知道，百度文庫，可以在屬性欄中設置以下屬性，見下圖，轉到下面的步驟。

6、第六步，執行完上面的操作之後，在第2層中輸入經驗首頁，個人中心，小測首頁，幫幫首頁，然後設置以下屬性，見下圖。這樣，就解決了這個問題了。

7、網頁製作~二級菜單被視頻覆蓋了，怎麼能讓二級菜單顯示在視頻前面z-index都用了，就是沒有用

試試將視頻的z-index設置成0或-1或其他更小，把二級菜單的z-index設成1或更大。最好用-1和1兩個值試試。

8、利用CSS製作網頁，想要製作滑動下拉菜單（滑鼠滑過才會顯示二級菜單）但是我做出來的二級菜單始終在外邊

你把你代碼上傳到網盤里，然後貼地址，這么大一坨別人也不方便看，想幫你改還得先手打一遍，多費勁。

9、在用HTML製作網頁時，二級菜單出現時,一級菜單為什麼老掉下來？

一般出現這種情況，往往是這個寬度的問題。寬度沒有寫死，正常的時候的一級菜單的寬度和hover狀態下一級菜單的寬度不同，所以會掉下來。

下面有一個二級菜單的demo，可以對照著找一下

<!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-08" />
<title>dropline-水平三級橫向彈出菜單</title>
<style type="text/css">
/* common styling */
.hd3_nav {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:0; background:#fff; position:relative;}
.hd3_nav ul {padding:0; margin:0; list-style-type: none;}
.hd3_nav ul li {float:left; border-left:1px solid #eee; width:106px;}
.hd3_nav ul li a, .hd3_nav 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;}
.hd3_nav ul li ul {display: none;}
/* specific to non IE browsers */
.hd3_nav ul li:hover a {color:#fff; background:#b3ab79;}
.hd3_nav ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.hd3_nav ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.hd3_nav ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.hd3_nav ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.hd3_nav ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.hd3_nav ul li:hover ul li ul {display: none;}
.hd3_nav ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.hd3_nav ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.hd3_nav ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.hd3_nav ul li:hover ul.right li {float:right;}
.hd3_nav ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
</style>
</head>
<body>
<div class="hd3_nav">
<ul>
<li><a class="hide" href="../hd3_nav/index.html">第1個</a>
    <ul>
    <li><a href="../hd3_nav/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../hd3_nav/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../hd3_nav/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../hd3_nav/nodots.html" title="Removing active/focus borders">active focus</a></li>
    <li><a  href="../hd3_nav/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a></li>
    <li><a href="../hd3_nav/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../hd3_nav/old_master.html" title="Image Map for detailed information">image map</a></li>
    </ul>

</li>
<li><a class="hide" href="index.html">第2個</a>
    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies hd3_nav</a></li>
    <li><a href="vertical.html" title="a horizontal vertical hd3_nav">vertical hd3_nav</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>

</li>
<li><a class="hide" href="../layouts/index.html">第3個</a>
    <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>
</li>
<li><a class="hide" href="../boxes/index.html">第4個</a>
    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies hd3_nav</a></li>
    <li><a href="vertical.html" title="a horizontal vertical hd3_nav">vertical hd3_nav</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>
</li>
<li><a class="hide" href="../mozilla/index.html">第5個</a>
    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down hd3_nav">drop down hd3_nav</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading hd3_nav">cascading hd3_nav</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>
</li>
<li><a class="hide" href="../ie/index.html">第6個</a>
    <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>
</li>
<li><a class="hide" href="../opacity/index.html">第6個</a>
    <ul class="right_side">
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturehd3_nav.html" title="a hd3_nav using opacity">opaque hd3_nav</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  href="../hd3_nav/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a></li>
    </ul>
</li>
</ul>
</div>
</body>
</html>

導航:首頁 > 萬維百科 > 最新網頁設計二級菜單代碼

最新網頁設計二級菜單代碼

與最新網頁設計二級菜單代碼相關的知識