我需要一个具有以下特征的按钮：
用户单击按钮的左侧部分 - “编辑”，然后将他们带到一个表单。
用户单击右侧部分，它会出现一个子列表菜单的下拉菜单。
我使用两个单独的按钮编写了下面的代码片段，我采用了w3school的方法，它看起来像我想要的，除了：
当我将其悬停时，每个按钮都有自己的独立悬停行为，而不是一起执行。
当我驻留在浏览器中时，此按钮分为不同的行。
我该如何弥补这些缺陷？或者如果有一个像这样的开箱即用的按钮更好？我尝试用谷歌搜索“带有侧面菜单的按钮”，“按钮侧面下拉菜单”，按钮子菜单“等......但到目前为止没有运气。
.leftSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:5px 2px 2px 5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.leftSideButton:active {
position:relative;
top:1px;
}
.rightSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:2px 5px 5px 2px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 13px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.rightSideButton:active {
position:relative;
top:1px;
}
.splitButton{
display: block;
}
.btn-group leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>
</body>
</html>
海绵宝宝撒
德玛西亚99
相关分类