0
我已经建造使用CSS三级下拉菜单。它的工作原理，直到我添加此的CSS：CSS下拉菜单的第三级没有出现在两列格式
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
的HTML基本上只有两个无序列表（顺便说一句，在“感情”列表和“需求”列表中有相同的内容 - 这将改变最终 - 这仅仅是试验）：
<div class="feelings">
<ul class="nav feelings">
<li class="feelings" id="feelings"> FEELINGS
<ul>
<li><a href="#">AFRAID</a>
<ul>
<li><a href="#">apprehensive</a></li>
<li><a href="#">dread</a></li>
<li><a href="#">foreboding</a></li>
<li><a href="#">frightened</a></li>
<li><a href="#">mistrustful</a></li>
<li><a href="#">panicked</a></li>
<li><a href="#">petrified</a></li>
<li><a href="#">scared</a></li>
<li><a href="#">suspicious</a></li>
<li><a href="#">terrified</a></li>
<li><a href="#">wary</a></li>
<li><a href="#">worried</a></li>
</ul>
</li>
<li><a href="#">ANNOYED</a>
<ul>
<li><a href="#">aggravated</a></li>
<li><a href="#">dismayed</a></li>
<li><a href="#">disgruntled</a></li>
<li><a href="#">displeased</a></li>
<li><a href="#">exasperated</a></li>
<li><a href="#">frustrated</a></li>
<li><a href="#">impatient</a></li>
<li><a href="#">irritated</a></li>
<li><a href="#">irked</a></li>
</ul>
</li>
<li><a href="#">ANGRY</a>
<ul>
<li><a href="#">enraged</a></li>
<li><a href="#">furious</a></li>
<li><a href="#">incensed</a></li>
<li><a href="#">indignant</a></li>
<li><a href="#">irate</a></li>
<li><a href="#">livid</a></li>
<li><a href="#">outraged</a></li>
<li><a href="#">resentful</a></li>
</ul>
</li>
<li><a href="#">AVERSION</a>
<ul>
<li><a href="#">animosity</a></li>
<li><a href="#">appalled</a></li>
<li><a href="#">contempt</a></li>
<li><a href="#">disgusted</a></li>
<li><a href="#">dislike</a></li>
<li><a href="#">hate</a></li>
<li><a href="#">horrified</a></li>
<li><a href="#">hostile</a></li>
<li><a href="#">repulsed</a></li>
</ul>
</li>
<li><a href="#">CONFUSED</a>
<ul>
<li><a href="#">ambivalent</a></li>
<li><a href="#">baffled</a></li>
<li><a href="#">bewildered</a></li>
<li><a href="#">dazed</a></li>
<li><a href="#">hesitant</a></li>
<li><a href="#">lost</a></li>
<li><a href="#">mystified</a></li>
<li><a href="#">perplexed</a></li>
<li><a href="#">puzzled</a></li>
<li><a href="#">torn</a></li>
</ul>
</li>
<li><a href="#">DISCONNECTED</a>
<ul>
<li><a href="#">alienated</a></li>
<li><a href="#">aloof</a></li>
<li><a href="#">apathetic</a></li>
<li><a href="#">bored</a></li>
<li><a href="#">cold</a></li>
<li><a href="#">detached</a></li>
<li><a href="#">distant</a></li>
<li><a href="#">distracted</a></li>
<li><a href="#">indifferent</a></li>
<li><a href="#">numb</a></li>
<li><a href="#">removed</a></li>
<li><a href="#">uninterested</a></li>
<li><a href="#">withdrawn</a></li>
</ul>
</li>
<li><a href="#">DISQUIET</a>
<ul>
<li><a href="#">agitated</a></li>
<li><a href="#">alarmed</a></li>
<li><a href="#">discombobulated</a></li>
<li><a href="#">disconcerted</a></li>
<li><a href="#">disturbed</a></li>
<li><a href="#">perturbed</a></li>
<li><a href="#">rattled</a></li>
<li><a href="#">restless</a></li>
<li><a href="#">shocked</a></li>
<li><a href="#">startled</a></li>
<li><a href="#">surprised</a></li>
<li><a href="#">troubled</a></li>
<li><a href="#">turbulent</a></li>
<li><a href="#">turmoil</a></li>
<li><a href="#">uncomfortable</a></li>
<li><a href="#">uneasy</a></li>
<li><a href="#">unnerved</a></li>
<li><a href="#">unsettled</a></li>
<li><a href="#">upset</a></li>
</ul>
</li>
<li><a href="#">EMBARRASSED</a>
<ul>
<li><a href="#">ashamed</a></li>
<li><a href="#">chagrined</a></li>
<li><a href="#">flustered</a></li>
<li><a href="#">guilty</a></li>
<li><a href="#">mortified</a></li>
<li><a href="#">self-conscious</a></li>
</ul>
</li>
<li><a href="#">FATIGUE</a>
<ul>
<li><a href="#">beat</a></li>
<li><a href="#">burnt out</a></li>
<li><a href="#">depleted</a></li>
<li><a href="#">exhausted</a></li>
<li><a href="#">lethargic</a></li>
<li><a href="#">listless</a></li>
<li><a href="#">sleepy</a></li>
<li><a href="#">tired</a></li>
<li><a href="#">weary</a></li>
<li><a href="#">worn out</a></li>
</ul>
</li>
<li><a href="#">PAIN</a>
<ul>
<li><a href="#">agony</a></li>
<li><a href="#">anguished</a></li>
<li><a href="#">bereaved</a></li>
<li><a href="#">devastated</a></li>
<li><a href="#">grief</a></li>
<li><a href="#">heartbroken</a></li>
<li><a href="#">hurt</a></li>
<li><a href="#">lonely</a></li>
<li><a href="#">miserable</a></li>
<li><a href="#">regretful</a></li>
<li><a href="#">remorseful</a></li>
</ul>
</li>
<li><a href="#">SAD</a>
<ul>
<li><a href="#">depressed</a></li>
<li><a href="#">dejected</a></li>
<li><a href="#">despair</a></li>
<li><a href="#">despondent</a></li>
<li><a href="#">disappointed</a></li>
<li><a href="#">discouraged</a></li>
<li><a href="#">disheartened</a></li>
<li><a href="#">forlorn</a></li>
<li><a href="#">gloomy</a></li>
<li><a href="#">heavy hearted</a></li>
<li><a href="#">hopeless</a></li>
<li><a href="#">melancholy</a></li>
<li><a href="#">unhappy</a></li>
<li><a href="#">wretched</a></li>
</ul>
</li>
<li><a href="#">TENSE</a>
<ul>
<li><a href="#">anxious</a></li>
<li><a href="#">cranky</a></li>
<li><a href="#">distressed</a></li>
<li><a href="#">distraught</a></li>
<li><a href="#">edgy</a></li>
<li><a href="#">fidgety</a></li>
<li><a href="#">frazzled</a></li>
<li><a href="#">irritable</a></li>
<li><a href="#">jittery</a></li>
<li><a href="#">nervous</a></li>
<li><a href="#">overwhelmed</a></li>
<li><a href="#">restless</a></li>
<li><a href="#">stressed out</a></li>
</ul>
</li>
<li><a href="#">VULNERABLE</a>
<ul>
<li><a href="#">fragile</a></li>
<li><a href="#">guarded</a></li>
<li><a href="#">helpless</a></li>
<li><a href="#">insecure</a></li>
<li><a href="#">leery</a></li>
<li><a href="#">reserved</a></li>
<li><a href="#">sensitive</a></li>
<li><a href="#">shaky</a></li>
</ul>
</li>
<li><a href="#">YEARNING</a>
<ul>
<li><a href="#">envious</a></li>
<li><a href="#">jealous</a></li>
<li><a href="#">longing</a></li>
<li><a href="#">nostalgic</a></li>
<li><a href="#">pining</a></li>
<li><a href="#">wistful</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="needs">
<ul class="nav needs">
<li class="feelings" id="needs"> NEEDS
<ul>
<li><a href="#">AFRAID</a>
<ul>
<li><a href="#">apprehensive</a></li>
<li><a href="#">dread</a></li>
<li><a href="#">foreboding</a></li>
<li><a href="#">frightened</a></li>
<li><a href="#">mistrustful</a></li>
<li><a href="#">panicked</a></li>
<li><a href="#">petrified</a></li>
<li><a href="#">scared</a></li>
<li><a href="#">suspicious</a></li>
<li><a href="#">terrified</a></li>
<li><a href="#">wary</a></li>
<li><a href="#">worried</a></li>
</ul>
</li>
<li><a href="#">ANNOYED</a>
<ul>
<li><a href="#">aggravated</a></li>
<li><a href="#">dismayed</a></li>
<li><a href="#">disgruntled</a></li>
<li><a href="#">displeased</a></li>
<li><a href="#">exasperated</a></li>
<li><a href="#">frustrated</a></li>
<li><a href="#">impatient</a></li>
<li><a href="#">irritated</a></li>
<li><a href="#">irked</a></li>
</ul>
</li>
<li><a href="#">ANGRY</a>
<ul>
<li><a href="#">enraged</a></li>
<li><a href="#">furious</a></li>
<li><a href="#">incensed</a></li>
<li><a href="#">indignant</a></li>
<li><a href="#">irate</a></li>
<li><a href="#">livid</a></li>
<li><a href="#">outraged</a></li>
<li><a href="#">resentful</a></li>
</ul>
</li>
<li><a href="#">AVERSION</a>
<ul>
<li><a href="#">animosity</a></li>
<li><a href="#">appalled</a></li>
<li><a href="#">contempt</a></li>
<li><a href="#">disgusted</a></li>
<li><a href="#">dislike</a></li>
<li><a href="#">hate</a></li>
<li><a href="#">horrified</a></li>
<li><a href="#">hostile</a></li>
<li><a href="#">repulsed</a></li>
</ul>
</li>
<li><a href="#">CONFUSED</a>
<ul>
<li><a href="#">ambivalent</a></li>
<li><a href="#">baffled</a></li>
<li><a href="#">bewildered</a></li>
<li><a href="#">dazed</a></li>
<li><a href="#">hesitant</a></li>
<li><a href="#">lost</a></li>
<li><a href="#">mystified</a></li>
<li><a href="#">perplexed</a></li>
<li><a href="#">puzzled</a></li>
<li><a href="#">torn</a></li>
</ul>
</li>
<li><a href="#">DISCONNECTED</a>
<ul>
<li><a href="#">alienated</a></li>
<li><a href="#">aloof</a></li>
<li><a href="#">apathetic</a></li>
<li><a href="#">bored</a></li>
<li><a href="#">cold</a></li>
<li><a href="#">detached</a></li>
<li><a href="#">distant</a></li>
<li><a href="#">distracted</a></li>
<li><a href="#">indifferent</a></li>
<li><a href="#">numb</a></li>
<li><a href="#">removed</a></li>
<li><a href="#">uninterested</a></li>
<li><a href="#">withdrawn</a></li>
</ul>
</li>
<li><a href="#">DISQUIET</a>
<ul>
<li><a href="#">agitated</a></li>
<li><a href="#">alarmed</a></li>
<li><a href="#">discombobulated</a></li>
<li><a href="#">disconcerted</a></li>
<li><a href="#">disturbed</a></li>
<li><a href="#">perturbed</a></li>
<li><a href="#">rattled</a></li>
<li><a href="#">restless</a></li>
<li><a href="#">shocked</a></li>
<li><a href="#">startled</a></li>
<li><a href="#">surprised</a></li>
<li><a href="#">troubled</a></li>
<li><a href="#">turbulent</a></li>
<li><a href="#">turmoil</a></li>
<li><a href="#">uncomfortable</a></li>
<li><a href="#">uneasy</a></li>
<li><a href="#">unnerved</a></li>
<li><a href="#">unsettled</a></li>
<li><a href="#">upset</a></li>
</ul>
</li>
<li><a href="#">EMBARRASSED</a>
<ul>
<li><a href="#">ashamed</a></li>
<li><a href="#">chagrined</a></li>
<li><a href="#">flustered</a></li>
<li><a href="#">guilty</a></li>
<li><a href="#">mortified</a></li>
<li><a href="#">self-conscious</a></li>
</ul>
</li>
<li><a href="#">FATIGUE</a>
<ul>
<li><a href="#">beat</a></li>
<li><a href="#">burnt out</a></li>
<li><a href="#">depleted</a></li>
<li><a href="#">exhausted</a></li>
<li><a href="#">lethargic</a></li>
<li><a href="#">listless</a></li>
<li><a href="#">sleepy</a></li>
<li><a href="#">tired</a></li>
<li><a href="#">weary</a></li>
<li><a href="#">worn out</a></li>
</ul>
</li>
<li><a href="#">PAIN</a>
<ul>
<li><a href="#">agony</a></li>
<li><a href="#">anguished</a></li>
<li><a href="#">bereaved</a></li>
<li><a href="#">devastated</a></li>
<li><a href="#">grief</a></li>
<li><a href="#">heartbroken</a></li>
<li><a href="#">hurt</a></li>
<li><a href="#">lonely</a></li>
<li><a href="#">miserable</a></li>
<li><a href="#">regretful</a></li>
<li><a href="#">remorseful</a></li>
</ul>
</li>
<li><a href="#">SAD</a>
<ul>
<li><a href="#">depressed</a></li>
<li><a href="#">dejected</a></li>
<li><a href="#">despair</a></li>
<li><a href="#">despondent</a></li>
<li><a href="#">disappointed</a></li>
<li><a href="#">discouraged</a></li>
<li><a href="#">disheartened</a></li>
<li><a href="#">forlorn</a></li>
<li><a href="#">gloomy</a></li>
<li><a href="#">heavy hearted</a></li>
<li><a href="#">hopeless</a></li>
<li><a href="#">melancholy</a></li>
<li><a href="#">unhappy</a></li>
<li><a href="#">wretched</a></li>
</ul>
</li>
<li><a href="#">TENSE</a>
<ul>
<li><a href="#">anxious</a></li>
<li><a href="#">cranky</a></li>
<li><a href="#">distressed</a></li>
<li><a href="#">distraught</a></li>
<li><a href="#">edgy</a></li>
<li><a href="#">fidgety</a></li>
<li><a href="#">frazzled</a></li>
<li><a href="#">irritable</a></li>
<li><a href="#">jittery</a></li>
<li><a href="#">nervous</a></li>
<li><a href="#">overwhelmed</a></li>
<li><a href="#">restless</a></li>
<li><a href="#">stressed out</a></li>
</ul>
</li>
<li><a href="#">VULNERABLE</a>
<ul>
<li><a href="#">fragile</a></li>
<li><a href="#">guarded</a></li>
<li><a href="#">helpless</a></li>
<li><a href="#">insecure</a></li>
<li><a href="#">leery</a></li>
<li><a href="#">reserved</a></li>
<li><a href="#">sensitive</a></li>
<li><a href="#">shaky</a></li>
</ul>
</li>
<li><a href="#">YEARNING</a>
<ul>
<li><a href="#">envious</a></li>
<li><a href="#">jealous</a></li>
<li><a href="#">longing</a></li>
<li><a href="#">nostalgic</a></li>
<li><a href="#">pining</a></li>
<li><a href="#">wistful</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
这里是CSS：
@charset "UTF-8";
/* CSS Document */
ul ul, ul ul ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
.nav feelings needs {
padding-left: 10px;
padding-right: 10px;
width: 200px;
color:#ff0000;
background-color:#ffffff;
}
.nav{
height: 39px;
border-radius: 3px;
min-width:500px;
border:1px solid #ddd;
background-color:#ffffff;
}
.nav li, .nav li li {
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
background-color:#ffffff;
}
.nav a {
width: 200px;
overflow:hidden;
}
.nav li a{
display: block;
}
.nav ul {
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
.nav ul ul {
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
position: relative;
}
.nav ul li {
display: block;
visibility:visible;
}
.nav li:hover > ul, nav li:hover * {
display: block;
visibility:visible;
z-index:1;
}
如果我在第一时间清除CSS项目（设置菜单中的两列）的最后一级！出现菜单（即i小写字母而不是全部大写）。通过使用两列CSS，第三层不会出现。
这里是一个小提琴：
有趣的是，小提琴，第三级似乎是试图出现了一点，但它肯定不是工作，我想它喜欢的方式，这是在第二级项目右侧的垂直列中出现的第三级。
任何想法可以理解的！
/*图像下方原来的问题后加入，响应请求的图片*/
在这张照片顶部的截图显示了现在来了，当我将鼠标悬停在第一感觉，怕 - 其实它几乎是我想要的（虽然显然它需要一些美化）：两组双列下拉列表，即全部大写和全部小写中的一个。 （这基本上是与上面显示的代码，但是有一个变化，即，去除UL UL，只留下UL UL UL由user3369554建议。）但是，当我移动光标，东东开始跳遍地点;底部的屏幕截图显示了一个状态，但事情只是以非常令人不安的方式跳过所有内容。例如，我希望能够将光标移动到ANGRY位于第二列顶部的位置。但如果我尝试这样做，它会跳到别的地方。如果我去那个地方，它会跳到另一个地方。如果这两组情绪（全部大写和所有小写字母）仍然保持在顶部所示的配置中，并让我点击它们，我会很高兴。 
你并不真的需要使用'显示：none'和'知名度：hidden'。我只是使用'display：none'来隐藏和'display：block | inline | inline-block | etc'来显示。 –