【发布时间】：2018-06-05 06:52:42
【问题描述】：
$(document).ready(function () {
$("ul.dropdown li").hover(function()
{
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
})
$(document).on('click', 'ul#soleSubMenu li a', function () {
$('span#sole').text($(this).attr('data-sole'));
$('ul#soleSubMenu li a').removeClass('active');
$(this).addClass('active');
});
$(document).on('click', 'ul#dualTF li a', function () {
$('span#dual').text($(this).attr('data-dual'));
$('ul#dualTF li a').removeClass('active');
$(this).addClass('active');
});
$(document).on('click', 'ul#friendZN li a', function () {
$('span#fz').text($(this).attr('data-fz'));
$('ul#friendZN li a').removeClass('active');
$(this).addClass('active');
});ul.dropdown {
list-style: none;
position: relative;
padding: 0px 0 10px 0;
}
ul.dropdown li {
float: left;
margin: 0px 10px 7px 0;
}
ul.dropdown li a {
display: block;
font-size: 11px;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
list-style: none;
}
ul.dropdown ul li {
font-weight: normal;
float: left;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
display: inline-block;
}
ul.subMenu li a {text-algin: left;}
ul.subMenu li a.active { display:none }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
<ul class="dropdown">
<li><a href="#">Sole: <span id="sole">Me</span></a>
<ul class="subMenu" id="soleSubMenu">
<li><a href="#" data-sole="Me">Me</a></li>
<li><a href="#" data-sole="Mine" class="active">Mine</a></li>
</ul>
</li>
<li><a href="#">Dual: <span id="dual">Yours</span></a>
<ul class="subMenu" id="dualTF">
<li><a href="#" data-dual="Yours" class="active">Yours</a></li>
<li><a href="#" data-dual="Ours">Ours</a></li>
</ul>
</li>
<li><a href="#">Friendzone: <span id="fz">New York</span></a>
<ul class="subMenu" id="friendZN">
<li><a href="#" data-fz="New York" class="active">New York</a></li>
<li><a href="#" data-fz="London">London</a></li>
<li><a href="#" data-fz="Singapore">Singapore</a></li>
<li><a href="#" data-fz="Cannes">Cannes</a></li>
</ul>
</li>
</ul>祝大家节日快乐！
所以我有一个包含 1 到 4 个子菜单项的三个主题菜单。这只是使用无序列表和列表项的文本菜单。我有两个问题。
子菜单项定位未在父项下排列，如果有超过 1 个子菜单项，则其他项未在第一个子菜单项下排列。
如果较长的菜单项下方有内容，则它只会流过顶部并且文本变得难以辨认。因此，要么我需要一个白色背景，要么我需要一个白色背景，比如指向父菜单项的箭头，以便将其封装或将其下方的内容向下推。
这是我的 CSS：
ul.dropdown { 列表样式：无； 位置：相对； 填充：0px 0 10px 0； } ul.dropdown li { 向左飘浮; 边距：0px 10px 7px 0； } ul.dropdown li a { 显示：块； 字体大小：11px； } ul.dropdown li.hover, ul.dropdown li:hover { 位置：相对； } ul.dropdown ul { 可见性：隐藏； 位置：绝对； 列表样式：无； } ul.dropdown ul li { 字体粗细：正常； 向左飘浮; } /* IE 6 & 7 需要内联块 */ ul.dropdown ul li a { 显示：内联块； } ul.subMenu li a {text-algin: left;} ul.subMenu li a.active { display:none }这是我的 HTML：
<div>
<ul class="dropdown">
<li><a href="#">Sole: <span id="sole">Me</span></a>
<ul class="subMenu" id="soleSubMenu">
<li><a href="#" data-sole="Me">Me</a></li>
<li><a href="#" data-sole="Mine" class="active">Mine</a></li>
</ul>
</li>
<li><a href="#">Dual: <span id="dual">Yours</span></a>
<ul class="subMenu" id="dualTF">
<li><a href="#" data-dual="Yours" class="active">Yours</a></li>
<li><a href="#" data-dual="Ours">Ours</a></li>
</ul>
</li>
<li><a href="#">Friendzone: <span id="fz">New York</span></a>
<ul class="subMenu" id="friendZN">
<li><a href="#" data-fz="New York" class="active">New York</a></li>
<li><a href="#" data-fz="London">London</a></li>
<li><a href="#" data-fz="Singapore">Singapore</a></li>
<li><a href="#" data-fz="Cannes">Cannes</a></li>
</ul>
</li>
</ul>
</div>
这是我的 JS：
$(document).ready(function () {
$("ul.dropdown li").hover(function()
{
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
})
$(document).on('click', 'ul#soleSubMenu li a', function () {
$('span#sole').text($(this).attr('data-sole'));
$('ul#soleSubMenu li a').removeClass('active');
$(this).addClass('active');
});
$(document).on('click', 'ul#dualTF li a', function () {
$('span#dual').text($(this).attr('data-dual'));
$('ul#dualTF li a').removeClass('active');
$(this).addClass('active');
});
$(document).on('click', 'ul#friendZN li a', function () {
$('span#fz').text($(this).attr('data-fz'));
$('ul#friendZN li a').removeClass('active');
$(this).addClass('active');
});
为了完整起见，我将 JS 包括在内，因为我觉得这可能是一个纯 CSS 问题。 任何帮助将不胜感激:)
【问题讨论】：