Абсолютная проблема позиционирования с выпадающим подменю - PullRequest
Новая
       65

Абсолютная проблема позиционирования с выпадающим подменю

0 голосов
/ 15 апреля 2019

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

Код здесь:

https://codepen.io/CusterMonroe/pen/WWZZEV

.med-max-show li:not(.dropdown){
list-style-type: none;
background:#222F37;
padding: 3px 5px 3px 5px;
border-top: 1px solid black;
}

.med-max-show li a{
text-decoration: none;
color: white;
display: block;
white-space: nowrap;
}

.med-max-show{
text-align: center;
padding: 0 0 1px;
background-repeat:repeat-x;
background-image:-webkit-linear-gradient(to bottom,#3c3c3c 0,#222 100%);
background-image:-o-linear-gradient(to bottom,#3c3c3c 0,#222 100%);
background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0, #3c3c3c),to(#222));
background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);
background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);
border-top: 2px solid gold;
border-bottom: 2px solid gold;
}

.med-max-show > ul{
margin: 0 auto;
width: 70%;
}

.med-max-show .dropdown{
display: inline-block;
width: 30%;
background-repeat:repeat-x;
background-image:-webkit-linear-gradient(to bottom,#3c3c3c 0,#222 100%);
background-image:-o-linear-gradient(to bottom,#3c3c3c 0,#222 100%);
background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0, #3c3c3c),to(#222));
background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);
background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);
text-align: center;
padding: 6px 0 6px;
margin-top: 1px;
position: relative;
}

.med-max-show .dropdown:hover > a{
color: gold;
}

.med-max-show .dropdown-menu{
border-top: 1px solid black;
position: absolute;
top: 30px;
background: #222F37;
padding: 0px 0px 1px;
color: #fff;
font-size: 10pt;
width: 100%;
visibility: hidden;
-webkit-transition-property: visibility;
-o-transition-property: visibility;
transition-property: visibility;
-webkit-transition-duration: 1s;
     -o-transition-duration: 1s;
        transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
z-index: 99999999999999999 !important;
opacity: .95;
-webkit-box-shadow: 4px 3px 5px rgba(0,0,0,0.6);
        box-shadow: 4px 3px 5px rgba(0,0,0,0.6)
}

.med-max-show .dropdown:hover > ul{
visibility: visible;
}

.med-max-show .dropdown-menu a{
padding: 4px 50px 4px 50px;
margin: 1px 0 1px;
}

.med-max-show .dropdown-menu a:hover{
background-repeat:repeat-x;
background-image:-webkit-linear-gradient(to bottom,#f1ecec 0,#fffbfb 100%);
background-image:-o-linear-gradient(to bottom,#f1ecec 0,#fffbfb 100%);
background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0, #f1ecec),to(#fffbfb));
background-image:-webkit-linear-gradient(top,#f1ecec 0,#fffbfb 100%);
background-image:-o-linear-gradient(top,#f1ecec 0,#fffbfb 100%);
background-image:linear-gradient(to bottom,#f1ecec 0,#fffbfb 100%);
color: black;
}

.submenu-left{
position: relative;
display: block;
}

.submenu-right{
position: relative;
display: block;
}

.submenu-left ul{
position: absolute;
width: 100%;
right: 100%;
top: -1px;
visibility: hidden;
-webkit-transition-property: visibility;
-o-transition-property: visibility;
transition-property: visibility;
-webkit-transition-duration: 1s;
     -o-transition-duration: 1s;
        transition-duration: 1s;
display: inline-block;
}

.submenu-right ul{
position: absolute;
left: 100%;
top: -1px;
width: 108%;
margin-left: -23px;
visibility: hidden;
-webkit-transition-property: visibility;
-o-transition-property: visibility;
transition-property: visibility;
-webkit-transition-duration: 1s;
     -o-transition-duration: 1s;
        transition-duration: 1s;
display: block;
}

.submenu-right ul li a{
width: 100%:
}

.submenu-left > ul::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 70%;
  left: 15%;
  -webkit-box-shadow: 0 15px 30px black;
          box-shadow: 0 15px 30px black;
  bottom: 10px;
  z-index: -1;
}

.submenu-right > ul::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 70%;
  left: 15%;
  -webkit-box-shadow: 0 15px 30px black;
          box-shadow: 0 15px 30px black;
  bottom: 10px;
  z-index: -1;
}

.submenu-left ul li{
border-top: 2px solid black;
padding-bottom: 3px;
}

.submenu-right ul li{
border-top: 2px solid black;
padding-bottom: 3px;
}

.submenu-left:hover > ul{
visibility: visible;
}

.submenu-right:hover > ul{
visibility: visible;
}
        <li class="dropdown"><a href="javascript:void(0);">Custerism</a>
            <ul class="dropdown-menu">
                <li class="submenu-right"><a 
       href="javascript:void(0);">PHILOSOPHY</a>
                    <ul>
                        <li><a href="javascript:void(0);">CUSTERISM</a></li>
                    </ul>
                </li>
                <li><a href="javascript:void(0);">BEEKIN</a></li>
                <li class="submenu-right"><a href="javascript:void(0);">HELP 
         TOPICS</a>
                    <ul>
                        <li><a href="javascript:void(0);">DRAGONSPEAK</a></li>
                        <li><a href="javascript:void(0);">PATCHES</a></li>
                        <li><a href="javascript:void(0);">GENERAL 
        KNOWLEDGE</a></li>
                    </ul>
                </li>
                <li><a href="javascript:void(0);">NEWS</a></li>

Я почти уверен, что это как-то связано с моим CSS. Я просто не могу понять, что.

Ответы [ 3 ]

1 голос
/ 15 апреля 2019

прокомментировал margin-left: -23px; и добавил padding: 0; из .submenu-right ul

.med-max-show li:not(.dropdown) {
  list-style-type: none;
  background: #222F37;
  padding: 3px 5px 3px 5px;
  border-top: 1px solid black;
}

.med-max-show li a {
  text-decoration: none;
  color: white;
  display: block;
  white-space: nowrap;
}

.med-max-show {
  text-align: center;
  padding: 0 0 1px;
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(to bottom, #3c3c3c 0, #222 100%);
  background-image: -o-linear-gradient(to bottom, #3c3c3c 0, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3c3c3c), to(#222));
  background-image: -webkit-linear-gradient(top, #3c3c3c 0, #222 100%);
  background-image: -o-linear-gradient(top, #3c3c3c 0, #222 100%);
  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
  border-top: 2px solid gold;
  border-bottom: 2px solid gold;
}

.med-max-show>ul {
  margin: 0 auto;
  width: 70%;
}

.med-max-show .dropdown {
  display: inline-block;
  width: 30%;
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(to bottom, #3c3c3c 0, #222 100%);
  background-image: -o-linear-gradient(to bottom, #3c3c3c 0, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3c3c3c), to(#222));
  background-image: -webkit-linear-gradient(top, #3c3c3c 0, #222 100%);
  background-image: -o-linear-gradient(top, #3c3c3c 0, #222 100%);
  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
  text-align: center;
  padding: 6px 0 6px;
  margin-top: 1px;
  position: relative;
}

.med-max-show .dropdown:hover>a {
  color: gold;
}

.med-max-show .dropdown-menu {
  border-top: 1px solid black;
  position: absolute;
  top: 30px;
  background: #222F37;
  padding: 0px 0px 1px;
  color: #fff;
  font-size: 10pt;
  width: 100%;
  visibility: hidden;
  -webkit-transition-property: visibility;
  -o-transition-property: visibility;
  transition-property: visibility;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  z-index: 99999999999999999 !important;
  opacity: .95;
  -webkit-box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.6)
}

.med-max-show .dropdown:hover>ul {
  visibility: visible;
}

.med-max-show .dropdown-menu a {
  padding: 4px 50px 4px 50px;
  margin: 1px 0 1px;
}

.med-max-show .dropdown-menu a:hover {
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(to bottom, #f1ecec 0, #fffbfb 100%);
  background-image: -o-linear-gradient(to bottom, #f1ecec 0, #fffbfb 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1ecec), to(#fffbfb));
  background-image: -webkit-linear-gradient(top, #f1ecec 0, #fffbfb 100%);
  background-image: -o-linear-gradient(top, #f1ecec 0, #fffbfb 100%);
  background-image: linear-gradient(to bottom, #f1ecec 0, #fffbfb 100%);
  color: black;
}

.submenu-left {
  position: relative;
  display: block;
}

.submenu-right {
  position: relative;
  display: block;
}

.submenu-left ul {
  position: absolute;
  width: 100%;
  right: 100%;
  top: -1px;
  visibility: hidden;
  -webkit-transition-property: visibility;
  -o-transition-property: visibility;
  transition-property: visibility;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  display: inline-block;
}

.submenu-right ul {
  position: absolute;
  left: 100%;
  top: -1px;
  width: 108%;
  /* margin-left: -23px; */
  visibility: hidden;
  -webkit-transition-property: visibility;
  -o-transition-property: visibility;
  transition-property: visibility;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  display: block;
  padding: 0;
}

.submenu-right ul li a {
  width: 100%:
}

.submenu-left>ul::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 70%;
  left: 15%;
  -webkit-box-shadow: 0 15px 30px black;
  box-shadow: 0 15px 30px black;
  bottom: 10px;
  z-index: -1;
}

.submenu-right>ul::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 70%;
  left: 15%;
  -webkit-box-shadow: 0 15px 30px black;
  box-shadow: 0 15px 30px black;
  bottom: 10px;
  z-index: -1;
}

.submenu-left ul li {
  border-top: 2px solid black;
  padding-bottom: 3px;
}

.submenu-right ul li {
  border-top: 2px solid black;
  padding-bottom: 3px;
}

.submenu-left:hover>ul {
  visibility: visible;
}

.submenu-right:hover>ul {
  visibility: visible;
}
<nav class="med-max-show">
  <ul>
    <li class="dropdown"><a href="javascript:void(0);">In Character</a>
      <ul class="dropdown-menu">
        <li><a href="javascript:void(0);">PROFILE</a></li>
        <li><a href="javascript:void(0);">JOURNAL</a></li>
        <li class="submenu-left"><a href="javascript:void(0);">JOIN ME</a>
          <ul>
            <li><a href="javascript:void(0);">RP FORUM</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a href="">Out of Character</a>
      <ul class="dropdown-menu">
        <li><a href="javascript:void(0);">HANGOUTS</a></li>
        <li><a href="javascript:void(0);">GUESTBOOK</a></li>
      </ul>
    </li>
    <li class="dropdown"><a href="javascript:void(0);">Custerism</a>
      <ul class="dropdown-menu">
        <li class="submenu-right"><a href="javascript:void(0);">PHILOSOPHY</a>
          <ul>
            <li><a href="javascript:void(0);">CUSTERISM</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">BEEKIN</a></li>
        <li class="submenu-right"><a href="javascript:void(0);">HELP TOPICS</a>
          <ul>
            <li><a href="javascript:void(0);">DRAGONSPEAK</a></li>
            <li><a href="javascript:void(0);">PATCHES</a></li>
            <li><a href="javascript:void(0);">GENERAL KNOWLEDGE</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">NEWS</a></li>
      </ul>
    </li>
  </ul>
</nav>
0 голосов
/ 15 апреля 2019

ответ Жуана Лукаса почти 

.submenu-right ul {
  padding-inline-start: 0;
}

плюс 

.med-max-show > ul{
  padding-inline-start: 0;
}
0 голосов
/ 15 апреля 2019

У меня нет времени искать и объяснять, почему это происходит, но есть что-то, что связано с пользовательским агентом.

Кроме того, просто добавьте этот код CSS в свой файл: 

.submenu-right ul {
  padding-inline-start: 0;
}

Это приведет к сбросу стилей, созданных (возможно) агентом пользователя. Таким образом, вы получите желаемый стиль.

Кроме того, я бы порекомендовал вам изучить и поиграть с инструментами разработки браузеров, поскольку благодаря этим знаниям я смог легко найти и устранить ошибку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...