Как нажать дополнительное меню чуть ниже основной горизонтальной панели навигации?

Anita Mathew спросил: 27 ноября 2017 в 05:51 в: html

Я пытаюсь разместить вторичное меню, раскрывающееся при наведении на элемент списка основной панели навигации, чуть ниже этого элемента и поверх любого контента чуть ниже панели навигации.

Но мое дополнительное меню всплывает выше список и за смежным списком. Кроме того, он скрывается за нижележащим содержимым.

Я попробовал это:

<%@ Master Language="C#" AutoEventWireup="true" 
        CodeBehind="Site2.master.cs" Inherits="abc.Site2" %><!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 runat="server">
        <title></title>
        <link href="stylesheets/StyleSheet1.css" type="text/css" rel="Stylesheet" />        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            ul {
                list-style: none;
            }            ul#pri.nav {
                margin-left: 0px;
                margin-top: 50px;
                z-index: -1;
                border-top-right-radius: 15px;
                border-top-left-radius: 15px;
                text-decoration: none;
                width: 100%;
                background-color: rgb(180, 221, 180);
            }            ul.nav {
                height: 10px;
            }            ul.nav li {
                float: left;
                margin-top: 0px;
                padding: 10px 13px;
                font-family: Arial, sans-serif;
                font-size: small;
                line-height: 15px;
                cursor: pointer;
                font-weight: 700;
            }            ul.nav#pri li {
                margin-top: 0px;
                float: left;
                margin-right: 5px;
                font-family: 'Arial Rounded MT';
                color: #fff;
                width: 100px;
                height: 6px;
                text-align: center;
                padding: 20px;
                display: block;
                -moz-border-radius-topleft: 15px;
                -webkit-border-top-left-radius: 15px;
                -moz-border-radius-topright: 15px;
                -webkit-border-top-right-radius: 15px;
                border-bottom-style: none;
                border-bottom-color: inherit;
                border-bottom-width: medium;
                background-color: #0fc15e;
                position: relative;
                bottom: 45px;
            }            ul.nav#pri li a {
                text-decoration: none;
                color: #fff;
            }            ul.nav#pri li.active,
            ul.nav#pri li:hover ul.nav#sec {
                display: block;
                font-family: 'Arial Rounded MT';
                color: #a67cd5;
            }            .nav#pri li:hover ul {
                color: #2b95b2;
            }            ul.nav#sec {
                display: none;
            }            ul.nav#sec li a {
                text-decoration: none;
                color: #fff;
                font-size: 14px;
            }            ul.nav#sec li:hover {
                font-family: 'Arial Rounded MT';
                text-decoration: none;
                color: #fff;
                background-color: #747171;
            }            .auto-style2 {
                height: 550px;
            }            .auto-style3 {
                height: 454px;
                margin-top: 40px;
            }            .auto-style4 {
                height: 133px;
                margin-top: 81px;
            }            .auto-style5 {
                margin-left: 57px;
            }            .auto-style6 {
                width: 123px;
            }
        </style>
    </head>    <body style="height: 600px">
        <form id="form1" runat="server" class="auto-style2">
            <div class="auto-style2">
                <div class="auto-style3">
                    <div style="margin-top :80px">
                        <div style="width:100%; float:left; margin-top: -20px;">
                            <div style="float:left; width:44%; text-align:justify; margin-left:20px; 
       margin-top:-20px;">
                                <asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
                            </div>
                        </div>
                    </div>
                    <br />
                    <br />
                    <div>
                        <ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
                            <li class="active">
                                <a href="AfterLogin.aspx">Home</a>
                            </li>
                            <li>
                                <a href="rubrics.aspx">Rubrics</a>
                            </li>
                            <li>
                                <a href="CreateUser.aspx">Create User</a>
                            </li>
                            <li>
                                <a href="#">Reports</a>
                                <ul id="sec" class="nav" style="margin-left: 3px">
                                    <li>
                                        <a href="a">a</a>
                                    </li>
                                    <li>
                                        <a href="b">b</a>
                                    </li>
                                    <li>
                                        <a href="c">c</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="auto-style6">
                                <a href="AdminMessaging.aspx">Messages</a>
                            </li>
                            <li class="auto-style5">
                                <asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
                            </li>
                        </ul>
                    </div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </form>
        <div id="p1" class="auto-style4">
            <div style="height:10px;"></div>
            <div style="color:#F5F5F5;text-align:center;">
                Copyright © xyz
            </div>
        </div>
    </body>
</html>

Вот что происходит:

Как решить эту проблему?

0 ответов