CSS答：懸停到：重點

Question

我想提出一個網站，我的兄弟和我做了他該製作的下拉菜單的CSS：懸停顯示二級選項。然後，他決定他希望人們點擊主導航盒，然後下拉菜單顯示次級...

我試着改變：懸停到：焦點（也是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片需要清洗了但是你會得到一般的傑伊斯！

Answer 1

你想要一個菜單​​出現在單擊事件。 要做到這一點，並也使跨瀏覽器兼容的，我會建議使用jQuery的jquery library只需下載庫，並附加在你的頁面的<head>部分的鏈接和簡單的寫jQuery代碼附加點擊事件處理程序。

jQuery Download Link

基本上你需要你在

<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> 

jQuery的鏈接到你的頁面寫入此之後和CSS一點變化是代碼只這麼多 也required.and完蛋了你wana做。

已經改變了你的CSS代碼和威滕你jQuery代碼爲您的網站

檢查這個鏈接，你將有你的兩個改變的代碼。 ，右側是啓用了點擊的工作網站。

http://jsfiddle.net/znsZu/

希望它能幫助。