下拉菜单中的链接无效 Bootstrap 4
Links on the dropdown menu are not working Bootstrap 4
我试图用 bootstrap 制作一个大型菜单。我使用下拉菜单的代码，并对代码进行了一些更改，但是只有在新选项卡中打开 link 时，下拉菜单中的 link 才起作用。否则，当我按下 link 时，它会关闭下拉菜单。我认为 class 或 js 可能有问题，但我不确定。
#logo{
position: relative;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
#navbar{
position: -webkit-sticky;
padding-bottom: 10px;
padding-top: 10px;
z-index: 100;
background-color: #282b2e!important;
margin-bottom: 0px;
border-radius: 0px;
}
body {
margin: 0;
}
#megamenu{
padding: 30px;
}
#navlink{
margin-left: 15px;
margin-right: 15px;
color: #bfbfbf;
font-size: 16px;
}
#megamenucol{
align-self: baseline;
}
#navlink{
color: #bfbfbf;
}
#navlink:focus, #navlink:hover {
color: rgb(211, 152, 48);
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #d39830;
height: 4px;
-webkit-transition-property: left,right;
transition-property: left,right;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#megamenu {
position: absolute;
background: #54595f;
border-radius: 0px;
margin-top: 0px;
}
#h6{
color: #bfbfbf;
font-size: 14px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #d39830;
}
#dropdownitem {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #bfbfbf;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 14px;
}
#dropdownitem:focus, #dropdownitem:hover {
color: #d39830;
text-decoration: none;
background-color: #f8f9fa00;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" integrity="sha256-c+C87jupO1otD1I5uyxV68WmSLCqtIoNlcHLXtzLCT0=" crossorigin="anonymous" />
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" id="logo" href="https://www.dimtiles.gr/"><img src="https://www.dimtiles.gr/wp-content/uploads/2019/05/logo.png" width="90" height="90" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1,#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav1">
<ul class="navbar-nav ">
<li class="nav-item ">
<a id="navlink" class="nav-link hvr-underline-from-center " href="https://www.dimtiles.gr/">Αρχική</a>
</li>
<!----------------- MEGA MENU DAPEDO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Δάπεδο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Δαπέδου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-33-x-33/">33X33</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-45%cf%8745/">45X45</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-50%cf%8750/">50X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-60/">60X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-80%cf%8780/">80X80</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-120/">60X120</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%ce%bc%ce%b5%ce%b3%ce%b1%ce%bb%ce%b5%cf%83-%ce%b4%ce%b9%ce%b1%cf%83%cf%84%ce%b1%cf%83%ce%b5%ce%b9%cf%83/">120X240</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8760/">15X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8790/">15X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%cf%84-%ce%be%cf%85%ce%bb%ce%bf%cf%85-20%cf%87120/">20X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Παραδοσιακά</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%b1%cf%81%ce%b1%ce%b4%ce%bf%cf%83%ce%b9%ce%b1%ce%ba%ce%b1/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Επενδύσεις</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b5%cf%80%ce%b5%ce%bd%ce%b4%cf%85%cf%83%ce%b7/">Όλα τα προϊόντα</a>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Μπάνιο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
<div class="container">
<div class="row ">
<h6 id="h6">Πλακάκια Μπάνιου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-20%cf%8720/">20X20</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8750/">20X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8760/">20X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8750/">25X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8775/">25X75</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8790/">30X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-33%cf%8755/">33X55</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-40%cf%87120/">40X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (END) ----------->
</ul>
</div>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav2">
<ul class="navbar-nav ">
<!----------------- MEGA MENU KOYZINA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Κουζίνα</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton3">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Κουζίνας</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%ba%ce%bf%cf%85%ce%b6%ce%b9%ce%bd%ce%b1%cf%83/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Ψηφίδες</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU KOYZINA (END) ----------->
<!----------------- EIDIKA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Ειδικά</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton4">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Δάπεδο</h6>
<hr class="solid">
<a id="dropdownitem"class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#da">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Μπάνιο</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#to">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Κουζίνα</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Ψηφίδες</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#woo">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU EIDIKA (END) ----------->
<li class="nav-item">
<a class="nav-link hvr-underline-from-center" href="#">Επικοινωνία</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
下拉列表仅在 href 中有 # 时有效
我试图用 bootstrap 制作一个大型菜单。我使用下拉菜单的代码，并对代码进行了一些更改，但是只有在新选项卡中打开 link 时，下拉菜单中的 link 才起作用。否则，当我按下 link 时，它会关闭下拉菜单。我认为 class 或 js 可能有问题，但我不确定。
#logo{
position: relative;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
#navbar{
position: -webkit-sticky;
padding-bottom: 10px;
padding-top: 10px;
z-index: 100;
background-color: #282b2e!important;
margin-bottom: 0px;
border-radius: 0px;
}
body {
margin: 0;
}
#megamenu{
padding: 30px;
}
#navlink{
margin-left: 15px;
margin-right: 15px;
color: #bfbfbf;
font-size: 16px;
}
#megamenucol{
align-self: baseline;
}
#navlink{
color: #bfbfbf;
}
#navlink:focus, #navlink:hover {
color: rgb(211, 152, 48);
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #d39830;
height: 4px;
-webkit-transition-property: left,right;
transition-property: left,right;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#megamenu {
position: absolute;
background: #54595f;
border-radius: 0px;
margin-top: 0px;
}
#h6{
color: #bfbfbf;
font-size: 14px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #d39830;
}
#dropdownitem {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #bfbfbf;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 14px;
}
#dropdownitem:focus, #dropdownitem:hover {
color: #d39830;
text-decoration: none;
background-color: #f8f9fa00;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" integrity="sha256-c+C87jupO1otD1I5uyxV68WmSLCqtIoNlcHLXtzLCT0=" crossorigin="anonymous" />
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" id="logo" href="https://www.dimtiles.gr/"><img src="https://www.dimtiles.gr/wp-content/uploads/2019/05/logo.png" width="90" height="90" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1,#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav1">
<ul class="navbar-nav ">
<li class="nav-item ">
<a id="navlink" class="nav-link hvr-underline-from-center " href="https://www.dimtiles.gr/">Αρχική</a>
</li>
<!----------------- MEGA MENU DAPEDO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Δάπεδο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Δαπέδου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-33-x-33/">33X33</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-45%cf%8745/">45X45</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-50%cf%8750/">50X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-60/">60X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-80%cf%8780/">80X80</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-120/">60X120</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%ce%bc%ce%b5%ce%b3%ce%b1%ce%bb%ce%b5%cf%83-%ce%b4%ce%b9%ce%b1%cf%83%cf%84%ce%b1%cf%83%ce%b5%ce%b9%cf%83/">120X240</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8760/">15X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8790/">15X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%cf%84-%ce%be%cf%85%ce%bb%ce%bf%cf%85-20%cf%87120/">20X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Παραδοσιακά</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%b1%cf%81%ce%b1%ce%b4%ce%bf%cf%83%ce%b9%ce%b1%ce%ba%ce%b1/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Επενδύσεις</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b5%cf%80%ce%b5%ce%bd%ce%b4%cf%85%cf%83%ce%b7/">Όλα τα προϊόντα</a>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Μπάνιο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
<div class="container">
<div class="row ">
<h6 id="h6">Πλακάκια Μπάνιου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-20%cf%8720/">20X20</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8750/">20X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8760/">20X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8750/">25X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8775/">25X75</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8790/">30X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-33%cf%8755/">33X55</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-40%cf%87120/">40X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (END) ----------->
</ul>
</div>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav2">
<ul class="navbar-nav ">
<!----------------- MEGA MENU KOYZINA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Κουζίνα</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton3">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Κουζίνας</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%ba%ce%bf%cf%85%ce%b6%ce%b9%ce%bd%ce%b1%cf%83/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Ψηφίδες</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU KOYZINA (END) ----------->
<!----------------- EIDIKA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Ειδικά</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton4">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Δάπεδο</h6>
<hr class="solid">
<a id="dropdownitem"class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#da">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Μπάνιο</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#to">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Κουζίνα</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Ψηφίδες</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#woo">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU EIDIKA (END) ----------->
<li class="nav-item">
<a class="nav-link hvr-underline-from-center" href="#">Επικοινωνία</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
下拉列表仅在 href 中有 # 时有效