html js 左侧二级菜单,横向二级导航菜单(html+css+js)

/*基本信息*/

body

{

margin: 0;

padding: 0;

background: #FFFFFF;

}

/*导航*/

#navigation

{

font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */

height: 32px;

background: #999999;

}

.ul1

{

list-style-type: none; /* 将默认的列表符号去掉 */

margin: 0;

padding: 0;

}

.li1

{

/*: block;display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本)，同时也允许我们规定宽度。*/

border-right: 0; /* 去掉左侧边框 */

float: left;

padding: 7px 0;

color: #fff;

border-right-width: 1px;

border-right-style: solid;

min-width: 120px;

width: auto;

text-align: center;

}

.li1:hover

{

background: #323232; /* 变换背景色 */

color: #fff; /* 变换文字颜色 */

text-decoration: none;

border-right: 1px solid #000;

}

.a1

{

/* 如果是中英文混排的文字，建议用固定宽度 width:150px; height:30px; line-height:30px; text-align:center; */ /* padding: 5px 5px; 设置内边距 */ /*background: #999999; 设置背景色 */ /*border-right: 1px solid #000; 在左侧加上分隔线 */

color: #fff; /* 设置文字颜色 */

text-decoration: none; /* 去掉下划线 */

}

#sunnav

{

}

.ul2

{

display:none;

position: absolute;

top: 32px;

left: 81px;

}

.li2

{

position: relative;

padding: 5px 14px;

display: block;

background: #999999;

color: #fff;

border: 1px solid #999999;

}

.a2

{

padding: 5px 13px;

text-decoration: none;

border-right: 1px solid #000;

margin: 0;

border-right: 0;

color: #fff;

}

.li2:hover

{

background: #323232;

color: #fff;

text-decoration: none;

border-right: 1px solid #000;

}

$(document).ready(function(){

$("#basic_info").mouseover(function () {

$(".ul2").show();

});

$("#basic_info").mouseout(function () {

$(".ul2").hide();

});

});