Фиксированная позиция раскрывающегося списка и форматирование не работают

У меня есть адаптивная панель меню с раскрывающимся списком с именем three. Однако я не могу сделать его формат таким же, как и другой заголовок, и он перемещается при наведении курсора. Есть ли способ, чтобы заголовок формата «три» был таким же, как «один», «два», «четыре» и «пять»? А когда он висит, возможно ли, чтобы его положение было в фиксированном месте? Пожалуйста помоги. Я уже пробовал встроенный, но он тоже не работает. И, пожалуйста, запустите фрагмент в полноэкранном режиме.

<!DOCTYPE html>
<html >
<head>
	<meta charset = "UTF-8">
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">  
	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script> 
	<link href = "https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel = "stylesheet" />
 <link rel = "icon" href = "https://cdn.iconscout.com/icon/free/png-256/data-fiveence-46-1170621.png" type = "image/x-icon"> 
</head>

<style>
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
	 box-sizing: border-box;
}
.strips {
	 min-height: 100vh;
	 text-align: center;
	 overflow: hidden;
	 color: white;
}
 .strips__strip {
	 will-change: width, left, z-index, height;
	 position: absolute;
	 width: 20%;
	 min-height: 100vh;
	 overflow: hidden;
	 cursor: pointer;
	 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
 .strips__strip:nth-child(1) {
	 left: 0;
}
 .strips__strip:nth-child(2) {
	 left: 20vw;
}
 .strips__strip:nth-child(3) {
	 left: 40vw;
}
 .strips__strip:nth-child(4) {
	 left: 60vw;
}
 .strips__strip:nth-child(5) {
	 left: 80vw;
}
 .strips__strip:nth-child(1) .strip__content {
	 background:#29363B;
	 transform: translate3d(-100%, 0, 0);
	 animation-name: strip1;
	 animation-delay: 0.1s;
}
 .strips__strip:nth-child(2) .strip__content {
	 background: #EA495F;
	 transform: translate3d(0, 100%, 0);
	 animation-name: strip2;
	 animation-delay: 0.2s;
}
 .strips__strip:nth-child(3) .strip__content {
	 background: #F4837D;
	 transform: translate3d(0, -100%, 0);
	 animation-name: strip3;
	 animation-delay: 0.3s;
}
 .strips__strip:nth-child(4) .strip__content {
	 background: #FAA664;
	 transform: translate3d(0, 100%, 0);
	 animation-name: strip4;
	 animation-delay: 0.4s;
}
 .strips__strip:nth-child(5) .strip__content {
	 background: #99B998;
	 transform: translate3d(100%, 0, 0);
	 animation-name: strip5;
	 animation-delay: 0.5s;
}
 @media screen and (max-width: 760px) {
	 .strips__strip {
		 min-height: 20vh;
	}
	 .strips__strip:nth-child(1) {
		 top: 0;
		 left: 0;
		 width: 100%;
	}
	 .strips__strip:nth-child(2) {
		 top: 20vh;
		 left: 0;
		 width: 100%;
	}
	 .strips__strip:nth-child(3) {
		 top: 40vh;
		 left: 0;
		 width: 100%;
	}
	 .strips__strip:nth-child(4) {
		 top: 60vh;
		 left: 0;
		 width: 100%;
	}
	 .strips__strip:nth-child(5) {
		 top: 80vh;
		 left: 0;
		 width: 100%;
	}
}
 .strips .strip__content {
	 animation-duration: 1s;
	 animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	 animation-fill-mode: both;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 text-decoration: none;
}
 .strips .strip__content:hover:before {
	 transform: skew(-30deg) scale(3) translate(0, 0);
	 opacity: 0.1;
}
 .strips .strip__content:before {
	 <!-- content: ""; -->
	 position: absolute;
	 z-index: 1;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: white;
	 opacity: 0.05;
	 transform-origin: center center;
	 transform: skew(-30deg) scaleY(1) translate(0, 0);
	 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
 .strips .strip__inner-text {
	 will-change: transform, opacity;
	 position: absolute;
	 z-index: 5;
	 top: 50%;
	 left: 50%;
	 width: 70%;
	 transform: translate(-50%, -50%) scale(0.5);
	 opacity: 0;
	 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
 .strips__strip--expanded {
	 width: 100%;
	 top: 0 !important;
	 left: 0 !important;
	 z-index: 3;
	 cursor: default;
}
 @media screen and (max-width: 760px) {
	 .strips__strip--expanded {
		 min-height: 100vh;
	}
}
 .strips__strip--expanded .strip__content:hover:before {
	 transform: skew(-30deg) scale(1) translate(0, 0);
	 opacity: 0.05;
}
 .strips__strip--expanded .strip__title {
	 opacity: 0;
}
 .strips__strip--expanded .strip__inner-text {
	 opacity: 1;
	 transform: translate(-50%, -50%) scale(1);
}
 .strip__title {
	 display: block;
	 margin: 0;
	 position: relative;
	 z-index: 2;
	 width: 100%;
	 font-size: 2vw;
	 color: white;
	 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
 @media screen and (max-width: 760px) {
	 .strip__title {
		 font-size: 28px;
	}
}
 .strip__close {
	 position: absolute;
	 right: 3vw;
	 top: 3vw;
	 opacity: 0;
	 z-index: 10;
	 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	 cursor: pointer;
	 transition-delay: 0.5s;
}
 .strip__close--show {
	 opacity: 1;
}
 @keyframes strip1 {
	 0% {
		 transform: translate3d(-100%, 0, 0);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}
 @keyframes strip2 {
	 0% {
		 transform: translate3d(0, 100%, 0);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}
 @keyframes strip3 {
	 0% {
		 transform: translate3d(0, -100%, 0);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}
 @keyframes strip4 {
	 0% {
		 transform: translate3d(0, 100%, 0);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}
 @keyframes strip5 {
	 0% {
		 transform: translate3d(100%, 0, 0);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}

 body {
	 font-family: 'Abel', sans-serif;
	 -webkit-font-smoothing: antialiased;
	 text-rendering: geometricPrecision;
	 line-height: 1.5;
}
 h1, h2 {
	 font-weight: 300;
}
 .fa {
	 font-size: 30px;
	 color: white;
}
 h2 {
	 font-size: 36px;
	 margin: 0 0 16px;
}
 p {
	 margin: 0 0 16px;
}
p {
  background:
     linear-gradient(
       to right,
       var(--mainColor) 0%,
       var(--mainColor) 5px,
       transparent 5px
     );
    background-repeat: repeat-x;
    background-size: 100%;
  color: #000;
  padding-left: 10px;
  text-decoration: none;
}

p:hover {
  background:
     linear-gradient(
       to right,
       var(--mainColor) 0%,
       var(--mainColor) 5px,
       transparent
     );
}

:root {
  --mainColor: white;
}

.navbar-nav li:hover>.dropdown-menu {
	display: block;
	margin: 0;
	position: relative;
	z-index: 2;
	width: 100%;
	font-size: 1.5vw;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

</style>

<body>
 <section class = "strips">
  <article class = "strips__strip">
    <div class = "strip__content">
          <p class = "strip__title" onclick = "one()">one</a>
    </div>
  </article>
  
  <article class = "strips__strip">
    <div class = "strip__content">
      <p class = "strip__title" onclick = "#">two</a>
    </div>
  </article>
  
  <article class = "strips__strip">
    <div class = "strip__content">
		<div class = "navbar-collapse text-center" id = "navbarResponsive">
			<ul class = "navbar-nav ml-auto">
				<li class = "nav-item dropdown">
					<p class = "strip__title" style = "margin-left:-15px">three</p>
					  <div class = "dropdown-menu">
						<a class = "dropdown-item" onclick = "sdct()">two</a>
						<a class = "dropdown-item" onclick = "four()">four</a>
					  </div>
				</li>
			</ul>
		</div>
	</div>
  </article>
  
  <article class = "strips__strip">
    <div class = "strip__content">
     <p class = "strip__title" onclick = "#">four</a>
    </div>
  </article>
  
  <article class = "strips__strip">
    <div class = "strip__content">
      <p class = "strip__title" onclick = "">five</a>
    </div>
  </article>
  <i class = "fa fa-close strip__close"></i>
</section>
</body>
</html>

javascript html css

17.07.2019 08:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; /* add a width */
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-nav li:hover>.dropdown-menu {
    display: block;
    margin: 0;
    position: absolute; /*position is changes (relative --> absolute)*/
    z-index: 2;
    width: 100%;
    font-size: 1.5vw;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

Было бы лучше, если бы вы предоставили некоторое описание того, что делает код

— 17.07.2019 09:10

17.07.2019 09:08