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

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. [BTS] The value "" for the property InboundId is invalid
			
    Microsoft.ServiceModel.Channels.Common.MetadataException: Retrieval of Operation Metadata has failed ...
    
			
    2. 
						
  2. paip.字符串操作uapi java php python总结..
			
    paip.字符串操作uapi java php python总结.. java and php 相互转换.. import strUtil>>>  requiry(strUtil.p ...
    
			
    3. 
						
  3. 文件上传小技巧/原生态【html篇】
			
    引语:大家都知道,html中上传文件就一个input,type=file就搞定了.但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的.但是其实挺简单,今天就来说说上传文件小技巧吧 ...
    
			
    4. 
						
  4. 通过boundingRectWithSize:options:attributes:context:计算文本尺寸
			
    转:http://blog.csdn.net/iunion/article/details/12185077   之前用Text Kit写Reader的时候,在分页时要计算一段文本的尺寸大小,之前使用 ...
    
			
    5. 
						
  5. 禁用iOS的UIView长按默认操作
			
    * {    -webkit-touch-callout: none;    -webkit-user-select: none;    -webkit-tap-highlight-color: rg ...
    
			
    6. 
						
  6. Parallel的陷阱
			
    ,).ToArray(); ; Parallel.For<int>( fromInclusive: , toExclusive: nums.Length, /* 陷阱 */ localIn ...
    
			
    7. 
						
  7. java微信开发API第一步 服务器接入
			
    I如何接入服务器,下面就为大家进行介绍 一.说明 * 本示例根据微信开发文档:http://mp.weixin.qq.com/wiki/home/index.html最新版(4/3/2016 5:34 ...
    
			
    8. 
						
  8. WIN7、WIN8 右键在目录当前打开命令行Cmd窗口(图文)
			
    Win7系统大家习惯“Win+R”的组合键打开命令提示符. 通常右击文件夹是没有进入命令行 进入某个文件夹里面,先按住Shift键,然后鼠标右键,出现选项“在此处打开命令窗口(W)”也可以打开命令行. ...
    
			
    9. 
						
  9. spring和ehcache整合，实现基于注解的缓存实现
			
    要实现基于注解的缓存实现,要求Spring的版本在3.1或以上版本. 首先需要在spring的配置文件中添加对缓存注解的实现: <?xml version="1.0" enc ...
    
			
    10. 
						
  10. Linux每天定时重启Tomcat服务
			
    1:查看crond 服务状态(确认Linux任务计划服务开启) service crond status crond (pid  1937) is running... 2:编写重启Tomcat的sh ...
    
			
    11.