Hi I have a little problem, I am using divs inside a menulist tag along with the menuitems of the package material taildwind css but whenever I reload the page there is a hover with black border by default, is there any way to remove this, it’s like the tag adds it by default when there is a div inside. Please help!
This is my header.tsx
``
`"import logo from "../assets/imgs/Logo.svg";
import React, { useState } from 'react';
import { Menu, MenuHandler, MenuList, MenuItem, Typography, ListItem } from '@material-tailwind/react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import i18n from '../config/i18n.ts'; // Asegúrate de que la ruta es correcta
import { useTranslation } from 'react-i18next';
import { initReactI18next } from 'react-i18next';
import { Card } from "react-bootstrap";
interface HeaderProps {
toggleState: () => void;
}
const Header: React.FC<HeaderProps> = ({ toggleState }) => {
const { t } = useTranslation();
const [isColorChangerVisible, setIsColorChangerVisible] = useState<boolean>(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const changeLanguage = (lng: string) => {
i18n.changeLanguage(lng);
};
const handleColorChange = () => {
setIsColorChangerVisible(!isColorChangerVisible);
};
const handleButtonClick = () => {
handleColorChange();
toggleState();
};
return (
<>
<header className="h-[125px] p-5 text-slate-500 w-auto font-mulish">
<div id="menu" className="flex justify-start items-center lg:ml-0">
<img src={logo} className="h-[60px] w-[50px] mt-[45px]" />
<div className="">
<p className="pt-5 ml-5 text-color-tomato hidden alcateles:block">revodocdesign</p>
</div>
<nav className="hidden xl:flex pt-5 ml-[200px]">
<a href="#" className="mr-[30px] hover:text-color-tomato font-mulish">
{t('header.home')}
</a>
<a href="#" className="mr-[30px] hover:text-color-tomato font-mulish">
{t('header.about')}
</a>
<a href="#" className="mr-[30px] hover:text-color-tomato font-mulish">
{t('header.templates')}
</a>
<a href="#" className="mr-[30px] hover:text-color-tomato font-mulish">
{t('header.support')}
</a>
<Menu
animate={{
mount: { opacity: 1, transform: 'translateY(0)' },
unmount: { opacity: 0, transform: 'translateY(-20px)' },
}}
>
<MenuHandler>
<Typography className="font-mulish text-black">
<ListItem
className="flex items-center gap-2 py-2 pr-4 hover:text-color-tomato mt-[-5px] "
selected={isMenuOpen || isMobileMenuOpen}
onClick={() => setIsMobileMenuOpen((cur) => !cur)}
>
{t('header.languages')}
<ChevronDownIcon
strokeWidth={2.5}
className={`hidden h-3 w-3 transition-transform lg:block ${isMenuOpen ? 'rotate-180' : ''}`}
/>
<ChevronDownIcon
strokeWidth={2.5}
className={`block h-3 w-3 transition-transform lg:hidden ${isMobileMenuOpen ? 'rotate-180' : ''}`}
/>
</ListItem>
</Typography>
</MenuHandler>
<MenuList>
<div className="flex w-[410px]"> // Here is the problem
<ul className="pr-4">
<MenuItem onClick={() => changeLanguage('en')}>
<span className="fi fi-gb rounded"><p className="pl-[35px] mt-[-13px]">English</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('es')}>
<span className="fi fi-es rounded"><p className="pl-[35px] mt-[-13px]">Español</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('fr')}>
<span className="fi fi-fr rounded"><p className="pl-[35px] mt-[-13px]">Français</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('it')}>
<span className="fi fi-it rounded"><p className="pl-[35px] mt-[-13px]">Italiano</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('pt')}>
<span className="fi fi-pt rounded"><p className="pl-[35px] mt-[-13px]">Português</p></span>
</MenuItem>
</ul>
<ul className="pl-[80px]">
<MenuItem onClick={() => changeLanguage('de')}>
<span className="fi fi-de rounded"><p className="pl-[35px] mt-[-13px]">Deutsch</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('ru')}>
<span className="fi fi-ru rounded"><p className="pl-[35px] mt-[-13px]">Русский</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('uk')}>
<span className="fi fi-ua rounded"><p className="pl-[35px] mt-[-13px]">Українська</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('nl')}>
<span className="fi fi-nl rounded"><p className="pl-[35px] mt-[-13px]">Nederlands</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('zh')}>
<span className="fi fi-cn rounded"></span><p className="pl-[35px] mt-[-19px] font-cjk">简体中文</p>
</MenuItem>
</ul>
<ul className="pl-[35px]">
<MenuItem onClick={() => changeLanguage('pl')}>
<span className="fi fi-pl rounded"><p className="pl-[35px] mt-[-13px]">Polski</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('ro')}>
<span className="fi fi-ro rounded"><p className="pl-[35px] mt-[-13px]">Română</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('da')}>
<span className="fi fi-dk rounded"><p className="pl-[35px] mt-[-13px]">Danskere</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('sv')}>
<span className="fi fi-se rounded"><p className="pl-[35px] mt-[-13px]">Svenska</p></span>
</MenuItem>
<MenuItem onClick={() => changeLanguage('tr')}>
<span className="fi fi-tr rounded"><p className="pl-[35px] mt-[-13px]">Türkçe</p></span>
</MenuItem>
</ul>
</div>
</MenuList>
</Menu>
</nav>
<div className="flex items-center ml-auto mt-[20px] text-white">
<button id="menu" onClick={handleButtonClick}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 text-color-tomato xl:hidden mr-[15px]">
<path fillRule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
</svg>
</button>
<button
type="button"
className="xl:hidden md:flex w-[50px] h-[40px] rounded bg-color-tomato px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:shadow-dark-2 motion-reduce:transition-none dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 mx-[-10px]">
<path d="M5.25 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM2.25 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM18.75 7.5a.75.75 0 0 0-1.5 0v2.25H15a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H21a.75.75 0 0 0 0-1.5h-2.25V7.5Z" />
</svg>
</button>
<button
type="button"
className="xl:hidden ml-[20px] w-[50px] h-[40px] inline-block rounded bg-color-tomato px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:shadow-dark-2 motion-reduce:transition-none dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 mx-[-10px]">
<path fillRule="evenodd" d="M7.5 3.75A1.5 1.5 0 0 0 6 5.25v13.5a1.5 1.5 0 0 0 1.5 1.5h6a1.5 1.5 0 0 0 1.5-1.5V15a.75.75 0 0 1 1.5 0v3.75a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3V5.25a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3V9A.75.75 0 0 1 15 9V5.25a1.5 1.5 0 0 0-1.5-1.5h-6Zm10.72 4.72a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1 0 1.06l-3 3a.75.75 0 0 1-1.06-1.06l1.72-1.72H9a.75.75 0 0 1 0-1.5h10.94l-1.72-1.72a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
</svg>
</button>
<button
type="button"
className="hidden xl:flex ml-[20px] rounded bg-color-tomato px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:outline-none focus:ring-0 active:shadow-dark-2 motion-reduce:transition-none dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
>
{t('header.register')}
</button>
<button
type="button"
className="hidden xl:flex ml-[20px] rounded bg-color-tomato px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-neutral-50 shadow-dark-3 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:outline-none focus:ring-0 active:shadow-dark-2 motion-reduce:transition-none dark:hover:shadow-dark-strong dark:active:shadow-dark-strong"
>
{t('header.log-in')}
</button>
</div>
</div>
</header>
<div className="h-[5px] bg-color-tomato"></div>
</>
);
};
export default Header;
" `
``
I tried to add taildwind css styles as border-none and it doesn’t work, it’s like the border is from the taildwind css material.
New contributor
Revolumax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.