1、效果截图
2、html代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div class="main-menu"><div class="logo"><p>XXX后台管理系统</p></div><div class="menu-list"><div class="dropdown"><button class="dropbtn">首页</button></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div></div></div><div class="content"></div><div class="footer"></div></body></html>
3、css代码
<style>.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;width: 120px;}.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 120px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: center;}.dropdown-content a:hover {background-color: #55aaff;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: #3e8e41;}.main-menu {background-color: #4caf50;height: 55px;width: 1200px;margin-left: 120px;}.menu-list{margin-left: 250px;margin-top: -68px;}.logo{/* background-color: #0000FF; */line-height: 55px;width: 170px;padding-left: 10px;}.content{background-color: #0080FF;height: 600px;width: 1200px;margin-top: 5px;margin-left: 120px;}.footer{height: 70px;width: 1200px;margin-top: 5px;margin-left: 120px;background-color: #4cc971;}</style>
4、全部代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;width: 120px;}.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 120px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: center;}.dropdown-content a:hover {background-color: #55aaff;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: #3e8e41;}.main-menu {background-color: #4caf50;height: 55px;width: 1200px;margin-left: 120px;}.menu-list {margin-left: 250px;margin-top: -68px;}.logo {/* background-color: #0000FF; */line-height: 55px;width: 170px;padding-left: 10px;}.content {background-color: #0080FF;height: 600px;width: 1200px;margin-top: 5px;margin-left: 120px;}.footer {height: 70px;width: 1200px;margin-top: 5px;margin-left: 120px;background-color: #4cc971;}</style></head><body><div class="main-menu"><div class="logo"><p>XXX后台管理系统</p></div><div class="menu-list"><div class="dropdown"><button class="dropbtn">首页</button></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟1</a><a href="#">菜鸟2</a><a href="#">菜鸟3</a></div></div></div></div><div class="content"></div><div class="footer"></div></body></html>
