Question

我已经制作了自己的下拉菜单，但问题是当我点击文本时它成功链接到其他地方但是当我点击文本旁边它没有链接到其他地方时，你能帮我解决这里有什么问题吗？帮助将不胜感激!!

这是我的照片：

enter image description here

这是drop-down菜单的源代码..

<style>
    ul {
        text-align: left;
        display: inline;
        margin: 0;
        padding: 15px 4px 17px 0;
        list-style: none;
        -webkit-box-shadow: 0px 2px 7px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 2px 7px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 2px 7px 0px rgba(50, 50, 50, 0.75);
    }
    ul li {
        font: bold 12px/18px Throw My Hands Up in the Air;
        font-size: 15px;
        display: inline-block;
        margin-right: -4px;
        position: relative;
        padding: 15px 20px;
        background: #D00000;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    ul li:hover {
        background: #555;
        color: #fff;
    }
    ul li ul {
        padding: 0;
        position: absolute;
        top: 48px;
        left: 0;
        width: 150px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }
    ul li ul li {
        background: #555;
        display: block;
        color: #fff;
        text-shadow: 0 -1px 0 #000;
    }
    ul li ul li:hover { background: #666; }
    ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    #header{
        background-color: #D00000;
        text-align: center;
        position: fixed;
        top: 0%;
        left: 0%;
        right: 0%;
        height: 8%;
        -webkit-box-shadow: 0px 3px 12px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 3px 12px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 3px 12px 0px rgba(50, 50, 50, 0.75);
    }

    #left_box{
        background-color: #ffffff;
        position: fixed;
        width: 20%;
        top: 10%;
        left: 0%;
        height: 100%;
    }

    a{
        font-size: 15px;
    }

    .box
    {
        width: 80%;
        padding:10px;
        border:2px solid gray;
        position: fixed;
        top: 12%;
        left: 15%;
        height: 50%;
    }

</style>
<body>
<div id="header">
    <ul><li><a href="home.php" style="text-decoration: none; color: #000000;">Home</a></li>
        <li>Notification</li>
        <li>
            Profile
            <ul>
                <li>All members</li>
                <li><a href="profile.php" style="text-decoration: none; color: #ffffff">My profile</a></li>
            </ul>
        </li>
        <li>
            Settings
            <ul>
                <li><a href="setting.php" style="text-decoration: none; color: #ffffff">Settings</a></li>
                <li><a href="logout.php" style="text-decoration: none; color: #ffffff">Logout</a></li>
                <li>About</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

a标记是内联元素，因此默认情况下它只是文本的宽度。添加显示：块;到链接，使其100％宽度：

ul li a { display: block; }

Answer 2

问题是唯一的文本被认为是实际的＆＃34;链接＆＃34;，因为它是<a>标记的innerHTML。您可能需要稍微改变CSS，但尝试将<li>标记包装在<a>标记中，以便获得<a href="link"><li>Link Name</a>。然后单击<li>元素上的任意位置应激活链接。

Answer 3

在锚标记中放置除内联元素之外的任何内容的错误形式。最简单的解决方案？

指定所有菜单下拉元素的宽度，因为它们已经是相同的宽度..

#header li > ul > li > a { width: 125px; }

应使所有嵌套下拉列表的宽度相同。

确保你有

 a { display: block; }

以及......

当我点击进入文本时它可以正常工作，但当我点击文本旁边时，它不会在下拉菜单中工作？

3 个答案: