JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="menu">
<li id="Hln_4509" class="dropdown">
<a class="dropdown-toggle">Mainbody-title01</a>
<ul class="dropdown-menu">
<li>
<a>沿革</a>
</li>
<li>
<a>歷史</a>
</li>
</ul>
</li>
<li id="Hln_4510" class="dropdown">
<a class="dropdown-toggle">Mainbody-title01</a>
<ul class="dropdown-menu">
<li>
<a>沿革</a>
</li>
<li>
<a>歷史</a>
</li>
</ul>
</li>
</ul>
CSS
ul{list-style:none;}
.dropdown ul{
display:none;
}
@media screen and (max-width:481px){
.menu >li{
border:1px #cccccc solid;
width: 100% !important;
height:auto !important;
float:left;
}
.dropdown-menu>li{
float:left;
border:1px #cccccc solid;
width: 100% !important;
height:50px;
}
}
@media screen and (max-width:1024px){
.dropdown-menu{
margin-left:-40px;
}
.dropdown-menu>li{
display:inline-block;
border:1px #cccccc solid;
width:66px;
height:50px;
}
.menu >li{
border:1px #cccccc solid;
width: 160px;
height:49px;
float:left;
}
.menu> li> a{
border:1px #cccccc solid;
width: 160px;
height:49px;
float:left;
}
}
JavaScript
$(document).ready(function() {
$('.dropdown').hover(function(e) {
$(this).find('ul').stop().slideToggle();
});
// 當瀏覽器有被 resize 時
$(window).resize(function() {
var dropdownToggle = $('.dropdown-toggle');
var dropdownMenu = $('.dropdown-menu').find('a');
if ($(window).width() > 481) {
$('.dropdown-toggle').css('cssText', 'width:160px');
dropdownToggle.css("background-image", "url(http://web.ee.nsysu.edu.tw/ezfiles/89/1089/img/1700/m01_3.png)");
dropdownToggle.text("");
dropdownMenu.text("");
dropdownMenu.prepend('<img id="theImg" src="http://web.ee.nsysu.edu.tw/ezfiles/89/1089/img/1700/e1.png" />');
} else {
var bg_width = $(window).width() -3;
$('.dropdown-toggle').css('cssText', 'width:' + bg_width + 'px !important;');
dropdownToggle.css("background-image", "none");
dropdownToggle.text("Mainbody-title01");
dropdownMenu.find("img").remove();
dropdownMenu.each(function(i) {
if (i % 2 === 0) {
$(this).text("沿革");
} else if (i % 2 === 1) {
$(this).text("歷史");
}
});
}
});
});