基于jQuery的简单的列表导航菜单

基于基于jQuery的简单的列表导航菜单的简单的列表导航菜单

最近一段时间准备开始学习JQUERY,感觉JQUERY的功能非常强大,而且代码量也减少了许多....代码也非常的清

晰!

下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖!

好了 开始进入正题吧:

1.首先定义CSS样式表:

复制代码 代码如下:

<style type="text/css">

.optnFocus{background-color:#fff;font-weight:bold}

div{padding:10px}

div img{float:left;padding-right:6px}

span{padding-top:3px;font-size:14px;font-weight:bold;float:left}

.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;

background-color:#fff;display:none}

.tip li{line-height:23px;}

#sort{position:absolute;display:none}

</style>

2.引用JQUERY的框架，大家可以去官网上下载最新的JQUERY,好像JQUERY1.5的版本都发布了,链接地址:http://jquery.com/

<span>电脑数码类产品</span>

</div>

<ul class="content">

<li class="optn"><a href="#">笔记本</a></li>

<ul class="tip">

<li><a href="#">笔记本1</a></li>

<li><a href="#">笔记本2</a></li>

<li><a href="#">笔记本3</a></li>

<li><a href="#">笔记本4</a></li>

<li><a href="#">笔记本5</a></li>

<li><a href="#">移动硬盘4</a></li>

<li><a href="#">移动硬盘5</a></li>

</ul>

<li class="optn"><a href="#">电脑软件</a></li>

<ul class="tip">

<li><a href="#">电脑软件1</a></li>

<li><a href="#">电脑软件2</a></li>

<li><a href="#">电脑软件3</a></li>

<li><a href="#">电脑软件4</a></li>

<li><a href="#">电脑软件5</a></li>