主导航 菜单 加 图标提示效果

分享一下我的方法：
演示：http://www.yifa1.com



我是在二级菜单导航里实现的。

使用方法：将以下代码复制发布到二级导航广告里面。
说明：二级导航效果是借用别人的。我的只是加了图上显示的，菜单提示效果。
49 秒前 上传
下载附件 (29.94 KB)



<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.haha1 {color: #0099FF}
.haha2 {color: #CC3333}
.haha3 {font-size: 12px}
.haha5 {font-size: 14px; color: #FF0000;}
-->
</style>
<STYLE type="text/css">
.wapNote,.colNav4t dl,.colNav4t dt,.colNav4t dd a:hover,.colNav4t dd a:hover span,#miniSearch .btn-search,.navAd,.colNav4t dl div em{ background:url(/static/image/common/index_bg.png) no-repeat;}
.wapNote {position:absolute;left:205px;top:36px;padding-left:15px;line-height:16px;_width:180px;color:#00AAD1;background-position:-988px -260px;}
.wapNote a {color:#ff6600;}
.wapNote a:hover {text-decoration:underline;}
#colNav4t { height:58px; padding:1px; _margin-top:5px;
margin-bottom:5px; color:#325E7F;
font:14px/1.5 Tahoma,Helvetica,Arial,"5b8b4f53";}
.colNav4t { background:#F6F6F6;}
.colNav4t dl { float:left; position:relative; z-index:1; padding:8px 8px 3px 14px; height:48px; background-position:-315px -120px;}
.colNav4t dl.navShopping { width:260px; padding-left:10px; background:none;clear:left}
.colNav4t dl.navLife { width:260px;}
.colNav4t dl.navTalk { width:260px;}
.colNav4t dl.navService { width:90px;}
.colNav4t dt { float:left; width:28px; margin-top:1px; text-align:center; font-size:12px; color:#4062B9; padding-top:25px;
background-position:-589px -55px;}
.colNav4t dl.navLife dt { background-position:-620px -55px;}
.colNav4t dl.navTalk dt { background-position:-651px -55px;}
.colNav4t dl.navService dt { background-position:-681px -55px;}
.colNav4t dd { margin-left:30px;}
.colNav4t dd a,.colNav4t dd a span { display:inline-block;zoom:1;*display:inline;}
.colNav4t dd a {margin-bottom:2px;margin-right:2px;font-size:14px;}
.colNav4t dd a span { position:relative; z-index:0; right:-2px; padding:0 7px 0 5px;padding-top:1px9;height:22px;line-height:22px;*cursor:pointer;}
.colNav4t dd a:hover { text-decoration:none; color:#FF6C00;}
.colNav4t dd a:hover,.colNav4t dd a:hover span {background-position:-882px -153px;}
.colNav4t dd a:hover span { background-position:100% -153px;}
.colNav4t dl div { position:absolute; right:-2px; top:55px;width:103px}
.colNav4t dl div em { position:absolute; top:-6px; _top:-4px; right:4px; width:8px; height:8px; overflow:hidden; background-position:100% -19px;}
.colNav4t dl p { display:none; margin-top:5px; _margin-top:7px; padding:0 7px 5px 4px; border:1px solid #DDD; border-top:none; background:#FFF;}
.colNav4t dl.moreOn { background-color:#FFF;}
.colNav4t dl.moreOn em { display:none;}
.colnav5bb {color: #FF0000}
.colnav6bb {color: #0066CC}
#acobed {
position:absolute;
left:620px;
top:95px;
width:28px;
height:26px;
z-index:2;
background-image: url(tu/hot40.gif);
}
#urcby {
position:absolute;
left:440px;
top:100px;
width:19px;
height:23px;
z-index:3;
background-image: url(tu/new21.gif);
}
</style>
<div id="acobed"></div>
<div id="urcby"></div>
<div id="colNav4t"><div class="colNav4t cf"><dl class="navShopping"><dt><a href="/forum.php?gid=38">商家</a></dt>
<dd>
<a href="http://www.yifa1.com/portal.php?mod=topic&topicid=24"><span class="colnav5bb">口碑商家</span></a>
<a href="/forum.php?mod=forumdisplay&fid=61"><span>商家资讯</span></a>
<a href="/forum.php?mod=forumdisplay&fid=60"><span>商家商品</span></a>
<a href="/forum.php?mod=forumdisplay&fid=66" class="colnav5bb"><span>打折促销</span></a>
<a href="/forum.php?mod=forumdisplay&fid=59"><span>商家活动</span></a>
<a href="/forum.php?mod=forumdisplay&fid=65" class="colnav6bb"><span>消&nbsp;&nbsp;费&nbsp;&nbsp;券</span></a></dd>
</dl>
<dl class="navLife"><dt>分类</dt><dd>
<a href="/forum.php?mod=forumdisplay&fid=45"><span>商家招聘</span></a>
<a href="/forum.php?mod=forumdisplay&fid=46"><span>个人求职</span></a>
<a href="/forum.php?mod=forumdisplay&fid=51"><span>二手交易</span></a>
<a href="/forum.php?mod=forumdisplay&fid=63"><span>报纸快讯</span></a>
<a href="/plugin.php?id=vgallery:vgallery"><span>视频广告</span></a>
<a href="/forum.php?mod=forumdisplay&fid=67"><span>图片广告</span></a></dd>
</dl>
<dl class="navTalk">
<dt><a href="http://bbs.yifa1.com/">社区</a></dt>
<dd>
<a href="/forum.php?mod=forumdisplay&fid=47"><span>消费特搜</span></a>
<a href="/forum.php?mod=forumdisplay&fid=58"><span>消费常识</span></a>
<a href="/forum.php?mod=forumdisplay&fid=49"><span>交流分享</span></a>
<a href="/forum.php?mod=forumdisplay&fid=55"><span>创业投资</span></a>
<a href="/forum.php?mod=forumdisplay&fid=52"><span>理财天地</span></a>
<a href="/forum.php?mod=forumdisplay&fid=54"><span>职场生涯</span></a></dd>
</dl>
<dl class="navService">
<dt>便民</dt><dd>
<a href="http://www.yifa1.com/plugin.php?id=sanree_tel114"><span>电话簿</span></a><a href="http://bbs.yifa1.com/home.php?mod=spacecp&ac=plugin&id=wb_share_dzx:actionscp"><span>微博控</span></a>
</dd>
</dl>
</div>
</div>

看不明，但还是要谢谢楼主的分享。

楼上卖广告呀？

{:soso_e179:}不明白,感觉很好,你能教我做做吗?

304733577 发表于 2012-2-28 00:50
不明白,感觉很好,你能教我做做吗?

Q我：121488257

我貌似不会搞

代码很长呀

那个图标是怎么加上的？

谢谢分享