我想要一个菜单子菜单使用javascript或任何其他可能的方式

我已经搜索并尝试了多种方法来实现这一点，但都没有用

我已经在下面提供了我当前的代码…请随意评论并提供任何必要的帮助

<script src="jquery.js"></script>
<div id="navigation">
<p><a href="#" id="toggle">Leave A Note</a></p>
<ul id="menu">



<li><a href="/#" class="theengineer">Artist</a><ul>
    <li><a href="#" class="Sketchbook">Sketchbook</a></li><li><a href="#" class="Music">Music</a></li><li><a href="#" class="Artwork">Artwork</a></li><li>
    <a href="#" class="Media">Media</a></li><li><a href="#" class="Words">Words</a></li></ul>
    </li>
    <li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></ul></li></div>

<!--above is the html container-->
<!--Now add javascript to control the hiding and such-->

<script>

var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';

$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();

hideMenu = function() {
    $('#navigation ul#menu').hide();
    $('#navigation').removeClass('Open');
    $('#toggle').text(showMenuText);
    }
    $('#toggle').click(function(event){
        event.stopPropogation(); event.preventDefault();
        $('#navigation ul#menu').toggle();
        $('#navigation').toggleClass('open');
        var toggleText = $('#toggle').text();

        (toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);});
        $('ul#menu > li > a').click(function(event){
            $this = $(this);
            if ($this.hasClass('page') ) parent.location = $this.attr('href');
            if ($this.hasClass('home') ) { parent.location = '/'; }

            event.preventDefault(); event.stopPropagation();
            if( $this.hasClass('active') ) var justclosed = true;
            $('a.active').removeClass('active').next('ul').hide();
            if(!justclosed) $this.addClass('active').next('ul').show();
            });
            </script> 

var showMenuText=$（'#toggle'）.text（）；
var hideMenuText='Close'；
$（'#导航ul'）.hide（）；
$（'#导航ul a.active+ul'）.show（）；
hideMenu=函数（）{
$（“#导航ul#菜单”）.hide（）；
$（“#导航”）.removeClass（'Open'）；
$（“#切换”）.text（showMenuText）；
}
$（“#切换”）。单击（函数（事件）{
event.stopPropogation（）；event.preventDefault（）；
$（“#导航ul#菜单”）.toggle（）；
$（“#导航”）.toggleClass（'open'）；
var toggleText=$（'#toggle'）.text（）；
（toggleText==showMenuText）？$（this.text（hideMenuText）：$（this.text（showMenuText）；}）；
$（'ul#menu>li>a'）。单击（函数（事件）{
$this=$（this）；
if（$this.hasClass（'page'））parent.location=$this.attr（'href'）；
if（$this.hasClass（'home'）{parent.location='/'；}
event.preventDefault（）；event.stopPropagation（）；
if（$this.hasClass（'active'））var justclosed=true；
$（'a.active'）.removeClass（'active'）.next（'ul'）.hide（）；
如果（！justclosed）$this.addClass（'active'）.next（'ul'）.show（）；
});

这里

---

javascript并没有像我所期望的那样…因为无序列表仍然显示为一个列表，并且没有隐藏…任何建议都将不胜感激

您在这一行缺少一个结束li:

<li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></ul></li></div>

这应该是

<li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></li></ul></li></div>

---

这可能是导致javascript问题的原因。

下拉菜单可以由纯CSS通过

相对

和

绝对

元素来完成。 考虑下面的HTML：

<ul>
    <li>Level 1</li>
    <li>
        Level 2
        <ul>
            <li>Level 2-1</li>
            <li>Level 2-2</li>
            <li>Level 2-3</li>
            <li>Level 2-4</li>
            <li>Level 2-5</li>
        </ul>
    </li>
    <li>Level 3</li>
    <li>Level 4</li>
    <li>Level 5</li>
</ul>

---

垂直的

---

你可以尝试使用一个基于jquery的奇妙的菜单插件，而不是像这样重新发明轮子。类似于或？@SpYk3HH very nice:）有没有一种方法可以使子菜单水平，而不是默认的垂直显示？这不起作用spyk3hh…是否有原因或我做错了什么…我复制了您在jquery网站上显示的代码…我相信Li应该保持打开状态…因为该行指示子菜单要跟随的父菜单。。。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul ul {
    position: absolute;
    top: 20px;
    left: -1px;
    display: none;
}

ul ul li + li {
    margin-left: 0;
    margin-top: -1px;
}

ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: blue;
    border: 1px solid blue;
    width: 150px;
    float: left;
    text-align: center;
    cursor: pointer;
    height: 20px;
}

ul li + li {
    margin-left: -1px;
}

ul li:hover {
    background: #b0e0e6;
}

ul li:hover ul {
    display: block;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul ul {
    position: absolute;
    top: -1px;
    left: 150px;
    display: none;
}



ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: blue;
    border: 1px solid #4169e1;
    width: 150px;
    text-align: center;
    cursor: pointer;
    height: 20px;
}

ul li + li {
    margin-top: -1px;
}

ul li:hover {
    background: #b0e0e6;
}

ul li:hover ul {
    display: block;
}