HTML用DIV/CSS實現下拉列表
阿新 • • 發佈：2018-12-14
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;使隱藏的文字顯示出來