第三级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项目（将菜单设置为两列），则会显示菜单的最后一级（小写字母与所有大写字母相对）。使用双列CSS，第三级不会出现。
这是一个小提琴：
有趣的是，在小提琴上，第三级确实似乎试图出现一点，但它肯定不会按照我喜欢的方式工作，这是第三级出现在右侧的垂直列中第二级项目。
任何想法都将不胜感激！
/ *以下图片是在原始问题之后添加的，以回应图片请求* /
这张照片中的顶部屏幕截图显示了当我将鼠标悬停在第一感觉上时出现的情况，AFRAID - 实际上它实际上是我想要的（尽管显然它需要一些美化）：两组两列下拉菜单，即所有大写字母中的一个和所有小写字母中的一个。 （这基本上与上面显示的代码有关，但有一处更改，即删除 ul ul 只留下 ul ul ul ，如user3369554所建议的那样。）但是，当我移动光标，东西开始跳到各处;底部的屏幕截图显示了一个状态，但事情只是以一种非常令人不安的方式跳过了。例如，我希望能够将光标移动到ANGRY位于第二列顶部的位置。但是，如果我尝试这样做，它会跳到其他地方。如果我去那个地方，它会跳到另一个地方。如果两组情绪（全部大写和所有小写字母）仍然保持在顶部显示的配置中，让我点击它们，我会很高兴。
1 个答案:
答案 0 :(得分：0)
我不知道我是否理解得很好，但如果你替换，你可以在第二级的右边以2列格式获得第三级：
ul ul, ul ul ul
的
ul ul ul
那是你的追求吗？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？