Question

我正在使用此导航栏，我注意到我将标签更改为相互之间的均匀宽度，现在我的子菜单与主标签不对齐。如何让子菜单与各自的选项卡对齐？我的目标是使包含子菜单的红色矩形与其父选项卡的整个矩形对齐。例如，我希望“成员组1”与“成员”对齐。

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu {
  line-height: 1;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: red;
  background: -moz-linear-gradient(top, #333333 0%, red 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, red));
  background: -webkit-linear-gradient(top, #333333 0%, red 100%);
  background: -o-linear-gradient(top, #333333 0%, red 100%);
  background: -ms-linear-gradient(top, #333333 0%, red 100%);
  background: linear-gradient(to bottom, #333333 0%, red 100%);
  border-bottom: 2px solid red;
  width: auto;
  text-align: center;
}

#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%);
  color: #ffffff;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  padding: 19px 20px;
  text-decoration: none;
}

#cssmenu ul {
  list-style: none;
  display: inline-block;
  text-align: center;
  position: relative;
  width: 100%;
}

#cssmenu>ul>li {
  display: inline-block;
  float: left;
  margin: 0;
  width: 25%;
}

#cssmenu.align-center {
  text-align: center;
}

#cssmenu.align-center>ul>li {
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  color: #ffffff;
  font-size: 16px;
}

#cssmenu>ul>li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
  margin-left: -10px;
}

#cssmenu>ul>li:first-child>a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}

#cssmenu.align-right>ul>li:first-child>a,
#cssmenu.align-center>ul>li:first-child>a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

#cssmenu.align-right>ul>li:last-child>a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a {
  color: #ffffff;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}

#cssmenu .has-sub {
  z-index: 1;
}

#cssmenu .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}

#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}

#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
  font-size: 12px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}

#cssmenu .has-sub ul li:hover a {
  background: #e60000;
}

#cssmenu ul ul li:hover>a {
  color: #ffffff;
}

#cssmenu .has-sub .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}

#cssmenu .has-sub .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
}

#cssmenu .has-sub .has-sub ul li a:hover {
  background: #e60000;
}

#cssmenu ul ul li.last>a,
#cssmenu ul ul li:last-child>a,
#cssmenu ul ul ul li.last>a,
#cssmenu ul ul ul li:last-child>a,
#cssmenu .has-sub ul li:last-child>a,
#cssmenu .has-sub ul li.last>a {
  border-bottom: 0;
}

<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>

  <div id='cssmenu'>
    <ul>
      <li><a href='#'><span>Overview</span></a></li>
      <li class='active has-sub'><a href='#'><span>Members</span></a>
        <ul>
          <li class='has-sub'><a href='#'><span>Members Group 1</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 1</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 1.5</span></a></li>
            </ul>
          </li>
          <li class='has-sub'><a href='#'><span>Members Group 2</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 2</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 2.5</span></a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'><span>Files</span></a></li>
      <li class='last'><a href='#'><span>Bookmarks</span></a></li>
    </ul>
  </div>

</body>
<html>

Answer 1

制作宽度：100％;

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
}

＆＃13;

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu {
  line-height: 1;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: red;
  background: -moz-linear-gradient(top, #333333 0%, red 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, red));
  background: -webkit-linear-gradient(top, #333333 0%, red 100%);
  background: -o-linear-gradient(top, #333333 0%, red 100%);
  background: -ms-linear-gradient(top, #333333 0%, red 100%);
  background: linear-gradient(to bottom, #333333 0%, red 100%);
  border-bottom: 2px solid red;
  width: auto;
  text-align: center;
}

#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%);
  color: #ffffff;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  padding: 19px 20px;
  text-decoration: none;
}

#cssmenu ul {
  list-style: none;
  display: inline-block;
  text-align: center;
  position: relative;
  width: 100%;
}

#cssmenu>ul>li {
  display: inline-block;
  float: left;
  margin: 0;
  width: 25%;
}

#cssmenu.align-center {
  text-align: center;
}

#cssmenu.align-center>ul>li {
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  color: #ffffff;
  font-size: 16px;
}

