- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站有一个下拉菜单,我注意到只有单词本身是可点击的,而不是单词(链接)所在的整个框。
我已经添加了 display: block;到 a 元素,但这似乎只能水平工作,仍然不是整个盒子。
希望你能帮帮我!提前谢谢你!
这是de css代码:
#dropdownmenu a {
color:inherit !important;
display:block;
text-decoration:none !important}
#dropdownmenu {
width:1050px;
background:#137cd7;
z-index:2;
position:relative }
#dropdownmenu ul {
text-align:left;
display:inline;
margin:0px;
padding:10px 4px 25px 0;
list-style:none }
#dropdownmenu ul li {
display:inline-block;
margin-right:10px;
position:relative;
padding:15px 15px 14px;
cursor:pointer;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;
color:#fff }
#dropdownmenu ul li:hover {
background-color:#ffffff;
color:#137cd7 }
@media screen and (-webkit-min-device-pixel-ratio:0)
#dropdownmenu ul li ul {
top:44px !important}
#dropdownmenu ul li ul {
padding:0px;
position:absolute;
top:47px;
left:0px;
width:170px;
display:none;
opacity:0;
visibility:hidden;
-webkit-transiton:opacity 0.2s;
-moz-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
-transition:opacity 0.2s }
#dropdownmenu ul li ul li {
background-color:#fff;
display:block;
color:#222;
border-left:1px solid #ccc;
border-right:1px solid #ccc;}
#dropdownmenu ul li ul li:hover {
color:#137cd7;
background:#222;
text-decoration:none !important }
#dropdownmenu ul li:hover ul {
display:block;
opacity:1;
visibility:visible;
border-bottom:1px solid #ccc; }
和 HTML:
<div id="dropdownmenu">
<ul>
<li>
<a href="/">Home</a></li>
<li>
<a href="/">Menu 1</a>
<ul>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
</ul>
</li>
<li>
<a href="/">Menu 2</a>
<ul>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
</ul>
</li>
<li>
<a href="/contact">Contact</a>
<ul>
<li>
<a href="/contact"><img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></a></li>
<li>
</li>
</ul>
</li>
</ul>
谢谢大家!
谢谢您的回答!这对我帮助很大!现在一切都很好!
最佳答案
在下图中,您可以看到下拉菜单的 anchor 为蓝色,li padding 为绿色。当您点击绿色区域时,浏览器不会跟随 anchor ,这是正常行为。
要纠正这个问题,请移除 li 填充,并将其应用于 anchor 。由于 anchor 是内联元素,您必须将它们显示为 block 以应用填充。
#dropdownmenu a {
padding:15px 15px 14px;
display: block;
}
我也做了一些CSS改进,你可以看看updated Fiddle
关于html - 下拉菜单 : Only words clickable not whole box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24329050/
我有这个应用程序,在注册屏幕上的复选框旁边应该是一个句子:我同意公司服务条款。 服务条款部分应该是可点击的,以便用户能够进入 ToS 屏幕(尽管用户永远不会这样做)。 问题是,这个应用程序将是多语言的
我创建了一个这样的 if 语句: if (lehrling == null) { ClientScript.RegisterStartupScript(this.GetType(), "ale
我正在创建一个站点,您可以在其中单击一个按钮,然后会显示一个小面板。 (就像 facebook 上的通知/消息面板) 该功能运行良好,但当面板隐藏时,您仍然可以将链接悬停在它们应该位于的位置,当它们可
我想让“搜索”按钮在点击回车后可点击。 这是我的 html: 这是我正在使用的 JavaScript: function searchKeyPress(e) { if (typeof e ==
我有一个WP7应用,我想在其中有一个“可单击的” TextBlock区域,当用户单击TextBlock时,它将置于编辑模式(另一个控件)。 这将在编辑文本之前为用户添加另一个明确的步骤。 TextBl
我创建了一个名为 ClickableRow 的类,它突出显示该行并更改其中所有 TextViews 的文本颜色,然后将该行返回到其初始设置当用户停止点击或滚动太远之后,但我觉得 android 可能已
在开发 Android 应用程序时,我有一个带有一些按钮的 Activity 。我希望 onClickListener 操作在用户立即将手指放在屏幕上时启动,这样他就不能同时单击两个按钮。 我在 iO
http://speedsociety.com/ 如果您查看我的网站,左侧边栏下方的 instagram 小部件都不可点击(在第一个之后)...是不是 content_wrapper div 阻止了它
如果你有一个正常的形式: 然后您可以填写输入字段,然后按回车键。但是,我正在使用链接来完成我的工作: Submit 这就像一个魅力,但是,我希望它继承普通提交字段具有的“可单击输入”。这
我正在创建一个可点击 div 列表,以显示一个弹出窗口,其中包含与所点击项目相关的信息。 每个列表项都假设列表最后一项的“单击”功能。当我删除最后一项时,它们都假定新的最后一项的“单击”功能。 (例如
我正在使用来自 Google 基于 HTML5 的网络应用程序 here 的翻页演示(教程 here 和演示 20 Things I Learned about Browsers and the We
这无疑是一个愚蠢的错误,但我正在疯狂地寻找它。在下面的日历代码中,如果有事件则链接和今天的链接不可点击。 请注意,我已将超链接替换为 www.google.com。在实际应用中它指向日历的每日 Vie
我想改变这个: Moo 要符合标准(你不应该在内联元素中有 block 元素)。将 javascript 连接到 div 仅用于导航似乎是一种 hack 并且会降低可访问性。在这种情况
Fiddle . 如果您将鼠标悬停在“CLOSE”和三 Angular 形的 :after 元素之间,则您无法单击该链接。 有没有一种方法可以使该区域可点击并且看起来仍然一样? HTML: Cl
我有一个不透明度为 0 的菜单 div,可见性最初是隐藏的。我基本上希望这个 div 在单击另一个 div 时可用(它是一个粘贴在我页面顶部的菜单,可通过单击发现/隐藏)。 效果很好....一次性..
我正在开发一个图片 uploader 。我有一个使用 https://codecanyon.net/item/slim-image-upload-and-ratio-cropping-plugin/1
有没有可能制作一个可点击并相应地触发一个 Action ? 这就是我的代码的样子,我也希望能够点击子菜单。
我们什么时候应该在 XML 中使用 android:clickable?我们应该永远吗? 这样的 XML 声明和代码内声明 myButton.setOnClickListener 之间有什么区别吗?我
我只是想这可能有用,但我找不到办法。 在 Notepad++ 中,有没有办法让函数名称“可点击”——即让它们成为链接,这样如果你点击它们,它会自动将你带到它的定义(最好是跨越整个代码库)? 最佳答案
我正在尝试在网站上选择付款方式。我有三个选择:SEPA、信用卡/借记卡、PayPal。我想点击贷方/借方。 It looks like this 这些选择在一个主 div 中,每个选择都在另一个包含输
我是一名优秀的程序员,十分优秀!