Question

我无法点击导航栏上的链接。我已经在网上到处检查过，我发现人们已经在href中引用了与我所做的相似的链接。

<div class="Navigation">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                <ul>
                    <li><a href="SplashPage.aspx"></a> Home</li>
                    <li><a href="Customer/Register.aspx"></a>Register</li>
                    <li><a href="Customer/Login.aspx"></a>Login</li>
                    <li>Customer
                       <ul>
                             <li> <a href="Customer/HomePage.aspx"></a>Make an Order</li>
                        </ul>
                    </li>
                    <li>Employee
                        <ul>
                            <li><a href="Employee/Modifications.aspx"></a>Modify Menu</li>
                            <li><a href="Employee/PaymentStatus.aspx"></a>Payment Status</li>
                            <li><a href="Employee/Reports.aspx"></a>Report</li>
                        </ul>
                    </li>
                </ul>
                <br />
                <br />
                <br />
            </asp:ContentPlaceHolder>
        </div>

下面是CSS。我不知道css中的任何内容是否会影响我能够点击链接

ul {
    list-style: none;
}

li {
    background-color: yellow;
    width: 150px;
    height: 30px;
    text-align: center;
    float: left;
    color:black;
    position:relative;
    border-radius:10px;
}
/*when you hover over the link it is green*/
    li:hover {
        background-color:greenyellow;
    }
/*adjust the submenus*/
* {
    margin:0px;
    padding:0px;
}
/*hide submenus*/
ul ul{
    display:none;
}

/*when submenus are hovered over they are white*/
ul li li:hover {
    background-color:white;
}
/*make submenus appear when thier parent menu is hovered over*/
ul li:hover > ul {
    display:block;
}
ul ul ul {
    margin-left:150px;
    top: 0px;
    position:absolute;
}

Answer 1

您的代码正常运行，但出于某种原因，您的所有导航文本都位于a（锚点）标记之外。

您当前的链接如下所示：

<a href="SplashPage.aspx"></a> Home

链接应为：

<a href="SplashPage.aspx">Home</a>

请检查以下代码：

ul {
    list-style: none;
}

li {
    background-color: yellow;
    width: 150px;
    height: 30px;
    text-align: center;
    float: left;
    color:black;
    position:relative;
    border-radius:10px;
}
/*when you hover over the link it is green*/
    li:hover {
        background-color:greenyellow;
    }
/*adjust the submenus*/
* {
    margin:0px;
    padding:0px;
}
/*hide submenus*/
ul ul{
    display:none;
}

/*when submenus are hovered over they are white*/
ul li li:hover {
    background-color:white;
}
/*make submenus appear when thier parent menu is hovered over*/
ul li:hover > ul {
    display:block;
}
ul ul ul {
    margin-left:150px;
    top: 0px;
    position:absolute;
}

<div class="Navigation">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                <ul>
                    <li><a href="SplashPage.aspx">Home</a></li>
                    <li><a href="Customer/Register.aspx">Register</a></li>
                    <li><a href="Customer/Login.aspx">Login</a></li>
                    <li>Customer
                       <ul>
                             <li> <a href="Customer/HomePage.aspx">Make an Order</a></li>
                        </ul>
                    </li>
                    <li>Employee
                        <ul>
                            <li><a href="Employee/Modifications.aspx">Modify Menu</a> </li>
                            <li><a href="Employee/PaymentStatus.aspx">Payment Status</a></li>
                            <li><a href="Employee/Reports.aspx">Report</a></li>
                        </ul>
                    </li>
                </ul>
                <br />
                <br />
                <br />
            </asp:ContentPlaceHolder>
        </div>

Answer 2

将您的链接文字放在锚标记内！

<div class="Navigation">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                <ul>
                    <li><a href="SplashPage.aspx">Home</a> </li>
                    <li><a href="Customer/Register.aspx">Register</a></li>
                    <li><a href="Customer/Login.aspx">Login</a></li>
                    <li>Customer
                       <ul>
                             <li> <a href="Customer/HomePage.aspx">Make an Order</a></li>
                        </ul>
                    </li>
                    <li>Employee
                        <ul>
                            <li><a href="Employee/Modifications.aspx">Modify Menu</a></li>
                            <li><a href="Employee/PaymentStatus.aspx">Payment Status</a></li>
                            <li><a href="Employee/Reports.aspx">Report</a></li>
                        </ul>
                    </li>
                </ul>
                <br />
                <br />
                <br />
            </asp:ContentPlaceHolder>
        </div>

如果要删除默认链接样式，只需定位<a>标记：

a{
  text-decoration: none;
  color: black;
}

导航链接不可点击

2 个答案: