純CSS實現兼容IE7及以上寬度自適應無限級導航菜單附演示

2024-07-11 08:33:48

字體：大中小

來源：轉載

供稿：網友

先來個Demo：
http://m.survivalescaperooms.com/jiaoben/111258.html
好吧，我承認，我有點標題黨了，IE7的兼容并不是特別好，當鼠標離開某個導航再進入時，會留下上一次子菜單的殘影（寫的好像玄幻小說似的=。=）

不過純屬研究，O(∩_∩)O哈哈~

寬度自適應是指各級菜單都可以隨內容的長度自行適應寬度，而當瀏覽器分辨率較低時一級導航也可以自動換行，而多級子菜單靠左顯示還是得手動調整。

DOM結構比較簡單，只是 ol.nav 與 li.item 的互相嵌套而已。

看代碼吧（長是長了點，但其實你會發現導航的標簽結構真的真的很簡單，重要的是CSS部分）：

<!doctype html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<title>無限級純CSS導航菜單</title>
<style type=”text/css”>
.nav{
margin: 0;
padding: 0;
float: left;
list-style: none;
background: #222;
}
.nav a{
color: #ddd;
display: block;
padding: 0 15px;
text-decoration: none;
}
.nav a:hover{
color: #2FAADD;
}
.nav .item{
margin: 0;
padding: 0;
float: left;
height: 35px;
line-height: 35px;
white-space: nowrap;
}
.nav .item:hover>a{
color: #2FAADD;
}
.nav .item:hover>.nav{
display: block;
}
.nav .nav{
top: 100%;
left: 0;
display: none;
background: #444;
position: absolute;
border: 1px solid #888;
}
.nav .nav .item{
clear: both;
min-width: 100%;
}
.nav .nav .nav{
top: -1px;
left: 100%;
}
.nav .nav .nav .nav .nav .nav{
left: auto;
right: 100%;
}
</style>
</head>
<body>
<ul class=”nav”>
<li class=”item”><a href=”#”>一級導航 1</a>
<ul class=”nav”>
<li class=”item”><a href=”#”>二級導航 1</a>
<ul class=”nav”>
<li class=”item”><a href=”#”>三級導航 1</a></li>
<li class=”item”><a href=”#”>三級導航 2</a></li>
<li class=”item”><a href=”#”>三級導航 3</a></li>
<li class=”item”><a href=”#”>三級導航 4</a></li>
<li class=”item”><a href=”#”>三級導航 5</a></li>
</ul>
</li>
<li class=”item”><a href=”#”>二級導航 2</a>
<ul class=”nav”>
<li class=”item”><a href=”#”>三級導航 1</a></li>