Estoy trabajando en esta barra de navegación y noté que cambié las pestañas para que estuvieran a un ancho parejo y ahora mis submenús no se alinean con mis pestañas principales. ¿Cómo puedo hacer que el submenú se alinee con su pestaña respectiva? Mi objetivo es hacer que el rectángulo rojo que contiene el submenú se alinee con todo el rectángulo de su pestaña principal. Por ejemplo, quiero que el "Grupo de miembros 1" se alinee con los "Miembros".

#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>
1
Katie Meier 17 oct. 2017 a las 18:24

3 respuestas

La mejor respuesta

Hacer ancho: 100%;

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
}
#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;
}
<!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>
1
Hiren Vaghasiya 17 oct. 2017 a las 15:32

Como el submenú ya está en una posición absoluta, usaría el siguiente truco para centrarlo:

#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>
0
Blazemonger 17 oct. 2017 a las 15:31

Realmente no puede alinear estos elementos entre sí con CSS, ya que tienen text-align:center pero diferentes longitudes de texto. Tendría que girar a la izquierda text-align, pero, por supuesto, el texto de navegación no estará centrado.

Aquí hay un fragmento de código con text-align:left;, pero creo que se ve mejor tal como está.

#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;
    }
<!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>
1
Maharkus 17 oct. 2017 a las 15:40