使用HTML / CSS創建懸停下拉菜單時遇到問題

Question

我正在嘗試使用具有懸停效果的HTML / CSS創建一個下拉菜單。以下是我的HTML代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
    <style>
        body {
            background-color:#181818;
            margin: 0px;
        }

     ul li {
        display: inline-block;
        font-size: 140%;
        color: orange;
        width: 150px;
        background-color: #505050;
        height: 50px;
        border-radius: 150px;
        position: relative;
        }

        p {
            margin-top: 10px;
            text-align: center;
            margin-bottom: 20px;
        }
        ul li:hover {
            color: #505050;
            background-color: orange;
        }
        /*ul li ul {
            visibility: hidden; 
        }*/

     #id2 {
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    #id1:hover #id2 {
        display: block; /* display the dropdown */
    }


    </style>
<body>

        <ul id="topMenu">
            <li><p>Home</p></li>
            <li><p id="id1">Projects</p></li>
            <ul id="id2">
                <li><p>Project 1</p></li>
                <li><p>Project 2</p></li>
                <li><p>Project 3</p></li>
            </ul>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

</body>
</html>

我不確定我在這里的CSS代碼中做錯了什么。 誰能幫助我提供代碼以及如何正確實現懸停下拉菜單。

謝謝，Bhavik

Answer 1

您為下拉菜單添加了錯誤的標記

代替

<ul id="topMenu">
            <li><p>Home</p></li>
            <li><p id="id1">Projects</p></li>
            <ul id="id2">
                <li><p>Project 1</p></li>
                <li><p>Project 2</p></li>
                <li><p>Project 3</p></li>
            </ul>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

至

<ul id="topMenu">
            <li><p>Home</p></li>
            <li><p>Projects</p>
               <ul>
                  <li><p>Project 1</p></li>
                  <li><p>Project 2</p></li>
                  <li><p>Project 3</p></li>
              </ul>
            </li>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

例：

 body { background-color:#181818; margin: 0px; } ul li { display: inline-block; font-size: 140%; color: orange; width: 150px; background-color: #505050; height: 50px; border-radius: 150px; position: relative; } p { margin-top: 10px; text-align: center; margin-bottom: 20px; } ul li:hover { color: #505050; background-color: orange; } ul li ul{ display: none; padding-left: 0; } ul li:hover ul{ display: block; position: absolute; top: 100%; left: 0; }

 <ul id="topMenu"> <li> <p>Home</p> </li> <li> <p id="id1">Projects</p> <ul id="id2"> <li> <p>Project 1</p> </li> <li> <p>Project 2</p> </li> <li> <p>Project 3</p> </li> </ul> </li> <li> <p>About Us</p> </li> <li> <p>contact us</p> </li> </ul>

Answer 2

看這個： http : //jsfiddle.net/412cosa7/

HTML：

#id1不是#id2的祖先，因此，首先，您可以從<p>刪除#id2並將其添加到<li> ，然后將#id2's元素放入#id1's元素中。

實際上，您的源文件中的<p>是不必要的。

CSS：

使用父選擇器“ > ”。 例如： #id1:hover > #id2

使用HTML / CSS創建懸停下拉菜單時遇到問題

問題描述

2 個解決方案

解決方案1
1 2015-06-07 07:20:32

解決方案2
0 2015-06-07 07:25:54

使用HTML / CSS創建懸停下拉菜單時遇到問題

問題描述

2 個解決方案

解決方案1 1 2015-06-07 07:20:32

解決方案2 0 2015-06-07 07:25:54

解決方案1
1 2015-06-07 07:20:32

解決方案2
0 2015-06-07 07:25:54