html - 下拉選單
html - 下拉選單 (display block /none)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 205px;
}
.b{
width: 200px;
height: 50px;
background-color: limegreen;
text-align: center;
line-height: 50px;
color: #ffffff;
}
.c{
width: 200px;
height: 300px;
background-color: gainsboro;
display: none;
/*visibility: hidden;*/
}
ul{
list-style: none;
margin-left: -40px;
}
ul li{
line-height: 50px;
display: block;
width: 200px;
text-align: center;
}
.a:hover{
cursor: pointer;
}
.a:hover .c{
display: block;
}
.a:hover .b{
background-color: green;
}
li:hover{
background-color: gray;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
關於我們
</div>
<div class="c">
<ul>
<li>公司簡介</li>
<li>董事長致辭</li>
<li>企業文化</li>
<li>團隊風采</li>
</ul>
</div>
</div>
</body>
</html>
相關文章
- HTML select下拉選單HTML
- HTML select 下拉選單HTML
- HTML+CSS實現下拉選單HTMLCSS
- 用HTML建立連動下拉選單HTML
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- 下拉選單
- HTML5-網頁標欄的下拉選單HTML網頁
- jq+css+html打造下拉導航選單例項CSSHTML單例
- vue下拉選單Vue
- Spinner下拉選單
- Bootstrap下拉選單disabledboot
- Vue.js自定義下拉選單,如何實現在下拉選單區域外點選即可關閉下拉選單的功能Vue.js
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- kendoUI 多選下拉選單 kendoMultiSelectUI
- CSS 二級下拉選單CSS
- CSS二級下拉選單CSS
- jQuery 二級下拉選單jQuery
- DIV下拉式選單(轉)
- 選中select下拉選單項提交表單
- HTML5與CSS3中滑鼠懸停會有下拉選單HTMLCSSS3
- 30個漂亮的HTML5和CSS3下拉選單HTMLCSSS3
- jQuery 美化select下拉選單jQuery
- 圓角select下拉選單
- Bootstrap3系列:下拉選單boot
- select下拉選單 change事件事件
- bootstrap36-Bootstrap下拉選單boot
- 滑鼠滑過,展示下拉選單
- AngularJS教程十—— 下拉選單AngularJS
- 10個優秀的 HTML5 & CSS3 下拉選單製作教程HTMLCSSS3
- css滑鼠懸浮下拉選單效果CSS
- JavaScript二級下拉選單詳解JavaScript
- 下拉選單框和滾動條
- CSS導航欄及下拉選單CSS
- JavaScript帶下拉選單的文字框JavaScript
- jQuery與CSS二級下拉選單jQueryCSS
- 可以輸入select下拉選單
- 滑鼠經過顯示下拉選單
- jquery如何操作select下拉選單jQuery