MENU 2C oraz MENU 3C/3D - mają być krótsze

Question

Witam.

Chciałbym, aby:

1. MENU 2C było krótsze niż MENU 2B

2. MENU 3C/3D było krótsze niż MENU 3B

W praktyce ma to wyglądać w ten sposób:

[     MENU 2B     ]

   [  MENU 2C  ] ---> aby był odstęp od MENU 3A

[     MENU 3B     ]

   [  MENU 3C  ] ---> aby był odstęp od MENU 4A

   [  MENU 3D  ] ---> aby był odstęp od MENU 5A

Tu jest kod:

https://codepen.io/Krzysiek_39/pen/eYWNRvb

Zauważcie, że MENU 2C jest przyczepione do MENU 3A i nie wygląda to profesjonalnie.

Zauważcie również, że MENU 3C/3D są przyczepione do MENU 4A/5A i nie wygląda to profesjonalnie.

Byłoby super, gdyby pod MENU 2B ---> MENU 2C było po środku.

Byłoby super, gdyby pod MENU 3B ---> MENU 3C/3D było po środku.

Czy wiecie jak to zrobić ?

Będę bardzo wdzięczny za skuteczną pomoc.

Answer 1

Pomysł jest taki:

1. Odsuń submenu od głównego menu

.menu ul ul ul
{
	left: 103%;
	...
}

2.Dodaj klasę do pierwszego elementu listy rozwijanej submenu czyli menu2b, menu3b (wole dodawać klasy niż tworzyć rozbudowane selektory - specyficzność css)

...
<li class="first"><a href="#">MENU 2B</a></li>
...
<li class="first"><a href="#">MENU 3B</a></li>

3. Dodaj pseudo element z przodu i z tyłu

.first{
  position: relative;
}

.first:before,.first:after{
  position: absolute;
  left: -5px;
  top: 0;
  content:"";
  display: block;
  width: 5px;
  height: 35px;
  z-index: 99;
  font-size: 40px;
  background-color: #3299CC;
}
.first:after{
  left: 100%;
}

i gotowe :)

Comments

body
{
	background-color: #999999;
	font-family: Verdana;
	margin: 0;
	position: relative;
	height: 120vh;
}

.header-container
{
	background-color: #e53935;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 25vh;
}

.menu-container
{
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: 0;
	width: 90%;
}

.menu
{
	font-size: 16px;
}

.menu a
{
	background-color: #252525;
	color: #808080;
	text-align: center;
	display: block;
	margin: 0;
	text-decoration: none;
	border-left: 3px solid transparent;
}

.menu a:hover
{
	background-color: #000000;
	color: #3299CC;
	border-left: 3px solid #3299CC;
	text-decoration: none;
}

.menu ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	width: 100%;
}

.menu ul:after
{
	content: "";
	display: table;
	clear: both;
}

.menu li
{
	position: relative;
	float: left;
	line-height: 35px;
}

.menu ul ul
{
	position: absolute;
	display: none;
	padding-top: 15px;
	background-color: #252525;
	cursor: default;
}

.last-submenu
{
	position: relative;
}

.last-submenu:before, .last-submenu:after
{
	position: absolute;
	left: -5px;
	top: 0;
	content: "";
	display: block;
	width: 5px;
	height: 35px;
	z-index: 99;
	font-size: 40px;
	background-color: #3299CC;
}

.last-submenu:after
{
	left: 100%;
}

.menu li:nth-child(1)
{
	width: 17%;
	text-align: center;
}

.menu li:nth-child(1):hover
{
	width: 17%;
	text-align: center;
}

.menu li:nth-child(1) ul
{
	width: 100%;
}

.menu li:nth-child(1):hover ul
{
	width: 100%;
}

.menu li:nth-child(1) ul li
{
	width: 100%;
	text-align: center;
}

.menu li:nth-child(1):hover ul li
{
	width: 100%;
	text-align: center;
}

.menu_2-1
{
	width: 80% !important;
}

.menu_3-1
{
	width: 80% !important;
}

.menu ul ul ul
{
	left: calc(100% + 5px);
	top: 0;
	padding-top: 0;
}

.menu ul ul a:hover
{
	background-color: #000000;
	color: #99CC00;
	border-left: 3px solid #99CC00;
	text-decoration: none;
}

.menu ul ul ul a:hover
{
	background-color: #000000;
	color: #FF7F00;
	border-left: 3px solid #FF7F00;
	text-decoration: none;
}

div.menu li:hover
{
	cursor: pointer;
}

div.menu li:hover ul ul,
div.menu li li:hover ul ul,
div.menu li li li:hover ul ul,
div.menu li li li li:hover ul ul
{display: none;}

div.menu li:hover ul,
div.menu li li:hover ul,
div.menu li li li:hover ul,
div.menu li li li li:hover ul
{display: block;}

 

---

Już jest prawie idealnie.

Muszę wprowadzić 3 drobne poprawki:

1. Muszę pozbyć się niebieskiej pionowej linii po prawej stronie MENU 2B oraz MENU 3B.

2. Muszę także pozbyć się niebieskiej pionowej linii po lewej stronie MENU 2B oraz MENU 3B i zamiast niebieskiej nadać ten sam kolor co wyświetla sie pomiędzy MENU 2A/2B oraz MENU 3A/3B.

3. Po najechaniu kursorem na niebieską pionową linię po lewej stronie - muszę pozbyć się cursor: pointer i nadać w jego miejsce cursor: default.

Mam nadzieje, że da sie ogarnąć te 3 poprawki.

Wielkie dzięki za pomoc.

---

Zostawiłem niebieskie żeby było widać o co mi chodziło. Można wstawić cokolwiek. Nawet jakaś animacje , strzałkę, trójkąt wskazujący na główną kategorię, zrobić przeźroczyste tło, cokolwiek.

---

Domyśliłem sie.

---

@pablop76, 

Ja już dawno temu miałem tam strzałki umieszczone. Przy MENU 1 (po prawej stronie) mam umieszczoną strzałkę skierowaną w dół, natomiast przy MENU 2A/3A (po prawej stronie) mam umieszczoną strzałkę skierowaną w prawo.

Wielkie dzięki za ogarnięcie tego odstępu (5px) pomiędzy MENU 2A/2B oraz MENU 3A/3B.