Question

我正在尝试创建一个导航栏，我希望列表项显示在栏顶部。但物品正在它下面移动。此外，当选择一个特定的列表项时，我希望它被突出显示，并且菜单项要在它下面对齐。但是一旦我从父列表项移动鼠标，下拉消失.Plus有一些巨大的差距在下拉列表的列表项之间。

我想要这样的事情：

＆＃13;

ul {
  list-style: none;
}

ul#pri.nav {
  margin-left: 0px;
  z-index: -1;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  text-decoration: none;
  width: 97%;
  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;
}

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;
  /*float:left;
text-align:center;
border-top-right-radius:15px;
border-top-left-radius:15px;
text-decoration:none;
color:#fff;


 font-family:'Arial Rounded MT';
 font-size:15px;
 color:#fff;
 margin-top:-1px;
 width:97%;
    */
  /*height:25px;
 border-top-right-radius:15px;*/
}


/*ul.nav#pri li li.active
{

}*/

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;
}

＆＃13;

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

＆＃13;

目前我得到的是：

Answer 1

您可以删除</br>和margin-top

使用以下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;
  z-index: -1;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  text-decoration: none;
  width: 97%;
  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;
}

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;
  /*float:left;
text-align:center;
border-top-right-radius:15px;
border-top-left-radius:15px;
text-decoration:none;
color:#fff;


 font-family:'Arial Rounded MT';
 font-size:15px;
 color:#fff;
 margin-top:-1px;
 width:97%;
    */
  /*height:25px;
 border-top-right-radius:15px;*/
}


/*ul.nav#pri li li.active
{

}*/
      .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>

我希望这会帮助你。

如果需要更多帮助，请告诉我。

Answer 2

这将帮助您进行对齐

date = prev_date

date = next_date

ul.nav#pri li {
  position: relative;
  bottom: 45px;
}

Answer 3

而不是在ul使用伪元素中使用backround，而是从li中移除浮动并简单地使它们display:inline-block。你还必须删除一些无用的高度属性。

我还使用绝对位置更正子菜单，使其显示在菜单项下。

删除了一些菜单元素，以便能够在代码段上看到结果

＆＃13;

ul {
  list-style: none;
}

ul#pri.nav {
  margin-left: 0px;
  padding: 0 20px;
  position: relative;
  text-decoration: none;
}

ul#pri.nav:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: rgb(180, 221, 180);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

ul.nav li {
  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;
  margin-right: 5px;
  font-family: 'Arial Rounded MT';
  color: #fff;
  max-width: 100px;
  text-align: center;
  padding: 20px;
  display: inline-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;
}

ul.nav#pri li a {
  text-decoration: none;
  color: #fff;
}

ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
  font-family: 'Arial Rounded MT';
  color: #a67cd5;
}

.nav#pri li:hover ul {
  color: #2b95b2;
}

ul.nav#sec {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  top: 65px;
  right: 0;
}
ul.nav#pri li:hover ul.nav#sec {
display: block;
}

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;
}

＆＃13;

<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">
          <li class="active"><a href="AfterLogin.aspx">Home</a></li>
          <li><a href="rubrics.aspx">Rubrics</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-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>

＆＃13;

Answer 4

首先删除 ul.nav 元素的高度，并将 ul＃pri.nav 的显示属性设置为内嵌块。

ul#pri.nav {
    margin-left: 0px;
    z-index: -1;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    text-decoration: none;
    width: 97%;
    display: inline-block;
    border-bottom: 10px solid rgb(180,221,180);
}

如何在菜单上放置菜单列表项？

4 个答案: