下拉菜單
.nav li{
list-style-type: none;
line-height: 30px;
text-align: center;
}
.nav>li{
float: left;
}
.nav li a{
display: inline-block;
width: 100px;
height: 30px;
text-decoration: none;
background-color: black;
}
.nav li a:hover,a:active{
color: cornflowerblue;
}
.nav li a:link,a:visited{
color: white;
}
.nav .subnav{
left: -999em;
position: absolute;
z-index: 1000;
}
.nav li:hover .subnav{
left:auto;
}
![這裏寫圖片描述]()
頁碼導航
<style>
body{
font-size: 1.4em;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
float: left;
list-style-type: none;
margin-left: 0.5em;
}
ul li a{
display: block;
padding: 0.2em 0.5em;
border: 1px solid #ccc;
text-decoration: none;
background: white;
color: blue;
}
ul a[rel="Prev"],
ul a[rel="Next"]{
border: none;
}
ul li a:hover,
ul li a:focus,
ul li.selected{
background: blue;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" rel="Prev"><<Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" rel="Next">Next>></a></li>
</ul>
![這裏寫圖片描述]()
