CSS 下拉菜单

2013. 07.22 10:44 / 681字 / 1,146阅 / 0评

HTML 部分
CSS 部分
效果预览

由于 Blogger 没有提供二级菜单功能，所以只好自己用 CSS 创建一个，但是唯一的缺点就是当前菜单无法高亮。Blogger 默认的菜单是有此功能的，所以鱼和熊掌不能兼得的我在遍寻谷歌只找到 javascript 的方法而且屡试屡败后还是放弃了。如果你也不介意没法高亮这件事，且来听我说说如何用 CSS 创建下拉菜单吧。

HTML 部分

这个部分很简单，用 <ul> 和 <li> 标签建立一个无序列表即可，比如我的如下：

<div class='navi' id='navi'>
  <ul class='nav' id='nav'>
    <li><a href='/'>首页</a></li>
    <li><a href='/p/aboutblog.html'>关于</a></li>
    <li><a href='/p/archive.html'>归档</a>
        <ul>
        <li><a href='/search/label/%E7%94%9F%E3%83%BB%E7%AE%80%E6%85%A2'>生&#12539;简慢</a></li>
        <li><a href='/search/label/%E8%B6%A3%E3%83%BB%E7%9B%8E%E7%84%B6'>趣&#12539;盎然</a></li>
        <li><a href='/search/label/%E9%80%94%E3%83%BB%E6%99%B4%E6%9C%97'>途&#12539;晴朗</a></li>
        <li><a href='/search/label/%E7%9F%A5%E3%83%BB%E6%97%A0%E6%B6%AF'>知&#12539;无涯</a></li>
        <li><a href='/search/label/%E4%B9%90%E3%83%BB%E7%BB%95%E6%A2%81'>乐&#12539;绕梁</a></li>
        <li><a href='/search/label/%E6%96%87%E3%83%BB%E6%8A%92%E6%80%80'>文&#12539;抒怀</a></li>
        </ul></li>
    <li><a href='/p/subscribe.html'>订阅</a></li>
    <li><a href='http://draft.blogger.com/'>登陆</a></li>
  </ul>
</div>

由于我的 Label 都是中文，虽然不知道有否必要，但我还是选择把中文转化为编码，比如“生・简慢”变成了“%E7%94%9F%E3%83%BB%E7%AE%80%E6%85%A2”。转换地址在此。

CSS 部分

这个部分就有点复杂了，我也是参考了 Create a Drop Down Menu In Blogger 修改而成（这里要注意 navi 和 nav 与 HTML 部分的对应。）：

/* Navi
-------------------------------------------------------------- */
#navi {
    margin: 0 -30px 30px; 
    padding: 0; 
    position: relative;
    border-bottom: 1px solid #eee;  
    height:50px;
    font-size: 20px;
    background: #f8f8f8;
    font-family: &quot;Microsoft Jhenghei&quot;,&quot;Microsoft YaHei&quot;,&quot;Hiragino Sans GB&quot;,Verdana,STSong,Simsun,Arial,Helvetica Neue,Helvetica,sans-serif;
    line-height: 50px;
}
#navi ul {
    margin: 0 0 20px 0;
} 
#nav li { 
    float: left;
    width: 100px;
    text-align: center;
}
#nav li a {
    display: block;
    border-bottom: 1px solid #eee;
} 
#nav li a:link, #nav li a:visited { 
    color: #444;
}
#nav li a:hover, #nav li a:active { 
    background: #444; 
    color: #FFF;
} 
#nav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul { 
    left: auto; 
}  
#nav li li {
    width: 100px;
    text-align: center;
}
#nav li li a {
    display: block;
    border-top: 1px solid #fefefe;
} 
#nav li li a:link, #nav li li a:visited { 
    background: #f8f8f8;
    color: #444;
    z-index: 9999;  
} 
#nav li li a:hover, #navli li a:active { 
    background: #444; 
    color: #FFF; 
}

效果预览