CSS怎样实现导航效果

这篇文章主要介绍CSS怎样实现导航效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

html

<div <ul>

<li><a href=”#” name=”topurl”>首页</a></li>

<li><a href=”#” name=”topurl”>手机</a></li>

<li><a href=”#” name=”topurl”>女人</a></li>

<li><a href=”#” name=”topurl”>数码家电</a></li>

<li><a href=”#” name=”topurl”>居家</a></li>

<li><a href=”#” name=”topurl”>读书</a></li>

</ul>

<script language=”javascript”>

function showmenu(){

var url = document.URL;

var urls = document.getElementsByName(“topurl”);

for(var i=0;i<urls.length;i++){

if(urls[i] == url){

urls[i].parentNode.className = &lsquo;navselect&rsquo;;

return;

}

}

urls[0].parentNode.className = &lsquo;navselect&rsquo;;

}

showmenu();

</script>

</div>

css

.navdefault{float:left;text-align:center;color:#fff;letter-spacing:1px;font-size:12px;}

.navselect {float:left;text-align:center;font-weight:bolder;color:#FFF;background:url(../images/head01/head_17.gif) no-repeat bottom;font-size:14px;}

以上是“CSS怎样实现导航效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！