个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在这方面完全是个新手，所以我希望我能弄清楚我在 http://test.lawsart.com/css3menu_2.html 上遇到的问题。 . css3menu 的人没有阅读我的问题。问题是，当您将鼠标悬停在顶级菜单项“投资组合”或三个子菜单之一并单击时，您将被发送到只有菜单的浏览器页面。在那个页面上，Portfolios 和三个子菜单标题是不可点击的，这是应该的。您会在 html 标记中看到 href 引用是“#”，我认为这是可行的。有没有办法在 html 标记或 style.css 文件中执行此操作？如果没有，我如何使用 jQuery 修复它？如果答案是查询，请非常非常具体，因为我对 jQuery 或如何实现它知之甚少。谢谢。
这是 html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="../css3menuH/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body style="background-color:#">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="http://test.lawsart.com/Home.html" style="width:48px;height:17px;line-height:17px;">Home</a></li>
<li class="topmenu"><a href="http://test.lawsart.com/About.html" style="width:62px;height:17px;line-height:17px;">About Me</a></li>
<li class="topmenu"><a href="#" style="width:64px;height:17px;line-height:17px;"><span>Portfolios</span></a>
<ul>
<li class="subfirst"><a href="#"><span>Horses</span></a>
<ul>
<li class="subfirst"><a href="http://test.lawsart.com/Horse.html">Horses I</a></li>
<li><a href="http://test.lawsart.com/Home.html">Horses II</a></li>
<li><a href="http://test.lawsart.com/Home.html">Horses III</a></li>
<li><a href="http://test.lawsart.com/Home.html">Horses IV</a></li>
<li><a href="http://test.lawsart.com/Home.html">Horses V</a></li>
<li><a href="http://test.lawsart.com/Home.html">Horses VI</a></li>
<li class="sublast"><a href="http://test.lawsart.com/Home.html">Horses VII</a></li>
</ul></li>
<li><a href="#"><span>Dogs</span></a>
<ul>
<li class="subfirst"><a href="http://test.lawsart.com/Dog.html">Dogs I</a></li>
<li class="sublast"><a href="http://test.lawsart.com/Home.html">Dogs II</a></li>
</ul></li>
<li><a href="#"><span>People</span></a>
<ul>
<li class="subfirst"><a href="http://test.lawsart.com/People.html">People I</a></li>
<li class="sublast"><a href="http://test.lawsart.com/Home.html">People II</a></li>
</ul></li>
<li class="sublast"><a href="http://test.lawsart.com/Stills.html">Stills</a></li>
</ul></li>
<li class="topmenu"><a href="http://test.lawsart.com/Order.html" style="width:47px;height:17px;line-height:17px;">Order</a></li>
<li class="topmenu"><a href="http://test.lawsart.com/Contact.html" style="height:17px;line-height:17px;">Contact Me</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">CSS3 Drop Down Menu Free Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
</body>
</html>
这是 style.css 文件:
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#018b01;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#018b01;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0 0 0 1px;}
ul#css3menu1 ul>li{
margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#E7E5E5;cursor:pointer;padding:2px 20px 2px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu1 ul li{
float:none;margin:0;}
ul#css3menu1 ul a{
text-align:left;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 ul span{
background-image:none;padding-right:2px;}
ul#css3menu1 li.topmenu>a{
background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:linear-gradient(180deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#333;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}
最佳答案
您发布的 HTML 看起来不错，但在事件页面本身上有导致链接处于事件状态的额外属性。这是现场网站上“马”的代码:
<li class="subfirst"><a href="#" target="_top"><span>Horses</span></a>
<ul>
<li class="subfirst"><a href="http://test.lawsart.com/Horse.html" target="_top">Horses I</a></li>
<li><a href="http://test.lawsart.com/Home.html" target="_top">Horses II</a></li>
<li><a href="http://test.lawsart.com/Home.html" target="_top">Horses III</a></li>
<li><a href="http://test.lawsart.com/Home.html" target="_top">Horses IV</a></li>
<li><a href="http://test.lawsart.com/Home.html" target="_top">Horses V</a></li>
<li><a href="http://test.lawsart.com/Home.html" target="_top">Horses VI</a></li>
<li class="sublast"><a href="http://test.lawsart.com/Home.html" target="_top">Horses VII</a></li>
</ul>
</li>
target="_top" 属性是问题所在。看起来那段代码被插入到实时 HTML 中。
可能的解决方案:将 # 替换为 javascript: void(0)。这会阻止链接处于事件状态，并且即使使用 target="_top" 也应该可以工作。
关于css - 如何让 parent 无法点击和无法点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15248718/
25
4
0
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？ 最佳答案 就像有人说的那样，“
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。 假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？ 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱，我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。 假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀！