程序博客网 > 淘宝卖的韩国直邮真假

用横向下拉列表制作导航

来源：互联网发布：淘宝卖的韩国直邮真假编辑：程序博客网时间：2024/06/04 23:12

每一次做项目，都可以积累不少经验，这次也不例外，我这次主要负责搭建主页面，在搭建主页面的时候，由于导航要求是仿照京东商城的左导航，所以，刚开始，一点头绪也没有，但经过上网查资料，我明白了，下面和大家分享一下：

CSS样式表：

<style type="text/css">
#daohang{
width:780px;
height:30px;
padding:0px 5px;
}
#daohang ul,li{
margin:0px;
padding:0px;
float:left;
}
#daohang a:link{/*连接本身的设置，没有下划线*/
color:Black;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
#daohang a:visited{/*访问过后的颜色设置*/
color:black;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
#daohang a:hover{/* 当鼠标悬停锚点a标签时，文字颜色和背景颜色的变化效果 */
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
font-weight:bold;
text-decoration:none;
background-color:red;
}
#daohang a:active{/*按下时的设置*/
color:black;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#FFF7FB;
}

.list{/*下拉列表里的设置*/
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid red;
background-color: #f4f4f4;
color:#000099;
padding:6px 0px 0px 0px;
font-weight:bold;
cursor:hand;/*规定要显示的光标的类型（形状）*/
overflow:hidden;/*溢出的内容将被隐藏，同时为了视觉差异，设置边框样式和背景颜色 */
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#FFF7FB;
color:#999;
border:1px solid #CCC;
padding:6px 0px 0px 0px;
overflow:hidden;
cursor:hand;
}
</style>

html页面：

<body>
                <div id="daohang">
                <ul>
                  <li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">音乐、影视
                    <div class="list"> <a href="#">音乐</a><br />
                          <a href="#">影视</a><br />
                          <a href="#">教育音像</a><br />
                      </div>
                  </li>
                  <li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">家用电器
                <div class="list">
                <a href="#">平板电视</a><br />
                <a href="#">洗衣机</a><br />
                <a href="#">豆浆机</a><br />
                </div>
                </li>
                <li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">手机数码
                <div class="list">
                <a href="#">手机</a>
                <a href="#">数码相机</a>
                <a href="#">手机配件</a>
                <a href="#">移动电源</a>                </div>
                </li>
                <li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">电脑办公
                <div class="list">
                <a href="#">笔记本</a><br />
                <a href="#">CPU</a><br />
                <a href="#">鼠标</a><br />
                <a href="#">打印机</a><br />
                </div>
                </li>
                <li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">服饰鞋帽
                <div class="list">
                <a href="#">男士外套</a><br />
                <a href="#">女士T恤</a><br />
                <a href="#">运动装</a><br />
                <a href="#">围巾</a><br />
                <a href="#">童装</a><br />
                </div>
                </li>
                <li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">食品饮料
                <div class="list">
                <a href="#">饼干蛋糕</a><br />
                <a href="#">米面杂粮</a><br />
                <a href="#">保健茶饮</a><br />
                <a href="#">葡萄酒</a><br />
                <a href="#">南北干货</a><br />
                </div>
                </li>
                </ul>
</div>

</body>

效果如下图：

淘宝卖的韩国直邮真假

淘宝卖的韩国直邮真假

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子铜印连云港铜门厂雕塑铸铜厂武汉铜门厂徐州铜门厂青岛铜门厂深圳铜门厂南昌铜门厂九江铜门厂湖北铜门厂锻铜雕塑制作厂青铜器图片陕西青铜器青铜器时代商周青铜器铜器铭文酒杯青铜器拍卖青铜器青铜器价值铜器铸造厂铜器厂家青铜器厂家青铜器铜鼎铜器时代战国青铜器青铜器编钟青铜器介绍清朝青铜器清朝铜器老铜器鉴定出土青铜器陕西青铜器之乡流失青铜器组回家宝鸡青铜器博物馆旅游青铜器之乡陕西省青铜器与甲骨文教案青铜器博物馆青铜器的特点长沙宁乡青铜器流失青铜器组回家一青铜器的用途