Question

我正在为我的兄弟制作一个网站，我为他做了一个下拉式CSS菜单，其中包括：hover以显示辅助选项。然后他决定让人们点击主导航框，然后下拉菜单显示次要级别......

我尝试将：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！

Answer 1

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

jQuery Download Link

基本上你只需要编码这么多将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/

希望它有所帮助。

css a：悬停到：焦点

1 个答案: