巧用CSS各种组件

1.js二级菜单简单写法

html:

<ul id="nav">

<li class="menu">

<a href="about.html"></a>

<div class="submenu_zzjs">

<div class="Triangle"><img src="images/Triangle.png" /></div> △ 标记

<ul id="non">

<li class="submenu_zzjs_l"></li> 左圆角背景图

<li><a href="#">·集团实力</a></li>

<li><a href="#">·公司简介</a></li>

<li><a href="#">·企业文化</a></li>

<li><a href="#">·国家基因研究中心</a></li>

<li><a href="#">·权威证书</a></li>

<li><a href="#">·国家领导人接见</a></li>

<li class="submenu_zzjs_r"></li>  右圆角背景图

</ul>

</div>

</li>

<ul>

css:

Navigation a{ display:block; width:115px; height:30px; float:left;}

#nav li{float:left; width:115px; }

.menu { position:relative; z-index:10000; }

<link href="css/css.css" rel="stylesheet" type="text/css" media="all" /><!--my115-->

<div id="leftbox">

<script type="text/javascript" src="css/jquery-1.3.2.js"></script>

<script type="text/javascript">

function showdiv(objid){

var obj = $(objid);

$(".divFolderList").css("top", obj.offset().top+obj.height()+1 );

$(".divFolderList").css("left",obj.offset().left );

$(".divFolderList").slideToggle('slow');

}

function showdiv02(objid){

var obj = $(objid);

$("#divFolderList02").css("top", obj.offset().top+obj.height()+1 );

$("#divFolderList02").css("left",obj.offset().left );

<SCRIPT LANGUAGE="JavaScript">

<!--

if (window.navigator.userAgent.indexOf("MSIE")>=1)

{

var IE1024="";

var IE800="";

var IE1152="";

var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)

}else{

if (window.navigator.userAgent.indexOf("Firefox")>=1)

{

//如果浏览器为Firefox

var Firefox1024="";

var Firefox800="";

var Firefox1152="";

var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)

}else{

//如果浏览器为其他

var Other1024="";

var Other800="";

var Other1152="";

var Otherother="";

ScreenWidth(Other1024,Other800,Other1152,Otherother)