3

Peguei um códido CSS de DropDown Menu e estou adaptando ele.

Até agora deu certo porém possui um problema por enquanto.

Quando você passa o mouse em um dos links principais, aparece um menu dropdown em baixo, com a cor vermelha e com um background hover preto....

Só que, tanho na primeira célula do menu quanto na última, não estou conseguindo encaixar o hover de fundo preto.

Tentei fazer o seguinte, mas sem sucesso:

	nav ul ul li a:hover(:first-child){
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	nav ul ul li a:hover(:last-child){
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
	}

Eis abaixo o código e o link para visualização:

@font-face {
	font-family: myFirstFont;
	src: url("DISTGCI.ttf");
}

body {
	font-family: myFirstFont;
	font-size: 22pt;
	font-weight: bold;
	text-shadow: 2px 2px black;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav {
	margin: 0;
	text-align: center;
}

nav ul {
	border-radius: 20px;
	border: 3px dashed black;
	background: linear-gradient(red,yellow);
	background: -moz-linear-gradient(red,yellow);
	background: -webkit-linear-gradient(red,yellow);
	padding: 0px 20px;
	list-style: none;
	position: relative;
	display: inline-table;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: red;
	}
	nav ul li:hover a {
		color: white;
	}
	nav ul li a {
		display: block;
		padding: 15px 20px;
		color: white;
		text-decoration: none;
	}
	
nav ul ul {
	background: red;
	padding: 0;
	position: absolute;
	top: 100%;
	min-width: 150px;
}
	nav ul ul li {
		float: none;
		position: relative;
	}
	nav ul ul li:not(:first-child) {
		border-top: 2px solid white;
	}
	nav ul ul li a {
		padding: 15px 20px;
		color: white;
	}
	nav ul ul li a:hover(:first-child){
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	nav ul ul li a:hover(:last-child){
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	nav ul ul li a:hover {
		background: black;
	}

nav ul ul ul {
	position: absolute;
	left: 100%;
	top: 0;
}
<body>

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">CSS</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">JavaScript &nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>
					<ul>
						<li><a href="#">jQuery</a></li>
						<li><a href="#">Angular</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Artigos</a>
			<ul>
				<li><a href="#">Node.js</a></li>
				<li><a href="#">MongoDB &nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>
					<ul>
						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Crie seu Proprio Menu</a></li>
	</ul>
</nav>

</body>

Link: CSS DropDown Menu

2 Respostas 2

4

Vc precisa declarar um border-radius especial apenas para o primeiro e último filho de cada sub menu, para isso vc pode usar first-child e last-child, sendo que o primeiro filho só tem border-radius nos cantos do top e o último filho só tem border-radius nos cantos do bottom

Usei cores diferentes para vc poder identificar qual elemento é qual. Acho que vai te ajudar a entender o que foi feito...

inserir a descrição da imagem aqui

Segue o código da imagem acima.

@font-face {
  font-family: myFirstFont;
  src: url("DISTGCI.ttf");
}

body {
  font-family: myFirstFont;
  font-size: 22pt;
  font-weight: bold;
  text-shadow: 2px 2px black;
}

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

nav {
  margin: 0;
  text-align: center;
}

nav ul {
  border-radius: 20px;
  border: 3px dashed black;
  background: linear-gradient(red,yellow);
  background: -moz-linear-gradient(red,yellow);
  background: -webkit-linear-gradient(red,yellow);
  padding: 0px 20px;
  list-style: none;
  position: relative;
  display: inline-table;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
}
  /* nav ul li:hover {
    background: red;
  } */
  nav ul li:hover a {
    color: white;
  }
  nav ul li a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
  }
  
nav ul ul {
  background: red;
  padding: 0;
  position: absolute;
  top: 100%;
  min-width: 150px;
}
  nav ul ul li {
    float: none;
    position: relative;
  }
  nav ul ul li:not(:first-child) {
    border-top: 2px solid white;
  }
  nav ul ul li a {
    padding: 15px 20px;
    color: white;
  }
  nav ul ul li a:hover(:first-child){
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  }
  nav ul ul li a:hover(:last-child){
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  nav ul ul li a:hover {
    background: black;
  }
  nav ul ul li:first-child a:hover, 
  nav ul ul ul li:first-child a:hover {
    background: green;
    border-radius: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  nav ul ul li:last-child a:hover {
    background: blue;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutoriais</a>
      <ul>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">JavaScript &nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>
          <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Angular</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Artigos</a>
      <ul>
        <li><a href="#">Node.js</a></li>
        <li><a href="#">MongoDB &nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Crie seu Proprio Menu</a></li>
  </ul>
</nav>

3

Em vez de usar :hover, defina as bordas como padrão para os elementos. Já economiza um evento no CSS.

Para isso, utilize o sinal > (elementos filhos diretos) e o :not(:first-child) na ul para pegar apenas as ul's internas da primeira ul da nav.

Basta retirar o que você colocou:

nav ul ul li a:hover(:first-child){
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
}
nav ul ul li a:hover(:last-child){
   border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
}

E substituir por isto:

nav ul:not(:first-child) > li:first-child,
nav ul:not(:first-child) > li:first-child > a{
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
}

nav ul:not(:first-child) > li:last-child,
nav ul:not(:first-child) > li:last-child > a{
   border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
}

Isso irá pegar todos as primeiras e últimas li's e todos os primeiros e últimos <a> de qualquer ul, desde que não seja o primeiro. Ou seja, você pode ter quantos subníveis de menu quiser que irá funcionar em todos.

Veja:

@font-face {
	font-family: myFirstFont;
	src: url("DISTGCI.ttf");
}

body {
	font-family: myFirstFont;
	font-size: 22pt;
	font-weight: bold;
	text-shadow: 2px 2px black;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav {
	margin: 0;
	text-align: center;
}

nav ul {
	border-radius: 20px;
	border: 3px dashed black;
	background: linear-gradient(red,yellow);
	background: -moz-linear-gradient(red,yellow);
	background: -webkit-linear-gradient(red,yellow);
	padding: 0px 20px;
	list-style: none;
	position: relative;
	display: inline-table;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: red;
	}
	nav ul li:hover a {
		color: white;
	}
	nav ul li a {
		display: block;
		padding: 15px 20px;
		color: white;
		text-decoration: none;
	}
	
nav ul ul {
	background: red;
	padding: 0;
	position: absolute;
	top: 100%;
	min-width: 150px;
}
	nav ul ul li {
		float: none;
		position: relative;
	}
	nav ul ul li:not(:first-child) {
		border-top: 2px solid white;
	}
	nav ul ul li a {
		padding: 15px 20px;
		color: white;
	}
nav ul:not(:first-child) > li:first-child,
nav ul:not(:first-child) > li:first-child > a{
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
}
nav ul:not(:first-child) > li:last-child,
nav ul:not(:first-child) > li:last-child > a{
   border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
}
	nav ul ul li a:hover {
		background: black;
	}
   
nav ul ul ul {
	position: absolute;
	left: 100%;
	top: 0;
}
<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">CSS</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">JavaScript &nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>
					<ul>
						<li><a href="#">jQuery</a></li>
						<li><a href="#">Angular</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Artigos</a>
			<ul>
				<li><a href="#">Node.js</a></li>
				<li><a href="#">MongoDB &nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>
					<ul>
						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Crie seu Proprio Menu</a></li>
	</ul>
</nav>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .