怎样用dw制作导航栏下拉菜单

Question

网页导航下拉效果始终作不出来。

Answer 1

给导航栏下面添加一个div先设置css属性为隐藏，当鼠标移动到导航栏上时，设置属性为显示，就可以了

Answer 2

<nav class="nav">
<ul class="nav_menu">
<li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Home</a></li>
<li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Services</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
<li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
<li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
</ul>
</li>
<li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">About</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Our Company</a></li>
<li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Our Xixi</a></li>
<li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Our Reach</a></li>
</ul>
</li>
<li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Blog</a></li>
<li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Contact</a></li>
</ul>
</nav>

nav ul {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}

h1 {
width: 500px;
margin: 100px auto 20px;
color: #f0f0f0;
text-align: center;
}

.nav {
width: 500px;
margin: 0 auto;
background: #1e8449;
color: #f0f0f0;
}
.nav a {
display: block;
padding: 0 16px;
line-height: inherit;
cursor: pointer;
}
.nav_menu {
line-height: 45px;
font-weight: 700;
text-transform: uppercase;
}
.nav_menu-item {
display: inline-block;
position: relative;
}
.nav_menu-item:hover {
background-color: #9b59b6;
}
.nav_menu-item:hover .nav_submenu {
display: block;
}
.nav_submenu {
font-weight: 300;
text-transform: none;
display: none;
position: absolute;
width: 220px;
background-color: #9b59b6;
}
.nav_submenu-item:hover {
background: rgba(0, 0, 0, 0.1);
}

Answer 3

你的用jQuery/JavaScript 做，具体你可以私聊我

Answer 4

先打开Dreamweaver，如果你事先有做好的网页源文件，可以的直接点击文件——打开，打开你的网页源文件，如果没有，就点击文件——新建，新建一个新的网页源文件。
2
/12
新建的类型默认就可以了，如果有其它需要，可以自己选择页面类型和布局等等，让点击创建按钮
3
/12
新建好网页之后，在设计页面，点击插入——表单——选择（列表/菜单），这样就可以插入一个可选择的下拉表单了。
4
/12
或者在菜单栏下方有个表单选项的图标，鼠标放上去显示“选择（列表/菜单）”然后点击，也可以插入下拉菜单。
5
/12
然后跳出需要输入标签辅助功能属性的界面，ID填写英文或者数字，标签就是你的下拉菜单的对应的数据标题，比如地址，性别等等，这里填写“性别：”，然后点击确定。
6
/12
跳出是否添加表单标签的提示，就选择是，就可以了。
7
/12
这时，下拉菜单插入到页面中了，点击下方的列表值，给你的下拉菜单添加内容。
8
/12
跳出列表值的界面，在项目标签上填写下拉菜单选项，比如我这里要做一个性别选择的下拉菜单，这里就在值和项目标签填写男。
9
/12
接着点击加号，添加新的下面标签和值，都填上女。然后点击确定按钮。
10
/12
点击界面上箭头所指的小图标，选择一个浏览器，点击它，可以在浏览器上看到预览效果。
11
/12
这时会提示是否保存网页文件的更改，选择是，保存一下即可。
12
/12
然后就可以在浏览器上看到你做好的下拉菜单的样子了，鼠标点击一下下拉小箭头是不是可以选择了，很简单吧，动手试试吧。