diff --git a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
index 77097b53..ba66e30a 100755
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
@@ -235,8 +235,8 @@ export default class InterfaceColMenu extends Component {
                 title={
                   <div className="menu-title">
                     <span><Icon type="folder-open" style={{marginRight: 5}} /><span>{col.name}</span></span>
-                    <Dropdown overlay={menu(col)}>
-                      <Icon type='bars'/>
+                    <Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
+                      <Icon className="opts-icon" type='ellipsis'/>
                     </Dropdown>
                   </div>
                 }
diff --git a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
index 4fb8a4ab..2d489328 100755
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
@@ -1,7 +1,17 @@
 .col-list-tree {
+  line-height: 25px;
   .ant-tree-node-content-wrapper {
     width: calc(100% - 24px);
   }
+  .opts-icon, .case-delete-icon {
+    line-height: 25px;
+    width: 30px;
+  }
+  .opts-icon:hover, .case-delete-icon:hover {
+    color: #2395f1;
+    border-radius: 4px;
+    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+  }
   .menu-title {
     display: flex;
     justify-content: space-between;
@@ -13,9 +23,6 @@
       margin-left: 5px;
       display: none;
     }
-    i:before{
-      line-height: 17px;
-    }
   }
   .menu-title:hover {
     .case-delete-icon {
diff --git a/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js b/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
index d755c07d..793e6b4c 100755
--- a/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
+++ b/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
@@ -12,7 +12,6 @@ import { Link, withRouter } from 'react-router-dom';
 const confirm = Modal.confirm;
 const TreeNode = Tree.TreeNode;
 
-
 @connect(
 
   state => {
@@ -384,8 +383,8 @@ class InterfaceMenu extends Component {
           {menuList.map((item) => {
             return <TreeNode title={<div>
               <Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/cat_" + item._id} ><Icon type="folder-open" style={{ marginRight: 5 }} />{item.name}</Link>
-              <Dropdown overlay={menu(item)}>
-                <Icon type='setting' className="interface-delete-icon" />
+              <Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
+                <Icon type='ellipsis' className="interface-delete-icon" />
               </Dropdown>
             </div>}
              key={'cat_' + item._id}
diff --git a/client/containers/Project/Interface/interface.scss b/client/containers/Project/Interface/interface.scss
index bec79253..de39e312 100755
--- a/client/containers/Project/Interface/interface.scss
+++ b/client/containers/Project/Interface/interface.scss
@@ -94,6 +94,7 @@
                 overflow: hidden;
                 top: 0px;
                 line-height: 100%;
+                text-decoration: none;
             }
             .interface-item-nav{
                 line-height:25px;
@@ -111,6 +112,11 @@
                 line-height: 25px;
                 width: 30px;
             }
+            .interface-delete-icon:hover {
+                color: #2395f1;
+                border-radius: 4px;
+                box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+            }
         }
     }