下拉菜單的制作無js
下拉菜單有許多種制作方法；
今天我們就做最簡單的一種；
話不多說先看html
<body>
<div class="menubox">
<ul>
<li class="list1"><a href="">首頁</a></li>
<li class="list1"><a href="">公司簡介</a>
<ul>
<li class="list2"><a href="">公司的歷史</a></li>
<li class="list2"><a href="">公司的發展</a></li>
<li class="list2"><a href="">公司的規模</a></li>
</ul>
</li>
<li class="list1"><a href="">產品信息</a>
<ul>
<li class="list2"><a href="">產品簡介</a></li>
<li class="list2"><a href="">產品價格</a></li>
<li class="list2"><a href="">產品型號</a></li>
</ul>
</li>
<li class="list1"><a href="">聯系我們</a>
<ul>
<li class="list2"><a href="">電話</a></li>
<li class="list2"><a href="">郵箱</a></li>
<li class="list2"><a href="">微信</a></li>
</ul>
</li>
</ul>
</div>
</body>
這裏用到的是一種嵌套的結構；這樣不用定位也可以在list1的下方；
好了我們看下css
<style>
*{margin:0px;padding:0px;}
這個是初使化；
.menubox{margin:0 auto;width:800px;height:36px;}
這個是將導航菜單定 位在中間；
.menubox>ul{width:100%;height:100%;}
.list1{ width:200px;height:36px;
float:left;list-style-type:none;
font-size:18px;line-height:36px;
font-weight:bolder;
background:#F22765;text-align:center;
}
設置list1的樣式；垂直居中用lineheight=height;水平居中用：text:center;
.list1:hover{background:#DE18CC}
設置鼠標放上去時的樣式
.list1>a{text-decoration:none;color:#fff;}
設置list1下的a的樣式；註意如果color在list1上設置是沒有作用的；因為有a ；所以要在a 上設置字體顏色；
.list2{width:200px;height:36px;
font-size:14px;background:#F4D613;
line-height: 36px;text-align:center;
list-style-type:none;margin-bottom:2px;
display:none;
}
這個和list1幾乎一樣；但是這裏多了一個display:none; 這個就是隱藏；
.list2:hover{background:#F75839}
這個就不用講了吧！
.list1:hover .list2{display:block;}
這個是最重要的；這個就是讓鼠標放在list1上讓list2顯示和隱藏的；
.list2>a{text-decoration:none;color:#6A5757;}
這個也不用講了吧；
</style>
下拉菜單的制作無js