今天想做一个淘宝导航来练练手，遇到了边框覆盖的问题。如下图：

li的红色边框盖不住该灰色边框。后来问经验人士告诉我，这种边框覆盖是会出现无法100%保证正常的情况，遂得到如下3中解决方案：

1.以后遇到需要边框覆盖的，一般这个被覆盖边框用1px的图片平铺，这样不占用位置，上面的来覆盖可以轻松实现。

2.在移动到改元素上时，把被覆盖边框的边框颜色设置为何覆盖边框的颜色一样。

3.基于2，在移动到改元素上时，把被覆盖边框的边框颜色设置为none。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/nav.css">

</head>

<body>

<div class="content" >

    <div class="nav_left">

        <ul>

        <li class="nav_first_li"><div><span>服饰内衣</span></div></li>

        <li class="selected"><div><span>汽车用品</span></div></li>

        <li><div><span>居家家具</span></div></li>

        <li><div><span>在线教育</span></div></li>

        <li><div><span>文化娱乐</span></div></li>

        <li class="nav_last_li"><div><span>手机数码</span></div></li>

        </ul>

    </div>

    <div class="nav_right">

    </div>

</div>

</body>

</html>


/* CSS Document */


body,ul


{
	margin:0 ;
	padding:0;
}
.content{
	margin:0 auto;
	padding:0;
	background:white;
	font-size:14px;
	position:relative;
}
.nav_left,.nav_left ul{
 width:100px;
}
.nav_left{
	float:left;
 	margin:60px 0 0 60px;
 }




.nav_left ul li{
	list-style:none;
	line-height:2;	
	width:100px;
	border:	1px solid white;	
	border-left:1px solid #888;
	border-right:1px solid #888;
	margin-top:-1px;




}
.nav_left ul li:hover
{
	cursor:pointer;
	border:1px solid red;
	border-right:1px solid white;
	position:relative;
	z-index: 300;




}
.nav_left ul li:hover div
{
	border-top:1px solid red;




}
.nav_left ul li div
{




border-top:1px solid #666;
	width:80px;
	text-align:center;
	margin:-1px 10px 0 10px;
	padding:0;
	position:relative;




}
.nav_left ul .nav_last_li
{
	border-bottom:1px solid #666;




}
.nav_left ul .nav_first_li
{
	border-top:1px solid #666;
}
.nav_left ul .nav_first_li div
{
	margin-top:-1px;
}
.nav_right
{
    width:500px;
	height:500px;
	border:1px solid red;
	float:left;
	position:relative;
	z-index:200;
	left:1px;
	top:59px;
}


												


											
CSS之边框覆盖的更多相关文章
	

    
								
  1. CSS发光边框文本框效果
		
    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
    
		
    2. 
						
  2. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
		
    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
    
		
    3. 
						
  3. CSS border边框属性教程(color style)
		
    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
    
		
    4. 
						
  4. HTML&CSS基础-边框简写属性
		
    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html>  ...
    
		
    5. 
						
  5. 第50天学习打卡（CSS 圆角边框 盒子阴影 定位）
		
    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...
    
		
    6. 
						
  6. 使用CSS设置边框和背景
		
    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...
    
		
    7. 
						
  7. css圆角边框
		
    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
    
		
    8. 
						
  8. DIV+CSS颜色边框背景等样式
		
    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...
    
		
    9. 
						
  9. CSS中样式覆盖优先顺序
		
    原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. paip.自定义java 泛型类与泛型方法的实现总结
			
    paip.自定义java 泛型类与泛型方法的实现总结 ============泛型方法     public static <atiType,retType> retType reduce ...
    
			
    2. 
						
  2. paip。java 高级特性 类默认方法,匿名方法+多方法连续调用, 常量类型
			
    paip.java 高级特性 类默认方法,匿名方法+多方法连续调用, 常量类型 作者Attilax 艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http ...
    
			
    3. 
						
  3. Leetcode 189 Rotate Array stl
			
    题意:将数组旋转k次,如将数组[1,2,3,4,5]旋转1次得到[2,3,4,5,1],将数组[1,2,3,4,5]旋转2次得到[3,4,5,1,2]..... 本质是将数组分成两部分a1,a2,.. ...
    
			
    4. 
						
  4. Spring 之autowired
			
    Spring中autowired主要用于装配树形值,其关键类为BeanWrapperImpl,阅读代码发现其关键方法setPropertyValue有如下一段代码. PropertyHandler p ...
    
			
    5. 
						
  5. Avizo - 高级三维可视化及分析软件
			
    今天从材料科学应用角度介绍Avizo的基本功能. Avizo是一款先进的三维可视化及分析应用,可用来探索从断层扫描.显微镜.核磁共振成像及更多其他技术获得的材料科学数据.从简单的可视化与测量到高级的图 ...
    
			
    6. 
						
  6. 搭建windows的solr6服务器
			
    准备工作: 目前最新版本6.0.下载solr 6.0:Solr6.0下载 JDK8 下载jdk1.8:jdk1.8[solr6.0是基于jdk8开发的] tomcat8.0 下载:tomcat8 ## ...
    
			
    7. 
						
  7. 在Windows下使用Nodist进行Node版本控制
			
    完全卸载Node.js 首先卸载Node.js应用程序 确认在C:\Program Files中没有Nodejs目录 确认在C:\Program Files (x86)没有Nodejs目录 删除C:\ ...
    
			
    8. 
						
  8. 软件设计之UML—UML的构成[上]
			
      UML是一种通用的建模语言,其表达能力相当的强,不仅可以用于软件系统的建模,而且可用于业务建模以及其它非软件系统建模.UML综合了各种面向对象方法与表示法的优点,至提出之日起就受到了广泛的重视并得 ...
    
			
    9. 
						
  9. angular学习资源
			
    angular学习资源   angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs  ...
    
			
    10. 
						
  10. eoe移动开发社区创始人兼CEO靳岩：开发者缺极客精神
			
    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/)       [媒体专稿]移动互联网在中国的深入发展已经有5.6个年头,从当初苹果推出iPh ...
    
			
    11.