Zi 字媒體
2017-07-25T20:27:27+00:00
CSS 閱讀筆記–導航(工具列)橫向階層選單(2015/12/30)
資料來源: https://cold91.wordpress.com/2010/01/08/css簡易css水平下拉式選單製作/
css\menu.css
type=”text/css”>
/*menu01選單連結的顏色及去底線*/
#menu01
a {
text-decoration:
none;
color:
#CCCCCC;
}
/*menu01選單整體寬高及顏色置中設定*/
#menu01
{
width:
770px;
height:
30px;
text-align:
center;
padding:
0;
margin:
0 auto;
background:
#4E4E4E;
}
/*讓menu01選單的標頭都隱藏起來*/
#menu01
ol, li, ul {
padding:
0;
margin: 0;
list-style:
none;
}
/*調整整個選單各主標題連結*/
#menu01
li.submenu {
float:
left; /*
讓主標題連結變成水平狀*/
padding:
0;
margin:
0;
width:
154px; /*
各主標題連結的寬度*/
height:
30px; /*
各主標題連結的高度*/
text-align:
center;
}
/*調整子選單的寬度和高度*/
#menu01
li {
padding:
10px;
width:
80px; /*
各子選單連結的寬度*/
height:
20px; /*
各子選單連結的高度*/
text-align:
left;
}
/*ie8
ff
調整子選單的相對位置*/
#menu01
li ul {
display:
none; /*
展現方式為隱藏*/
position:
absolute; /*
子選單的對齊方法為絕對方式*/
z-index:
999; /*
子選單的圖層層級為999，在最上方*/
background:
#000;
margin-top:
5px; /*
子選單區塊與主連結的相對往下移點數*/
margin-left:
40px; /*
子選單區塊與主連結的相對往右移點數*/
}
/*顯示子選單區塊*/
#menu01
li:hover ul { /*
當滑鼠移到li時，ul會*/
display:
block; /*ul
會顯示出來，即子選單區塊顯示出來*/
}
/*調整滑鼠移到主選單的項目時會變什麼顏色*/
#menu01
li:hover { /*
當滑鼠移到li時*/
background-color:
red;
color:
white;
}
/*調整滑鼠移到子選單的項目時會變什麼顏色*/
#menu01
li li:hover { /*
當滑鼠移到li裡的li時*/
background-color:
blue;
color:
white;
}
menu.html
http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
InstanceBeginEditable name=”doctitle” –>
CP
CSS MENU
InstanceEndEditable –>
href=”css/menu.css” rel=”stylesheet”
type=”text/css” media=”screen” />
id=”menu01″>
class=”submenu”>
主連結1
href=”” target=”_self”>
內容1
href=”” target=”_self”>
內容2
href=”” target=”_self”>
內容3
class=”submenu”>
主連結2
href=”” target=”_self”>
內容1
href=”” target=”_self”>
內容2
href=”” target=”_self”>
內容3
class=”submenu”>
主連結3
href=”” target=”_self”>
內容1
href=”” target=”_self”>
內容2
href=”” target=”_self”>
內容3
class=”submenu”>
主連結4
href=”” target=”_self”>
內容1
href=”” target=”_self”>
內容2
href=”” target=”_self”>
內容3
class=”submenu”>
主連結5
寫了
5860316篇文章，獲得
23313次喜歡