css ul li实现纵向导航菜单效果

效果如下

 代码如下 复制代码

<style type="text/css">
#navsite {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    width: 12em;
    border-right: 1px solid #666;
    padding: 0;
    margin-bottom: 1em;
    background-color: #9cc;
    color: #333;
}
#navsite ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navsite ul li {
    margin: 0;
    border-top: 1px solid #003;
}
#navsite ul li a {
    display: block;
    padding: 2px 2px 2px 0.5em;
    border-left: 10px solid #369;
    border-right: 1px solid #69c;
    border-bottom: 1px solid #369;
    background-color: #036;
    color: #fff;
    text-decoration: none;
    width: 100%;
}
html>body #navsite ul li a {
    width: auto;
}
#navsite ul li a:hover {
    border-left: 10px solid #036;
    border-right: 1px solid #69c;
    border-bottom: 1px solid #369;
    background-color: #69f;
    color: #fff;
}
 
</style>

html

<div id="navsite">
    <ul>
        <li><a href="http://www.111cn.net">首页</a></li>
        <li><a href="http://www.111cn.net">技术文章</a></li>
        <li><a href="http://www.111cn.net">联系我们</a></li>
        <li><a href="http://www.111cn.net">提交文章</a></li>
        <li><a href="http://www.111cn.net">好主题</a></li>
    </ul>
</div>
时间： 2024-11-29 03:54:45

css ul li实现纵向导航菜单效果的相关文章

div+css实现仿猪八戒首页导航菜单效果

本文实例讲述了div+css实现仿猪八戒首页导航菜单效果.分享给大家供大家参考.具体如下: 这是一款仿猪八戒2010年首页的网页导航菜单,蓝色风格,非常漂亮大气.简洁专业,在此推荐给大家.菜单上有一个标记,指引当前的位置,也是本菜单的亮点.用CSS究竟是如何实现的呢?那么就请一起看代码吧. 先来看看运行效果截图: 具体代码如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

jQuery+css实现非常漂亮的水平导航菜单效果_jquery

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jQuery纵向导航菜单效果实现方法_jquery

本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $

css实现横向下拉导航菜单效果代码

视频 健康 房产 广州 北京 上海 深圳 天津 重庆 武汉 杭州 四川 家居 教育 读书 游戏 彩票 购彩大厅 合买大厅 彩票开奖 走势图 彩票资讯 手机购彩

CSS网页布局入门教程：纵向导航菜单

核心提示:纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧! 纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧!  如图所示的效果,我们先看一下代码结构: <div id="nav">    <h1>CSS</h1>        <h2><a href="#"

如何用CSS制作纵向导航菜单？

应用Web标准进行网页制作以后,我们通常用ul无序列表标签来构建菜单.我们以前讨论过很多横向菜单的制作,在前面的文章中,我们讲述了<用"ul+li"及css制作韩国风格菜单>,是一种纵向的导航菜单.我们今天来看另一种纵向导航菜单,我们不断的总结经验.提高编码水平,才能在实际操作中更加的得心应手. 我们看下面的XHTML代码:  代码如下 复制代码 <ul><span>www.111cn.net</span>  <li><

JS+CSS实现简单的二级下拉导航菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

jQuery+css实现的蓝色水平二级导航菜单效果代码_jquery

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

javascript实现带下拉子菜单的导航菜单效果

  本文实例讲述了javascript实现带下拉子菜单的导航菜单效果.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67