只有CSS和HTML的功能下拉菜單？

我想弄清楚如何編程實際上可以運行的下拉菜單，與我的原始編程兼容（在線的禁用我以前的代碼），並且只有當鼠標懸停在我想要的頁面上時纔會出現。只有CSS和HTML的功能下拉菜單？

<title>Handmade with Joy</title> 

<style> 


    .store-pics { 
     display: inline-block; 
    } 

    @font-face { 
     font-family: "Italianno"; 
     src: url("Italianno-Regular-OTF.otf") format("opentype"); 
    } 

    body { 
     font-size: 200%; 
     font-family: "Italianno", serif; 
     background-image: url("file:///E:/Grace/Art/Skin%20Care%20Products/background.jpg"); 
     color: #FF9ED5; 
     } 

    ul#tabs { 
     list-style-type: none; 
     margin: 30px 0 0 0; 
     padding: 0 0 0.3em 0; 
    } 

    ul#tabs li { 
     display: inline; 
    } 

    ul li ul { 
     padding: 0; 
     position: absolute; 
     display: none; 
     opacity: o; 
     visibility: hidden; 
    } 

    ul#tabs li a { 
     color: #FFE8F0; 
     background: rgb(255, 189, 220); 
     border: 1px solid rgb(255,255,255); 
     border-bottom: none; 
     padding: 0.3em; 
     text-decoration: none; 
    } 

    ul#tabs li a:hover { 
     background-color: rgb(252, 151, 190); 
    } 

    ul#tabs li a.selected { 
     color: rgb(255, 189, 220); 
     background: #FFE8F0; 
     font-weight: bold; 
    } 

    div.tabContent.hide { 
     display: none; 
    } 

    div { 
     width:80vw; 
     margin: 0 auto; 
    } 

    #title { 
     color: #FF9ED5; 
     text-align: center; 
    } 

    .about { 
     position: relative; 
    } 

    .list { 
     display: block; 
     margin: 0 auto; 
    } 

    #about-title { 
     position: absolute; 
     left: 47%; 
     margin-left: -50px; 
     top: 550px; 
     display: block; 
     color: #FF9ED5; 
     text-align: center; 
     z-index: 2; 
    } 

    img.border-label { 
     position: absolute; 
     display: block; 
     left: 40%; 
     margin-left: -40px; 
     top: 550px; 
     width: 335px; 
     height: 140px; 
    } 

    #natures-gifts { 
     position: absolute; 
     left: 44%; 
     margin-left: -40px; 
     transform: rotate(-16deg); 
     top: 550px; 
    } 

</style> 

<script> 
    var tabLinks = new Array(); 
    var contentDivs = new Array(); 
    function init() { 
     var tabListItems = document.getElementById('tabs').childNodes; 
     for (var i = 0; i < tabListItems.length; i++) { 
      if (tabListItems[i].nodeName == "LI") { 
       var tabLink = getFirstChildWithTagName(tabListItems[i], 'A'); 
       var id = getHash(tabLink.getAttribute('href')); 
       tabLinks[id] = tabLink; 
       contentDivs[id] = document.getElementById(id); 
      } 
     } 

     var i = 0; 

     for (var id in tabLinks) { 
      tabLinks[id].onclick = showTab; 
      tabLinks[id].onfocus = function() { this.blur() }; 
      if (i == 0) tabLinks[id].className = 'selected'; 
      i++; 
     } 

     var i = 0; 

     for (var id in contentDivs) { 
      if (i != 0) contentDivs[id].className = 'tabContent hide'; 
      i++; 
      } 
     } 

     function showTab() { 
      var selectedId = getHash(this.getAttribute('href')); 
       for (var id in contentDivs) { 
        if (id == selectedId) { 
         tabLinks[id].className = 'selected'; 
         contentDivs[id].className = 'tabContent'; 
        } else { 
         tabLinks[id].className = ''; 
         contentDivs[id].className = 'tabContent hide'; 
        } 
       } 
      return false; 
     } 

     function getFirstChildWithTagName(element, tagName) { 

      for (var i = 0; i < element.childNodes.length; i++) { 

       if (element.childNodes[i].nodeName == tagName) 
        return element.childNodes[i]; 
       } 
      } 

     function getHash(url) { 
      var hashPos = url.lastIndexOf ('#'); 
      return url.substring(hashPos + 1); 
     } 

    </script> 
<body onload="init()"> 


<div class = "everything"> 
     <Img class = "flourish" src="file:///E:/Grace/Art/Clay/Manga%20Cute%20Bunny/Branches%20Finished.png" height = "100px"> 

<div class = "program"> 
    <h1 id="title">Handmade with Joy</h1> 



<div class="list">  
    <ul id="tabs"> 
     <li><a href="#about">About</a></li> 

     <li><a href="#store">Soap</a></li> 

      <ul> 
       <li><a href="#mp">Melt & Pour</a></li> 

       <li><a href="#cp">Cold Process</a></li> 

       <li><a href="#hp">Hot Process</a></li> 

      </ul> 

    </ul> 




    <div class="tabContent" id="about"> 

     <IMG class="honey-milk-soap-cover" src="file:///E:/Grace/Art/Skin%20Care%20Products/M&P%20Soap 
     %20Making/End%20Product/Honey%20&%20Milk/DSCN6735%20-%20Copy.JPG" width="550"> 

     <h2 class = small-tab-titles id="natures-gifts">Nature's Gifts</h2> 
    </div> 
    </div> 


    <div class="tabContent" id="store"> 

     <h2>Store</h2> 

     <div> 

     <div> 
     </div> 

    </div> 



    <div class="tabContent" id="reaching-out"> 

     <h2>Reaching Out</h2> 
      <br> 
     <div> 

      <h3>Contacts Form:</h3> 

     </div> 

    </div>

來源

2015-12-22 Grace

確保您重置您的代碼隱藏它時的首選裏徘徊正在使用此代碼：

#tabs li:hover ul { 
    display: inline; 
    opacity: 1; 
    visibility: visible; 
    margin-top: 27px; 
    margin-left: -42px; 
}

我做了一個demo here與您的代碼

來源

2015-12-22 04:14:48 LOTUSMS

謝謝！然而，當我試圖將鼠標懸停在下拉菜單上點擊時，下拉菜單消失了。我會怎麼做？ – Grace

給我幾分鐘，我會更新演示 – LOTUSMS

簡單。將子菜單ul的頁邊距改爲margin-top：27px;而不是30px。我更新了答案 – LOTUSMS

如果這是你尋找：

只有當鼠標懸停在頁面出現

您可以使用此：

select#my_select{ display: none } 
body:hover select#my_select{ display: block }

來源

2015-12-22 03:49:45 Trix

只有CSS和HTML的功能下拉菜單？

回答

相關問題