2015年12月26日 星期六
下拉式選單
1.在
]]></b:skin> 前面加上
/* ----- NAV MENU ----- */
#navMenu {
width: 910px;
height: 35px;
background:#deb8b8 url(https://drive.google.com/uc?export=view&id=0B-OjoqPCcGXJM011TXJVNmtJdXc) repeat-x top;
color: #b56666;
margin: 0 auto 0;
padding: 0;
font: bold 11px Century Gothic, Arial, Tahoma, Verdana;
border-top: 1px solid #debeb8;
border-bottom: 1px solid #FFFFFF;
}
#navMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #b56666;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Century Gothic, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#deb8b8;
color: #b56666;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#deb8b8 url(https://drive.google.com/uc?export=view&id=0B-OjoqPCcGXJM011TXJVNmtJdXc) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #deb8b8;
border-left: 1px solid #deb8b8;
border-right: 1px solid #deb8b8;
font: normal 14px Century Gothic, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #deb8b8;
color: #b56666;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
2.在這段程式碼
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格名稱' type='Header'/>
</b:section>
</div>
下方加上自訂義的下拉式導航列
<!-- start nav -->
<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='欲連結網址'>第1層</a>
<ul><li><a href='欲連結網址'>第二層1</a></li>
<li><a href='欲連結網址'>第二層2</a>
<ul><li><a href='欲連結網址'>第3層1</a></li>
<li><a href='欲連結網址'>第3層2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='欲連結網址'>Tips and Trick</a></li>
</ul>
</div>
</div> <!-- end nav -->
參考資料:
http://david511382-learning.blogspot.tw/2015/10/blog-post_20.html
https://drive.google.com/uc?export=view&id=0B-OjoqPCcGXJM011TXJVNmtJdXc
訂閱:
文章 (Atom)