个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我已经使用 HTML、CSS 和 jQuery 制作了一个菜单，但似乎效果不佳。我认为问题在于应用于所有列表项的 float:left; 样式。如何将 float 的元素包裹在一个 div 中并防止它与内容发生冲突？
我尝试将 display:block; 应用于元素，但下拉菜单乱七八糟。
$('document').ready(function() {
$('li').hover(function() {
$(this).find('ul>li').slideToggle(200);
});
});ul {
margin: 0px;
padding: 0px;
list-style: none;
z-index: 1000;
}
ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a {
text-decoration: none;
color: white;
}
ul li li {
background-color: #999999;
display: none;
z-index: 1000;
}
ul li li:hover {
background-color: #555555;
}
a {
width: 100%;
height: 100%;
display: block;
}
.test {
z-index: 1;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li>
<a href="#">kontakty</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li><a href="#">linki</a>
</li>
<li><a href="#">about</a>
</li>
</ul>
<div class="test">
finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum
</div>
</body>
</html>最佳答案
当您使用 float 时， float 元素的容器变为 0 高度，因此您必须在菜单后清除 float
ul:after {
clear: both;
content: "";
display: table;
}
所以你的代码变成了
$('document').ready(function() {
$('li').hover(function() {
$(this).find('ul>li').slideToggle(200);
});
});ul {
margin: 0px;
padding: 0px;
list-style: none;
z-index: 1000;
}
ul:after {
clear: both;
content: "";
display: table;
}
ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a {
text-decoration: none;
color: white;
}
ul li li {
background-color: #999999;
display: none;
z-index: 1000;
}
ul li li:hover {
background-color: #555555;
}
a {
width: 100%;
height: 100%;
display: block;
}
.test {
z-index: 1;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li>
<a href="#">kontakty</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li><a href="#">linki</a>
</li>
<li><a href="#">about</a>
</li>
</ul>
<div class="test">
finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum
</div>
</body>
</html>关于javascript - 下拉菜单 - 与内容碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35842199/
25
4
0
我正在用 jQuery Collision 编写这个游戏，它使用键盘按键来移动 div，当一个 div 接触另一个 div 时，它应该防止重叠。 我到底该怎么做？ HTML ----
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Java 2D Collision? 嘿，大家好，我有另一篇关于这个问题的帖子刚刚消失了，所以我想我会尝试得到一些关
嘿伙计们，我正在制作一个 2D java 游戏，我正在尝试找出如何制作一个好的碰撞代码。我目前正在使用以下代码: public void checkCollision() { Rect
我的意思是，当我与实体的侧面碰撞并想要跳跃时，我无法向右/向左移动，因为当我与右侧/左侧的实体碰撞时，我有一个标志可以防止这种情况发生，例如所以: 这是我用来检测碰撞的代码: public void
所以我正在运行 collide_mask 检查，以删除与玩家 Sprite 碰撞时的生物实例。它工作得很好。 pygame.sprite.spritecollide(player, mobs, Tru
我正在研究我的砖 block splinter 机，并制作一个适当的碰撞系统，以便使球逻辑地切换方向，我必须检测球与砖 block 的哪一侧碰撞。这是我当前的脚本: int sprite_collid
我做了一个类似颜色切换的游戏。唯一的问题是玩家与每种颜色发生碰撞...... 这是我从github上获取的代码: https://github.com/prometheon/MLNimbleNinja
测试我的游戏，当用户和怪物发生碰撞时，我希望弹出警报但没有成功: function die() { for (var i = 0; i < monster.length; i++) { i
我对 vector 很陌生，这是我第一次真正使用它们进行碰撞检查。这是我的项目，我对如何实现碰撞感到困惑。我目前的碰撞检查和响应代码似乎是……糟糕的设计。 这是我的代码: for(auto it =
我是 javascript 的新手，正在尝试找出如何与球和木板发生碰撞，这将停止游戏并提醒玩家“你输了”。但我只想让红球击中木板，让蓝球不接触地继续前进。这是我正在处理的代码。 (我不介意你是否可以帮
很抱歉提出奇怪的问题，我还是 Android 编程的新手。 我有以下代码: import android.content.DialogInterface.OnClickListener; import
我有 6 个 UIImageView，每个都连接到 UIPanGestureRecognizer，它们都连接到相同的方法。方法是: - (IBAction)handlePan:(UIPanGestur
我想根据某些对象的轴对齐边界框检查视锥体，以粗略检查这些对象是否在视野中。速度不是什么大问题。 最佳答案 我发现构建视锥体的世界空间模型并检查与它的 bbox 碰撞是错误的方法。 一个更简单的方法是以
我项目中的所有这些代码都运行良好，但我遇到了一些问题。当飞机接触到屏幕的边界时，它会在接触后开始旋转。我不知道如何让它在碰到屏幕边界时不旋转。只有在我使用时才会出现这个问题: plane.physic
在应用程序启动时，我在后台线程中删除旧的 CoreData 行，下面是我的代码。我的问题类似于城市街道问题。所以，我有两个实体，Street 和 City，我有一个关系 City > Street，因
我试图不接触穴居人和其他带有碰撞位掩码的图像，但我的穴居人击中了一切。 func addCaveManBitMasks(){ caveManNode.physicsBody?.category
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
如何在 PyGame 中找到字符和图像之间的碰撞？我已经从图像中绘制了一个玩家，并从瓷砖中绘制了墙壁，那么我如何检测这些碰撞？ 最佳答案 如果你使用pygame Rect类来表示对象的边界，您可以使用
我正在使用 ftok() 为 C 应用程序使用的共享内存段生成标识符。我有问题，在一个盒子上我与 root 使用的标识符发生冲突。在这种情况下，我可以通过破解代码来修复它，但我想要一个更强大的解决方案
这个问题在这里已经有了答案: JavaScript: Collision detection (10 个回答) 10 个月前关闭。 检测 2 个物体(墙壁)碰撞的好方法。是的，不仅仅是检测，还有进一步
我是一名优秀的程序员,十分优秀！