最新网页设计二级菜单代码_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>

导航:首页 > 万维百科 > 最新网页设计二级菜单代码

最新网页设计二级菜单代码

与最新网页设计二级菜单代码相关的知识