HTML和CSS（可能是JavaScript？）中的Dropdown Div

Question

我正在為世界歷史項目設計一個簡單的網頁，基本上每個人都有div，當我將鼠標懸停在每個人的div上時，我希望有一個下拉列表div，詳細介紹他們的傳記。 我當時正在考慮使用：hover，但是我嘗試的所有方法都無法正常工作。

這是我的html：

<!doctype html>
<html>
    <head>
        <title>Women of the American Revolution</title>
        <link rel="stylesheet" href="styles.css">
      <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-1/cur20.ani), url(http://cur.cursors-4u.net/cursors/cur-1/cur20.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2005/07/26/cur20.html" target="_blank" title="American Flag"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="American Flag" style="position:absolute; top: 0px; right: 0px;" /></a>
    </head>

    <body>
        <center><h1 id = "h1">Women of the American Revolution</h1></center>
        <center><div id = "stage">
            <div id = "abigailAdams"><p>Abigail Adams</p></div>
            <div id = "hannahBlair"><p>Hannah Blair</p></div>
            <div id = "margaretCorbin"><p>Margaret Corbin</p></div>
            <div id = "maryDraper"><p>Mary Draper</p></div>
            <div id = "betsyRoss"><p>Betsy Ross</p></div>
            <div id = "maryLHMcCauley"><p>Mary Ludwig Hays McCauley (Molly Pitcher)</p></div>
            <div id = "estherReed"><p>Esther Reed</p></div>
            <div id = "deborahSamson"><p>Deborah Samson</p></div>
            <div id = "mercyOtisWarren"><p>Mercy Otis Warren</p></div>
            <div id = "marthaWashington"><p>Martha Washington</p></div>

        </div></center>


        <script>

        </script>
    </body>
</html>

這是我的CSS：

@font-face
{
    font-family: requited-script-demo;
    src: url("requited-script-demo.regular.ttf");
}

    body {
   background-image: url("seamless.png");
    }

#h1 {
    border-radius: 50px;
    width: 700px;
    height: 50px;
    position: relative;
    padding: 10px;
    font-family: requited-script-demo;
    color: white;
    text-shadow: 2px 2px black;
    background-image: url("blackseam.jpg");
     text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               box-shadow: 15px 15px 10px #888888;
}

#stage {
    position: relative;
    height: 2000px;
    width: 1000px;
    box-shadow: 10px 10px 5px #888888;

}

#abigailAdams {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("abigailAdams.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;

}

#hannahBlair {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("hannahBlair.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#margaretCorbin {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("margaretCorbin2.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#maryDraper {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("maryDraper.png");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#betsyRoss {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("betsyRoss.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#maryLHMcCauley {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("maryMcCauley.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#estherReed {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image:url("estherReed.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#deborahSamson {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("deborahSamson.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#mercyOtisWarren {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("mercyWarren.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

#marthaWashington {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("marthaWashington.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}


p {
    color: white;
    text-shadow: 2px 2px black;
}

如果需要，這就是頁面的外觀。

Answer 1

理想情況下，菜單結構應具有如下層次結構：

<nav id="top-menu">
    <span>Women of the American Revolution</span>
    <ul>
        <li>Abigail Adams</li>
        <!-- Other menu items -->
    </ul>
</nav>

您的CSS可以打開和關閉它，如下所示：

#top-menu > ul {
    display: none;
}

#top-menu:hover > ul {
    display: block;
}

對於您提供的HTML，您可以將兩個<center>標簽包裝在一個Element 。 然后隱藏第二個CenterElement 。 將鼠標懸停在父Element ，可以顯示菜單。

請在此處查看示例： http : //codepen.io/rooyva/pen/c6941206234e048e3bdc7e6f4b08a8b8

這是示例中可用的CSS：

#top-menu .menu {
    display: none;
}

#top-menu:hover .menu {
  display: block;
}

HTML和CSS（可能是JavaScript？）中的Dropdown Div

問題描述

1 個解決方案

解決方案1
0 2016-09-12 01:14:49

HTML和CSS（可能是JavaScript？）中的Dropdown Div

問題描述

1 個解決方案

解決方案1 0 2016-09-12 01:14:49

解決方案1
0 2016-09-12 01:14:49