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

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. C++ Primer 快速入门
			
    <C++ Primer 4th> 读书摘要 必须有一个命名为 main.操作系统通过 main 函数返回的值来确定程序是否成功执行完毕.返回 0 值表明程序程序成功执行完毕.任何其他非零的 ...
    
			
    2. 
						
  2. PHP与Java进行通信
			
    缘起: 最近做了一个电商平台与网银整合的小东西,程序是开源的 Ecmall的,网银的接口也很规范,给出的文档很全,唯一的小问题是,网银使用的签名和验签的lib是只有java和c的,对java还熟悉一些 ...
    
			
    3. 
						
  3. 安装 Autoconf 2.69版
			
    发生错误configure.ac:8: error: Autoconf version 2.64 or higher is required 1.检查版本 [root@localhost Deskto ...
    
			
    4. 
						
  4. Leetcode 110 Balanced Binary Tree 二叉树
			
    判断一棵树是否是平衡树,即左右子树的深度相差不超过1. 我们可以回顾下depth函数其实是Leetcode 104 Maximum Depth of Binary Tree 二叉树 /** * Def ...
    
			
    5. 
						
  5. Leetcode 200 Number of Islands DFS
			
    统计联通区域块的个数,简单dfs,请可以参考DFS框架:Leetcode 130 Surrounded Regions DFS class Solution { public: int m, n; b ...
    
			
    6. 
						
  6. Windows下提升进程权限
			
    windows的每个用户登录系统后,系统会产生一个访问令牌(access token) ,其中关联了当前用户的权限信息,用户登录后创建的每一个进程都含有用户access token的拷贝,当进程试图执 ...
    
			
    7. 
						
  7. 关于启明星系统移除apppath配置，让系统自动获取路径来设置cookie的解决方法
			
    启明星系统底层使用统一接口,特别是用户,用户登录后,都会建立一个 userinfo 的cookie.请看下面2个网址: http://120.24.86.232/book http://120.24. ...
    
			
    8. 
						
  8. C# 传入引用类型的参数 返回值是否发生变化
			
    前一段时间做项目是,一YY说如果一个方法的参数是引用类型,那么在这个方法里面所做的所有的修改再方法调用后应该有体现.事实是这样的吗? 先看code 和运行结果: 运行结果 方法SetPersonInf ...
    
			
    9. 
						
  9. iOS  crash  异常捕获
			
    // //  UncaughtExceptionHandler.m //  UncaughtExceptions // //  Created by Matt Gallagher on 2010/05 ...
    
			
    10. 
						
  10. Tomcat远程调试
			
    1.如果tomcat在Windows下 打开%CATALINE_HOME%/bin下的文件catalina.bat,加入下面这行: set CATALINA_OPTS=-server -Xdebug  ...
    
			
    11.