1. 程式人生 > >HTML用DIV/CSS實現下拉列表

HTML用DIV/CSS實現下拉列表

HTML程式碼:

<body>
		
		<div class="title" >
		<h1>SYROS</h1>
		
		<ul>
			<li><a href="">HOME</a>
				<ul class="home_ul">
					<li>home1</li>
					<li>home1</li>
					<li>home1</li>
				</ul>
			</li>
			<li><a href="">PAGES</a></li>
			<li><a href="">PORTFOLIO</a></li>
			<li><a href="">BLOG</a></li>
			<li><a href="">SHOP</a></li>
			<li><a href="">FEATURES</a></li>
		</ul>
		
		</div>

CSS程式碼:

body{
	margin: 0px;
}
.title{
	width: 100%;
	height: 100px;
	position: absolute;
	z-index: 1000;
    color: white;
    margin-left: 25px;
    margin-top: 15px;
    
}
.title h1{
	float: left;

}
.title ul{;
	list-style: none;
}
.title ul li{
	float: left;
	margin-left: 30px;
	padding: 5px 5px 5px 5px;
	font-size: 10px;
}
.title ul li a{
	color: white;
	text-decoration: none;
}
.title ul li a:hover{
	color: yellow;
}
.home_ul{
	position: absolute;
	display: none;
	background-color: white;
	color: black;
}
.title .home_ul li{
	float: none;
}
.title ul li:hover .home_ul{
	display: block;
}
.bg{
	width: 100%;
	height: 700px;
	background-image: url(../img/about_us_title_bg.jpg);
	background-repeat: no-repeat;
}

實現效果:

由於div標籤預設是縱向排列,所以需要使用float: left;使其水平排列。

list-style: none;去掉文字圓點。

text-decoration: none;去掉文字下劃線。

要實現下拉列表就在內容裡再加一個<ul>,以此類推,要幾級選單就加幾個。

<li><a href="">HOME</a>                 <ul class="home_ul">                     <li>home1</li>                     <li>home1</li>                     <li>home1</li>                 </ul>             </li>

滑鼠移至“HOME”上,用hover這個屬性,這裡用到兩種方法,color使滑鼠移上文字變顏色,display:block;使隱藏的文字顯示出來