<!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>
<style?type="text/css">
????*??
{
??????padding:0;
??margin:0;?
??font-size:?16px;
??behavior:url(css/csshover.htc);
}
.nav{
??width:?230px;
??list-style-type:?none;?
??border:1px?solid?red;
??margin:20px;
??overflow:?hidden;}
.top-title{?
padding-left:20px;
background:?red;?
width:?260px;
color:white;?
height:?40px;
line-height:?40px;?
overflow:?hidden;
display:?block;}
.nav?li{
???width:?260px;?
???list-style-type:?none;
???height:?30px;?
???line-height:?30px;
???padding-left:10px;
???overflow:?hidden;
???z-index:?3;
???position:?relative;}
.nav?li?a{
color:#888;
text-decoration:?none;
font-weight:?800;}
?????
????.nav?li?a:hover{
???? color:red;
???? text-decoration:?underline;
???? font-weight:?800;}
????
.nav?li:hover{
??????box-shadow:?0?0?10px?#888;
??????webkit-box-shadow:0?0?10px?#888;
??????-moz-box-shadow:0?0?10px?#888;
??????border-right:?0;
????}
????.menu1{
???? display:none;
???? z-index:?4;
???? width:?500px;
???? height:?400px;
???? position:?absolute;
???? left:250px;
???? top:30px;
???? box-shadow:?0?0?5px?#ddd;
?????????webkit-box-shadow:0?0?5px?#ddd;
????????-moz-box-shadow:0?0?5px?#ddd;
????????background-color:?white;
???????}
????
????.nav?li:hover?.menu1
????{
???? display:?block;
????}
????
????.menu1_left
????{
???? float:?left;
???? width:?300px;
????????height:?400px;
????}
??
</style>
</head>
<body>
<ul?class="nav">
<div?class="top-title">商品分類</div>
<li><a?href="#">家電</a>
????<div?class="menu1">
? ???<div?class="menu1_left">
? ????
? ????</div>
? ????<div?class="menu1_right">
? ????
? ????</div>
???</div>
</li>
<li><a?href="#">家電</a>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
</li>
<li><a?href="#">家電</a></li>
?<div?class="menu1">?
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
<li><a?href="#">家電</a></li>
?<div?class="menu1">
? <div?class="menu1_left"></div>
? <div?class="menu1_right"></div>
?</div>
</ul>
</body>
</html>
2015-08-19
overflow:?hidden; 你在.nav?li與.nav中設置了這個屬性，怎么可以顯示。overflow:?hidden這個是超出了就不會顯示，而你的menu1絕對定位已經超出了.nav?li與.nav的區域