如何在主水平导航栏下方推动二级菜单？

时间：2017-12-21 07:31:02

标签： html css asp.net-web-api navbar

我正在尝试将鼠标悬停在主导航栏的listitem上的辅助菜单放置在该项目的下方，并放在导航栏下方的任何内容上。

但是我的二级菜单浮动在listitem之上并且在相邻的listitem之后。它也隐藏在下面的内容之后。

我试过了：

<%@ 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>

这是发生了什么： enter image description here

如何解决这个问题？

enter image description here

1 个答案:

答案 0 :(得分：0)

我刚改变了

的风格 
`ul.nav#sec`

以 

margin-left: -59px;
bottom: -4rem;
position: absolute;
z-index: 10;


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;
    margin-left: -59px;
    bottom: -4rem;
    position: absolute;
    z-index: 10;
}


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;
      }
    <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>
                              <ul id="sec" class="nav">
                  <li><a href="a">a</a></li>
                  <li><a href="b">b</a></li>
                  <li><a href="c">c</a></li>
                </ul>
              </li>
              <li><a href="CreateUser.aspx">Create User</a></li>
              <li><a href="#">Reports</a>
                <ul id="sec" class="nav">
                  <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>

相关问题
最新问题