css a标签导航栏，点击之后的样式问题

freekaiQaQ 2016-09-23 07:38:59

不用jquery，因为ie8不兼容。
实现

1：鼠标悬浮a标签的样式想图中一样
2：假设点击“”首页“”，只有当前a标签下方出现出现白色的线，别的a标签没有该样式。
谢谢。

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

</head>



<body>

<div class="header">

<div class="infoArea">

<div class="logo"></div>

<div class="menu">

<ul>

<li><a href="#" class="menufont" style="background:url(images/menu_bg.png) repeat-x;" onclick="ss()">首页</a></li>

<li><a href="#" class="menufont" >AA</a></li>

<li><a href="#" class="menufont" >BB</a></li>

<li><a href="#" class="menufont" >CC</a></li>

<li><a href="#" class="menufont"  >DD</a></li>

</ul>

</div>

</div>

</div>



<div id="banner"></div>

<div class="footer">XXX</div>

</body>



</html>

CSS

/*禁用iPhone中Safari的字号自动调整*/

html {

    -webkit-text-size-adjust: none;

}

/*设置HTML5元素为块*/

article, aside, details, figcaption, figure, footer, header, menu, nav, section {

    display: block;

}

/*设置图片视频等自适应调整*/

img {

    max-width: 100%;

    height: auto;

    width: auto; /*ie8*/

}



body {

    padding: 0;

    margin: 0;

    font-family: "微软雅黑","宋体",serif;

}



ul {

    margin: 0;

    padding: 0;

}



li { float:left;

    list-style-type: none;

}



.clear {

    clear: both;

}



a {

    text-decoration: none;

}



.l {

    float: left;

}



.r {

    float: right;

}

/* header */

.header {

    width: 100%;

    font-size: 14px; height:80px; background-color:#cc231c;}

	 .header .infoArea {

        margin: 0 auto;

        width: 1200px; height:80px;

    }

	 .header .infoArea .logo {

            float: left;

            height: 80px;

            margin:0; width:290px; float:left;

			background:url(../images/logo.jpg)

        }

	 .header .infoArea .menu { float:left; margin-left:150px; width:600px; color:#FFF; font-size:16px; font-weight:bold; line-height:80px;}

	 	 .header .infoArea .menu ul li { float:left;width:120px; height:80px; text-align:center;}

		a.menufont:link { color:#fff; display:block; }

		a.menufont:hover { background:url(../images/menu_bg.png) repeat-x; color:#f6645e;}

		a.menufont:active { background:url(../images/menu_bg.png) repeat-x; color:#f6645e; }

		a.menufont:visited { color:#fff; }



/* banenr */

#banner { width:100%; height:520px;  background:url(../images/banner.jpg) center no-repeat;}



/*main*/

.main { width:1200px; margin:0 auto; margin-top:20px;}

.main .con { width:372px; height:165px; float:left; margin:0 10px; }

/* footer */

.footer {

  float:left;   width: 100%;

    background-color: #dcd4d4;

    color: #fff; margin-top:20px;

    min-width: 1200px; height:60px; line-height:60px; text-align:center;

}