#cssmenu>ul>li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
  margin-left: -10px;
}

#cssmenu>ul>li:first-child>a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}

#cssmenu.align-right>ul>li:first-child>a,
#cssmenu.align-center>ul>li:first-child>a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

#cssmenu.align-right>ul>li:last-child>a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a {
  color: #ffffff;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}

#cssmenu .has-sub {
  z-index: 1;
}

#cssmenu .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
}

#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}

#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
  font-size: 12px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}

#cssmenu .has-sub ul li:hover a {
  background: #e60000;
}

#cssmenu ul ul li:hover>a {
  color: #ffffff;
}

#cssmenu .has-sub .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}

#cssmenu .has-sub .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
}

#cssmenu .has-sub .has-sub ul li a:hover {
  background: #e60000;
}

#cssmenu ul ul li.last>a,
#cssmenu ul ul li:last-child>a,
#cssmenu ul ul ul li.last>a,
#cssmenu ul ul ul li:last-child>a,
#cssmenu .has-sub ul li:last-child>a,
#cssmenu .has-sub ul li.last>a {
  border-bottom: 0;
}

＆＃13;

<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>

  <div id='cssmenu'>
    <ul>
      <li><a href='#'><span>Overview</span></a></li>
      <li class='active has-sub'><a href='#'><span>Members</span></a>
        <ul>
          <li class='has-sub'><a href='#'><span>Members Group 1</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 1</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 1.5</span></a></li>
            </ul>
          </li>
          <li class='has-sub'><a href='#'><span>Members Group 2</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 2</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 2.5</span></a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'><span>Files</span></a></li>
      <li class='last'><a href='#'><span>Bookmarks</span></a></li>
    </ul>
  </div>

</body>
<html>

＆＃13;

Answer 2

您无法使用CSS将这些元素彼此对齐，因为它们具有text-align:center但文本长度不同。您必须离开text-align，但当然导航文字不会居中。

这是text-align:left;的代码段，但我认为它看起来更好。

＆＃13;

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu {
  line-height: 1;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: red;
  background: -moz-linear-gradient(top, #333333 0%, red 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, red));
  background: -webkit-linear-gradient(top, #333333 0%, red 100%);
  background: -o-linear-gradient(top, #333333 0%, red 100%);
  background: -ms-linear-gradient(top, #333333 0%, red 100%);
  background: linear-gradient(to bottom, #333333 0%, red 100%);
  border-bottom: 2px solid red;
  width: auto;
  text-align: center;
}

#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%);
  color: #ffffff;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  padding: 19px 20px;
  text-decoration: none;
}

#cssmenu ul {
  list-style: none;
  display: inline-block;
  text-align: center;
  position: relative;
  width: 100%;
}

#cssmenu>ul>li {
  display: inline-block;
  float: left;
  margin: 0;
  width: 25%;
}

#cssmenu.align-center {
  text-align: center;
}

#cssmenu.align-center>ul>li {
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  color: #ffffff;
  font-size: 16px;
}

#cssmenu>ul>li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
  margin-left: -10px;
}

#cssmenu>ul>li:first-child>a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}

#cssmenu.align-right>ul>li:first-child>a,
#cssmenu.align-center>ul>li:first-child>a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

#cssmenu.align-right>ul>li:last-child>a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a {
  color: #ffffff;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}

#cssmenu .has-sub {
  z-index: 1;
}

#cssmenu .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}

#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}

#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
  font-size: 12px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}

#cssmenu .has-sub ul li:hover a {
  background: #e60000;
}

#cssmenu ul ul li:hover>a {
  color: #ffffff;
}

#cssmenu .has-sub .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}

#cssmenu .has-sub .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
}

#cssmenu .has-sub .has-sub ul li a:hover {
  background: #e60000;
}

#cssmenu ul ul li.last>a,
#cssmenu ul ul li:last-child>a,
#cssmenu ul ul ul li.last>a,
#cssmenu ul ul ul li:last-child>a,
#cssmenu .has-sub ul li:last-child>a,
#cssmenu .has-sub ul li.last>a {
  border-bottom: 0;
}

