CSS如何实现图片中的效果？不用背景图片怎么实现？
0
最佳答案
0
示例：
<!DOCTYPE html>
<html>
<head>
<title>abc</title>
<style type="text/css">
#nav_bar {
height: 45px;
margin-left: 170px !important;
margin-top: 20px;
position: absolute;
width: auto;
z-index: 68;
}
.nav_dd.selected {
border: 1px solid #DEDEDE !important;
}
.selected {
border-color: #005BA6;
color: #FFFFFF !important;
}
.nav_dd {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #FFFFFF !important;
color: black;
cursor: pointer;
float: left;
font-size: 20px;
font-weight: bold;
height: 29px;
line-height: 30px;
margin-right: 24px;
overflow: hidden !important;
padding: 0 10px;
position: relative;
z-index: 50;
}
.nav_dd span.label {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid white;
color: #164065;
height: 100%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
z-index: 50;
}
.nav_dd div.content {
background: none repeat scroll 0 0 white;
border: 1px solid #494949;
box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.45);
left: -1px;
margin: 0 !important;
min-width: 100%;
position: absolute;
top: 30px;
z-index: 40;
}
.nav_dd div a {
border-top: 1px solid #FFF;
cursor: pointer;
display: block;
font-size: 13px;
font-weight: normal;
padding: 2px 8px;
text-decoration: none;
white-space: nowrap;
}
a {
color: #164065;
cursor: pointer !important;
}
.nav_dd:hover
{
box-shadow: -3px 3px 3px rgba(0,0,0,0.45);
-moz-box-shadow: -3px 3px 3px rgba(0,0,0,0.45);
-webkit-box-shadow: -3px 3px 3px rgba(0,0,0,0.45);
overflow: visible !important;
border: 1px solid #494949 !important;
height: 30px
}
.content a:hover
{
font-size:15px;
font-weight:bold;
}
</style>
</head>
<body style="background:none;">
<div style="" id="nav_bar">
<div class="nav_dd selected" id="ask">
cnblogs
<span class="label">
cnblogs
</span>
<div class="content">
<a href="http://q.cnblogs.com">q.cnblogs.com</a>
<a href="http://www.cnblogs.com">www.cnblogs.com</a>
</div>
</div>
</div>
</body>
</html>
效果：
收获园豆：30
太牛了，谢谢
其他回答(1)
0
同样告诉你
很简单的.products单独一个背景图片.注意下面是没边框线的.然后当鼠标移动上去给这个products的元素加上position:relative;z-index:999999