您的位置：首页 > 其它

用横向下拉列表制作导航

2011-10-31 20:14 148 查看

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

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>

效果如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航