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

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. [备忘][转]rsync使用时的常见问题
			
    sync使用时的常见问题: 错误1: rsync: read error: Connection reset by peer (104) rsync error: error in rsync pro ...
    
			
    2. 
						
  2. ubuntu下firefox无法看bilibili解决方案
			
    突然发现,在ubuntu中使用firefox打开bilibili网站无法加载视频与弹幕,在网上搜到的可能的问题为:linux下的firefox使用的flash player是老版本,bilibili不 ...
    
			
    3. 
						
  3. atitit.二维码生成总结java zxing
			
    atitit.二维码生成总结java zxing #-----zxing类库.. but zxing3.0  的类库core-3.0.jar 需要jdk7 只好zing2.2.jar ..jdk6走o ...
    
			
    4. 
						
  4. paip. 混合编程的实现resin4 (自带Quercus ） 配置 php 环境
			
    paip. 混合编程的实现resin4 (自带Quercus ) 配置 php 环境 #---混合编程的类型 1.代码inline 方式 2.使用库/api  解析方式. #----配置resin 支 ...
    
			
    5. 
						
  5. asp提取声母源码
			
    <% '****************************** '函数:getpychar(char) '参数:char,任意中文字符或句子 '作者:阿里西西 '日期:2007/7/15  ...
    
			
    6. 
						
  6. 解决ScrollView嵌套ListView，ListView填充容器后，界面自动滚动回顶部的问题
			
    1.scrollView.scrollTo(0,0),有时可以,有时不行: 2.listView.post(new Runnable() {                               ...
    
			
    7. 
						
  7. android: SQLite升级数据库
			
    如果你足够细心,一定会发现 MyDatabaseHelper 中还有一个空方法呢!没错,onUpgrade() 方法是用于对数据库进行升级的,它在整个数据库的管理工作当中起着非常重要的作用,可 千万不 ...
    
			
    8. 
						
  8. Python操作Excel
			
    一.系统性学习 对于操作Excel,需要Xlrd/xlwt这两个模块,下面推荐出系统性学习的网址: python操作Excel读写--使用xlrd 官方文档 Python 使用 Xlrd/xlwt 操 ...
    
			
    9. 
						
  9. Javascript生成全局唯一标识符（GUID,UUID）的方法
			
    方法一 function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { v ...
    
			
    10. 
						
  10. activemq安装与简单消息发送接收实例
			
    安装环境:Activemq5.11.1, jdk1.7(activemq5.11.1版本需要jdk升级到1.7),虚拟机: 192.168.147.131 [root@localhost softwa ...
    
			
    11.