<head>
<title></title>
<style type="text/css">
html
{
color: #666;
background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, i, fieldset, legend, input, textarea, p, blockquote, th, td
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
img
{
border: none;
}
a
{
text-decoration: none;
color: #666;
}
a:hover
{
text-decoration: underline;
color: #FF6600;
}
ul, li
{
list-style-type: none;
}
q:before, q:after
{
content: '';
}
sup
{
vertical-align: text-top;
}
sub
{
vertical-align: text-bottom;
}
/* All reset */
body
{
margin: 100px;
}
ul li
{
line-height: 30px;
border: 1px solid #E5D1A1;
text-align: center;
margin-top: -1px;
width: 188px;
background: #FFFDD2;
position: relative;
z-index: 1;
}
.tips
{
line-height: 20px;
position: absolute;
width: 150px;
height: 200px;
border: 1px solid #E5D1A1;
text-align: center;
margin-top: -1px;
background: #FFFDD2;
z-index: 1;
display: none;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("ul li").each(function (index) {
$(this).mouseover(function () {
var obj = $(this).offset();
var xobj = obj.left + 190 + "px";
var yobj = obj.top - 50 + "px";
$(this).css({ "width": "190px", "z-index": "9999
Jquery实现仿京东二级导航条
最新推荐文章于 2022-06-17 18:44:13 发布
这篇博客展示了如何利用jQuery来创建一个类似京东商城的二级导航菜单。通过鼠标悬停在一级菜单项上,会显示对应的二级菜单,提供丰富的子分类链接。样式设计简洁,实现了平滑的过渡效果。
摘要由CSDN通过智能技术生成