下拉菜單（二）
阿新 • • 發佈：2018-10-31
a* 列表 自定義列 pla 空格 color 16px htm oct
由於上一個做的下拉菜單有問題，重新寫一個，雖然簡單但是初學的我也是搞了半天，
上一個的問題是：當懸浮在菜單上時，彈出的下拉菜單會將下面的內容下擠，造成布局混亂。
這兩個都是用自定義列表寫的。
效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;/*消除網頁默認的填充*/
}
dl {
width: 200px;
height: 50px;
text-align: center;
background: black;
position: relative;
display: inline-block;/*為父元素設置寬高，並設置相對位置，設置行內樣式*/
}
dt {
color: white;
line-height: 50px;
cursor: pointer;
}
dt:hover {
background: gray;
}
.div2 {
display: none;/*隱藏div中的a標簽*/
position: absolute;
}
dl:hover .div2 {/*顯示div中的的a*/
display: block;
width: inherit;
}
.div2 a {
text-decoration: none;/*為a標簽設置樣式，*/
color: white;
background: green;
display: block;
height: 50px;
line-height: 50px;
}
.div2 a:hover {
background: pink;
border-top: solid 1px blue;
border-bottom: solid 1px blue;
}
/*由於設置inline-block而產生空格間隔，用以下方式消除。*/
.div1 {
font-size: 0;
}
.div1 a,dt{
font-size: 16px;
}
</style>
</head>
<body>
<div class="div1">
<dl>
<dt>欄目一</dt>
<div class="div2">
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
</div>
</dl>
<dl>
<dt>欄目一</dt>
<div class="div2">
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
</div>
</dl>
<dl>
<dt>欄目一</dt>
<div class="div2">
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
<dd><a href="#">子菜單</a></dd>
</div>
</dl>
</div>
<p>測試文字（下拉菜單能否覆蓋文字，是否會將文字下擠）測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</p>
</body>
</html>
下拉菜單（二）