Вопрос о проблеме в теневом меню - PullRequest
Новая
       37

Вопрос о проблеме в теневом меню

0 голосов
/ 19 октября 2018

У тени моего меню есть проблема, и когда я щелкаю по элементу, открывающему подменю, у тени открытой подменю возникает проблема, и она не оказывает никакого влияния на право подменю, которое открывается для элемента внизв меню, что я могу сделать?Я слишком запутался, я ценю это, если вы получите код вместо ссылки, спасибо.

Код: 

ul {
/*  border: 1px solid #555;*/
  position:relative;
	
  font-family: 'Roboto', sans-serif;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFFFFF;
}


.borderm{
	border-right:#606060 0.25px solid;
	border-left:#606060 0.25px solid;
}


ul li {
	position:relative;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  display: block;
  position: relative;
  float: right;
  background: #FFFFFF;
}

/* This hides the dropdowns */


li ul { display: none;}

ul li a {
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: black;
}



/* Display the dropdown */


li:hover > ul {
  font-family: 'Roboto', sans-serif;
  display: block;
  position: absolute;
}

li:hover li { float: none;font-family: 'Roboto', sans-serif;}


li:hover li a:hover { background: #ff4718; color: white;font-family: 'Roboto', sans-serif;}

ul:hover ul{
	-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
            box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
	
	-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
       -moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
}
.main-navigation li ul li { border-top: 0;}

/* Displays second level dropdowns to the right of the first level dropdown */


ul ul ul {
	width: 105px;
  font-family: 'Roboto', sans-serif;
  right: 100.1%;
  top: 0;
}

/* Simple clearfix */



ul:before,
ul:after {
  font-family: 'Roboto', sans-serif;
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both;font-family: 'Roboto', sans-serif;}

.expand{font-size:24px;float: left;margin: -9px -5px;}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.effect1{
    -webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
	/*box-shadow: 1px 1px 0px grey;*/
}

.tri
{
    width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
}
<nav id="bg1" class="navbar">
<ul class="main-navigation">
  <li class="w3-center w3-animate-right effect1"><a href="#">Menu</p></a>
  <ul class="effect1" style="right: 0%;">
  <li class="w3-center w3-animate-right effect1" style="width: 150px;"><a href="#"><span class="expand">&#x25C2;</span>Front End Design</a>
    <ul class="effect1">
      <li class="w3-center w3-animate-right effect1"><a href="#">HTML</a></li>
      <li class="w3-center w3-animate-right effect1"><a href="#"><span class="expand">&#x25C2;</span>CSS</a>
        <ul class="effect1">
          <li class="w3-center w3-animate-right effect1"><a href="#">Resets</a></li>
          <li class="w3-center w3-animate-right effect1"><a href="#">Grids</a></li>
          <li class="w3-center w3-animate-right effect1"><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li class="w3-center w3-animate-right effect1"><a href="#"><span class="expand">&#x25C2;</span>Javascript</a>
        <ul class="effect1">
          <li class="w3-center w3-animate-right effect1"><a href="#">Ajax</a></li>
          <li class="w3-center w3-animate-right effect1"><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="w3-center w3-animate-right effect1"><a href="#">About Us</a></li>
                   </li>
                   </ul>
                   </li>
                    <!-- Header Nav End -->
                
            </nav>

1 Ответ

0 голосов
/ 19 октября 2018

Если у вас так много ULS в CSS, это будет решением 

ul ul ul {
    z-index: 1;
}
...