Javascript 是否可以使用html css和jquery创建一个包含多个列（如mega菜单）的下拉列表，而不使用任何插件？

我必须创建一个包含两列的下拉列表，就像我单击下拉菜单时应该显示的图像一样。它应该显示为这样。到目前为止，我没有成功！。这是我正在使用的示例代码。。如果我执行这段代码，它就不是我所期望的，而且我对编码也是新手

$（文档）.ready（函数（）{
//导航切换带滑轨的单键单击
$（“.clickSlide”）.hide（）；
$（“.clickSlide”）。单击（函数（）{
$（此）.children（“ul”）.stop（真，真）。slideToggle（“fast”），
$（this.toggleClass（“下拉激活”）；
});
//导航切换带淡入的单键单击
$（“.clickFade ul”）.hide（）；
$（“.clickFade”）。单击（函数（）{
$（此）.children（“ul”）.stop（真，真）。fadeToggle（“fast”），
$（this.toggleClass（“下拉激活”）；
});
//导航切换打开带滑动的悬停
$（“.hoverSlide”）.hide（）；
$（“.hoverSlide”）.hover（函数（）{
$（此）.children（“ul”）.stop（真，真）。slideToggle（“fast”），
$（this.toggleClass（“下拉激活”）；
});
//导航切换开启带淡入的悬停
$（“.hoverFade ul”）.hide（）；
$（“.hoverFade”）.hover（函数（）{
$（此）.children（“ul”）.stop（真，真）。fadeToggle（“fast”），
$（this.toggleClass（“下拉激活”）；
});
});
/**/
#导航栏{
宽度：100%；
填充：10；
}
#下拉列表1{
宽度：960px；
保证金：0自动；
填充：0；
高度：1米；
字体大小：粗体；
}
#下降1里{
列表样式：无；
浮动：左；
}
#下拉列表1 li a{
填充：0px 0px 0px 5px；
文字装饰：无；
}
#下拉列表1 li ul{
显示：无；
背景色：#fff；
}
#下拉列表1 li：悬停ul，
#navbar li.hover ul{
显示：块；
位置：绝对位置；
保证金：0；
填充：0；
}
#下拉列表1 li：悬停li，
#导航栏李，悬停李{
浮动：左；
}
#下拉列表1 li：悬停li a，
#导航栏李。悬停李a{
背景色：#fff；
颜色：#000；
}
.topnav a{
颜色：#000；
文字装饰：无；
}
.topnav a:悬停{
边框底部：1px纯金；
}
.栏目{
显示：内联块；
列表样式类型：无；
浮动：左；
保证金：5px0；
填充：0 5px 0 0；
宽度：500px！重要；
}
李先生{
浮动：左；
显示：内联；
}
.a栏{
颜色：#999；
文字装饰：无；
字体大小：.7em；
}
.a列：悬停{
边框底部：0px；
}














如果我理解正确

也许有帮助

看起来你使用了两个div，但是有相同的类名，然后你的css只设置了“column”

所以两个div将显示在相同的位置，这就是为什么有两个div，但只显示一个

<div class="navbar">
<ul id=dropdown1> 

   <li class="topnav">
     <div class="column">
    <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
        <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>

    </div>
       <div class="column2">
       <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>
        </div>
</ul>

\表示换行符、字符U+000A和空白：预先告知浏览器在渲染时将其视为换行符

在这里找到答案
如果我理解正确

也许有帮助

看起来你使用了两个div，但是有相同的类名，然后你的css只设置了“column”

所以两个div将显示在相同的位置，这就是为什么有两个div，但只显示一个

<div class="navbar">
<ul id=dropdown1> 

   <li class="topnav">
     <div class="column">
    <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
        <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>

    </div>
       <div class="column2">
       <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>
        </div>
</ul>

\表示换行符、字符U+000A和空白：预先告知浏览器在渲染时将其视为换行符

在这里找到答案


我根据您的图片开发了下拉列表，没有使用任何
插件


我正在使用：

HTML
CSS



解释：


我正在使用
table
标记设计多个列。


//对于左列链接
//对于右列链接



然后在
标签内，我正在使用
标签。在
内部，您可以有多个链接。

类似地，我也为右侧栏做了

完整代码


CSS代码



.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
.链接格式{
列表样式类型：无；
宽度：100px
}



HTML代码



具有多列的下拉菜单
将鼠标移到按钮上可打开下拉菜单

下拉列表















工作JSFIDLE：
https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/


希望这有帮助。

请向我寻求更多信息/帮助

谢谢。


我根据您的图片开发了下拉列表，没有使用任何
插件


我正在使用：

HTML
CSS



解释：


我正在使用
table
标记设计多个列。


//对于左列链接
//对于右列链接



然后在
标签内，我正在使用
标签。内部
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
.link-format {
list-style-type:none; 
width:100px
}
</style>

<body>

<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <table>
    <tr>
    <td>
        <ul class="link-format" style="border-right:1px gray dashed">
            <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></li>
        </ul>
    </td>
    <td>
        <ul class="link-format">
            <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></li>
        </ul>
    </td>
    </tr>
    </table>

    </div>
  </div>
</div>
</body>