0

我正在为我的兄弟制作一个网站，并为他做了一个下拉 CSS 菜单，它在 :hover 上工作以显示辅助选项。然后他决定让人们点击主导航框，然后下拉菜单以显示二级...

我尝试将 a 元素上的 :hover 更改为 :focus （也是 a:active ），这在 IE9 中运行良好，但 Firefox、Safari、Chrome 和 Opera 无法识别新命令。我读到了一个 Javascript 替代方案，但我对它不太熟悉，对沿着这条路线走下去真的有信心。

只是想知道是否有人可以提供帮助：

网页链接：http: //www.doogledesigns.co.uk/prime%20elements/website/

HTML 代码：

<div class="nav1">
<div class="menu-item-home">
<h4><a href="#">Home</a></h4>
<ul>
<li><a href="#">Plumbing &amp; Gas Work</a></li>
<li><a href="#">Electrical Work</a></li>
<li><a href="#">Extensions</a></li>
<li><a href="#">Internal &amp; External Developments</a></li>
</ul>
</div>

<div class="menu-item-garden">
<h4><a href="#">Garden</a></h4>
<ul>
<li><a href="#">Garden Maintenance</a></li>
<li><a href="#">Landscaping</a></li>
<li><a href="#">Patios &amp; Driveways</a></li>
<li><a href="#">Walls &amp; Fencing</a></li>
<li><a href="#">Ponds &amp; Water Features</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Drainage</a></li>
</ul>
</div>

<div class="menu-item-construction">
<h4><a href="#">Construction</a></h4>
<ul>
<li><a href="#">Home Redevelopment</a></li>
<li><a href="#">New Builds</a></li>
<li><a href="#">Driveways</a></li>
</ul>
</div>

</div>

CSS 代码：

.nav1 {
float: left;
background: #404041;
height: 500px;
line-height: 1.5;
width: 170px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,2);
box-shadow: 2px 2px 5px rgba(0,0,0,2);
}

.menu-item-home, .menu-item-garden, .menu-item-construction {
background: #404041;
width: 170px;
}

.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px; 
background: #10702a;
}

.menu-item-home h4 a, .menu-item-garden h4 a, .menu-item-construction h4 a {
color: #fff;
display: block;
text-decoration: none;
width: 170px;
}

/* Menu Header Styles */
.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
border-bottom: 1px solid rgba(0,0,0,3);
border-top: 1px solid rgba(225,225,225,0.2);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px;

/* Gradient */
background: #a90329; /* Old browsers */ 
background: -moz-linear-gradient(top, #02942a 0%, #0b872d 44%, #0f722a 100%); /* FF3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02942a), color-stop(44%,#0b872d), color-stop(100%,#0f722a)); /* Chrome,Safari4+ */  
background: -webkit-linear-gradient(top, #a90329 0%,#80b872d 44%,#0f722a 100%); /*   Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* Opera 11.10+ */  
background: -ms-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* IE10+ */  
background: linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02942a',   endColorstr='#0f722a',GradientType=0 ); /* IE6-9 */
}

/* ul styles */
.menu-item-home ul, .menu-item-garden ul, .menu-item-construction ul {
background: #404041;
font-size: 12px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px
}

.menu-item-home ul a, .menu-item-garden ul a, .menu-item-construction ul a {
margin-left: 2.5px;
text-decoration: none;
color: #404041;
diplay: block;
width: 173px;
}

/* li styles */
.menu-item-home li, .menu-item-garden li, .menu-item-construction li {
border-bottom: 1px solid #eee;
}

.menu-item-home li:hover, .menu-item-garden li:hover, .menu-item-construction li:hover {
background: #eee;
}

/* ul styles */
.menu-item-home ul, .menu-item-construction ul, .menu-item-garden ul {
background: #fff;
font-size: 12px;
line-height: 30px;
min-height: 0px;
max-height: 0px /* collapses the menu */
list-style-type: none;
overflow: hidden;
padding: 0px;

/* Animation */
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}

.menu-item-home:hover ul {
height: 155px;
}

.menu-item-garden:hover ul {
height: 220px;
}

.menu-item-construction:hover ul {
height: 90px;
}

CSS 表需要清理一下，但你得到了一般的 jist！

4

1 回答 1

0

您希望该菜单出现在点击事件上。为了实现这一点并让跨浏览器兼容，我建议使用jquery libraryjQuery，只需下载库并将链接附加到<head>页面部分，然后简单地编写 jquery 代码来附加点击事件处理程序。

jQuery 下载链接

基本上，在将 jquery 链接到您的页面后，您只需要编写这么多代码

<script>

$(document).ready(function(){
   $(".menu-item-home a").click(function(){
      $(".menu-item-home  ul").slideToggle('slow');
   });
$(".menu-item-garden a").click(function(){
    $(".menu-item-garden  ul").slideToggle('slow');
});
$(".menu-item-construction a").click(function(){
    $(".menu-item-construction  ul").slideToggle('slow');
});
});

</script>

并且还需要对 css 进行一些更改。这就是你想要做的。

已更改您的 css 代码并为您的网站编写 jquery 代码

检查此链接，您将拥有更改后的代码。右侧是启用了点击的工作网站。

http://jsfiddle.net/znsZu/

希望能帮助到你。

于 2013-03-31T13:31:56.040 回答