javascript - Ant Design: How can I disable border-bottom of a menu item on hover? - Stack Overflow

admin管理员组

文章数量:1317906

I want to modify the default style of a Menu Item (which has a Search Bar inside it), I want to remove the border-bottom property which is appeared by hovering over the item (search bar)

<Menu theme='light' className='nav-bar' mode='horizontal'>
      <Menu.Item disabled style={{ color: '#262626', fontSize: '1.5rem' }}>
        {/* <Title style={{color: '#40a9ff'}} level={4}>Dokan</Title> */}
        Dokan
      </Menu.Item>

      <Menu.Item className="modified-item">
        <Search
          placeholder='input search text'
          onSearch={(value) => console.log(value)}
        />
      </Menu.Item>

      <Menu.Item className>Change Theme</Menu.Item>

      <Menu.Item className>Home</Menu.Item>

      <Menu.Item className>Checkout</Menu.Item>
    </Menu>

what I have tried is:

.modified-item:hover {
  border-bottom: none;
}

but it didn't work.

I want to modify the default style of a Menu Item (which has a Search Bar inside it), I want to remove the border-bottom property which is appeared by hovering over the item (search bar)

<Menu theme='light' className='nav-bar' mode='horizontal'>
      <Menu.Item disabled style={{ color: '#262626', fontSize: '1.5rem' }}>
        {/* <Title style={{color: '#40a9ff'}} level={4}>Dokan</Title> */}
        Dokan
      </Menu.Item>

      <Menu.Item className="modified-item">
        <Search
          placeholder='input search text'
          onSearch={(value) => console.log(value)}
        />
      </Menu.Item>

      <Menu.Item className>Change Theme</Menu.Item>

      <Menu.Item className>Home</Menu.Item>

      <Menu.Item className>Checkout</Menu.Item>
    </Menu>

what I have tried is:

.modified-item:hover {
  border-bottom: none;
}

but it didn't work.

• javascript
• css
• reactjs
• redux
• antd

Share Improve this question Follow asked Jul 22, 2020 at 10:36 AshikAshik 3,4481212 gold badges3939 silver badges6565 bronze badges 3

• Instead of assigning class to Menu item, assign it to search box. Then apply the css. See if it works – CaffeinatedCod3r Commented Jul 22, 2020 at 10:40
• applied but didn't work. – Ashik Commented Jul 22, 2020 at 10:46
• Try with !important. If still didnt work then check in dev tools why it is appearing – CaffeinatedCod3r Commented Jul 22, 2020 at 10:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal > .ant-menu-submenu::after {
  border-bottom: none !important;
  transition: none !important;
}

border-bottom: none; is not a style option that exists in css. try border-bottom-style: none; or opacity: 0;

Instead of using className in Menu.Item use style property

<Menu.Item style={{borderBottom:'none'}}>
    <Search
      placeholder='input search text'
      onSearch={(value) => console.log(value)}
    />
</Menu.Item>

.ant-menu-item:hover::after {
  border-bottom: none !important;
}

This will work

Add Style to Your Menu Tag as below

<Menu
        onClick={this.handleClick}
        selectedKeys={[current]}
        mode="horizontal"
        className="pb-3 pl-3 pt-3"
        style={{borderBottom: "none", lineHeight:"0px"}}
      >

本文标签： javascriptAnt Design How can I disable borderbottom of a menu item on hoverStack Overflow