CSS左侧导航效果的实现

yangyou230

浏览: 1645000 次

最近访客更多访客>>

hslh22

wzawz

lyl_420819

Johnzt

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1852)

社区版块

存档分类

2011-12 ( 379)
2011-11 ( 135)
2011-10 ( 54)
更多存档...

访问当当首页，当鼠标滑过左侧分类时候，可以看到分类的详细信息是固定区域的，如下所示：

但鼠标滑过左侧分类时，右侧显示是很好实现的，但是怎么能让其右侧和详细信息块“连接”上呢？

其实，通过css就可以实现。下面是我写的一个示例demo：

<!document html> <html> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> *{margin:0; padding:0;} ul,li{list-style:none;} .nav{ width:960px; margin:0 auto;} .nav_left{width:460px;} .nav_left ul{} .nav_left ul li{border-color: #DEDEDE;border-style: solid;border-width: 0 1px 1px; height: 37px; vertical-align: top;} .nav_left .nav_li_hover{border-color:red #FFFFFF red red;border-style: solid; border-width: 1px; position:relative; z-index:10; width:407px;} .nav_main{ width:550px; height:200px; border:1px solid; position:relative; top:-114px; left:408px; background-color:#F5FBFF; z-index:5;} </style> </head> <body> <div class="nav"> <div class="nav_left"> <ul> <li>导航栏1</li> <li class="nav_li_hover">导航栏2</li> <li>导航栏3</li> </ul> </div> <div class="nav_main">nav content</div> </div> </body> </html>

实现效果如下：