#cssmenu>ul>li>a {
padding-left: 30px;
    text-align: left;
    }  
#cssmenu .has-sub ul li a  {
padding-left: 30px;
    text-align: left;
    }

＆＃13;

<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>

  <div id='cssmenu'>
    <ul>
      <li><a href='#'><span>Overview</span></a></li>
      <li class='active has-sub'><a href='#'><span>Members</span></a>
        <ul>
          <li class='has-sub'><a href='#'><span>Members Group 1</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 1</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 1.5</span></a></li>
            </ul>
          </li>
          <li class='has-sub'><a href='#'><span>Members Group 2</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 2</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 2.5</span></a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'><span>Files</span></a></li>
      <li class='last'><a href='#'><span>Bookmarks</span></a></li>
    </ul>
  </div>

</body>
<html>

＆＃13;

Answer 3

由于子菜单已经绝对定位，我将使用以下技巧来集中它：

#cssmenu .has-sub ul {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu {
  line-height: 1;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: red;
  background: -moz-linear-gradient(top, #333333 0%, red 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, red));
  background: -webkit-linear-gradient(top, #333333 0%, red 100%);
  background: -o-linear-gradient(top, #333333 0%, red 100%);
  background: -ms-linear-gradient(top, #333333 0%, red 100%);
  background: linear-gradient(to bottom, #333333 0%, red 100%);
  border-bottom: 2px solid red;
  width: auto;
  text-align: center;
}

#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%);
  color: #ffffff;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  padding: 19px 20px;
  text-decoration: none;
}

#cssmenu ul {
  list-style: none;
  display: inline-block;
  text-align: center;
  position: relative;
  width: 100%;
}

#cssmenu>ul>li {
  display: inline-block;
  float: left;
  margin: 0;
  width: 25%;
}

#cssmenu.align-center {
  text-align: center;
}

#cssmenu.align-center>ul>li {
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  color: #ffffff;
  font-size: 16px;
}

#cssmenu>ul>li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
  margin-left: -10px;
}

#cssmenu>ul>li:first-child>a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}

#cssmenu.align-right>ul>li:first-child>a,
#cssmenu.align-center>ul>li:first-child>a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

#cssmenu.align-right>ul>li:last-child>a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a {
  color: #ffffff;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}

#cssmenu .has-sub {
  z-index: 1;
}

#cssmenu .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}

#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}

#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
  font-size: 12px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}

#cssmenu .has-sub ul li:hover a {
  background: #e60000;
}

#cssmenu ul ul li:hover>a {
  color: #ffffff;
}

#cssmenu .has-sub .has-sub:hover>ul {
  display: block;
}

#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}

#cssmenu .has-sub .has-sub ul li a {
  background: red;
  border-bottom: 1px dotted #31b7f1;
}

#cssmenu .has-sub .has-sub ul li a:hover {
  background: #e60000;
}

#cssmenu ul ul li.last>a,
#cssmenu ul ul li:last-child>a,
#cssmenu ul ul ul li.last>a,
#cssmenu ul ul ul li:last-child>a,
#cssmenu .has-sub ul li:last-child>a,
#cssmenu .has-sub ul li.last>a {
  border-bottom: 0;
}

<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>

  <div id='cssmenu'>
    <ul>
      <li><a href='#'><span>Overview</span></a></li>
      <li class='active has-sub'><a href='#'><span>Members</span></a>
        <ul>
          <li class='has-sub'><a href='#'><span>Members Group 1</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 1</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 1.5</span></a></li>
            </ul>
          </li>
          <li class='has-sub'><a href='#'><span>Members Group 2</span></a>
            <ul>
              <li><a href='#'><span>Members Sub 2</span></a></li>
              <li class='last'><a href='#'><span>Members Sub 2.5</span></a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'><span>Files</span></a></li>
      <li class='last'><a href='#'><span>Bookmarks</span></a></li>
    </ul>
  </div>

</body>
<html>

中心导航 - 子菜单偏离中心

3 个答案: