HTML/CSS 悬停下拉菜单
[英]HTML/CSS Hover Dropdown Menu
问题描述
我试图使用 HTML 和 CSS 制作一个下拉菜单，但我似乎无法让它工作。 我试过使用position: absolute; ，但我不希望下拉菜单以这种方式定位，因为如果我决定调整窗口大小，它将无法正常工作。
所以，我想知道是否有办法在 HTML 和 CSS 中制作一个可悬停的下拉菜单，而不使用绝对定位。
这是我当前的代码：
CSS/HTML
/* dropdown-style.css */ .dropdown-menu { background-color: aqua; display: none; padding: 10px; border-radius: 0px 0px 8px 8px; /* box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.377); */ z-index: 1; position: absolute; /* width: 100%; */ /* margin-left: 30%; */ } .menu-dropdown-button { background-color: aqua; padding: 10px; border: none; outline: none; width: 1.5in; border-radius: 3px; width: 100%; } .menu-dropdown-button:hover { background-color: rgb(9, 209, 209); cursor: pointer; } .menu-dropdown-button:active { background-color: rgb(12, 184, 184); cursor: progress; } #dropdown-button:hover + .dropdown-menu { display: block; } .dropdown-menu:hover { display: block; } .dropdown-button { display: block; } /* menu-style.css */ .menu { background-color: aqua; width: 100%; padding: 5px; z-index: 11; box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.377); margin-right: 0 auto; border-radius: 8px; float: left; } .menu-button { background-color: aqua; padding: 10px; border: none; outline: none; width: 1.5in; border-radius: 3px; } .menu-button:hover { background-color: rgb(9, 209, 209); cursor: pointer; } .menu-button:active { background-color: rgb(12, 184, 184); }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/menu-style.css"> <!-- <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" > <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" > --> <link rel="stylesheet" type="text/css" href="css/dropdown-style.css"> </head> <body> <div id="main-menu" class="menu"> <button class="menu-button">Home</button> <button class="menu-button">Forums</button> <button class="menu-button">Store</button> <button id="dropdown-button" class="menu-button">More <span class="fa fa-caret-down"></span></button> <div id="more-dropdown-menu" class="dropdown-menu"> <button class="menu-button dropdown-button">Apply</button> <button class="menu-button dropdown-button">Appeal</button> <button class="menu-button dropdown-button">Contact</button> </div> </div> <script type="type/javascript" src="js/dropmenu-script.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-01-18 03:31:40
我希望这是你所期待的。 如果您移动按钮内的下拉菜单，它将按您的预期工作。
/* dropdown-style.css */ .dropdown-menu { background-color: aqua; display: none; padding: 10px; border-radius: 0px 0px 8px 8px; /* box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.377); */ z-index: 1; position: absolute; /* width: 100%; */ /* margin-left: 30%; */ } .menu-dropdown-button { background-color: aqua; padding: 10px; border: none; outline: none; width: 1.5in; border-radius: 3px; width: 100%; } .menu-dropdown-button:hover { background-color: rgb(9, 209, 209); cursor: pointer; } .menu-dropdown-button:active { background-color: rgb(12, 184, 184); cursor: progress; } #dropdown-button:hover + .dropdown-menu { display: block; } .menu-button:hover #more-dropdown-menu { display: block; } #more-dropdown-menu li{ width:90px; } .dropdown-button { display: block; } /* menu-style.css */ .menu { background-color: aqua; width: 100%; padding: 5px; z-index: 11; box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.377); margin-right: 0 auto; border-radius: 8px; float: left; } .menu-button { background-color: aqua; padding: 10px; border: none; outline: none; width: 1.5in; border-radius: 3px; } .menu-button:hover { background-color: rgb(9, 209, 209); cursor: pointer; } .menu-button:active { background-color: rgb(12, 184, 184); }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/menu-style.css"> <!-- <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" > <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" > --> <link rel="stylesheet" type="text/css" href="css/dropdown-style.css"> </head> <body> <div id="main-menu" class="menu"> <button class="menu-button">Home</button> <button class="menu-button">Forums</button> <button class="menu-button">Store</button> <button id="dropdown-button" class="menu-button">More <span class="fa fa-caret-down"></span> <ul id="more-dropdown-menu" class="dropdown-menu"> <li class="menu-button dropdown-button">Apply</li> <li class="menu-button dropdown-button">Appeal</li> <li class="menu-button dropdown-button">Contact</li> </ul> </button> </div> <script type="type/javascript" src="js/dropmenu-script.js"></script> </body> </html>
在 html 中创建一个悬停下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.