Fit li:Dropdown Menu

Question

Fit li:Dropdown Menu

Asked 5 years, 5 months ago

Viewed 83 times

3

I got a CSS code from Dropdown Menu and I’m adapting it.

So far it has worked but has a problem for now.

When you mouse one of the main links, a dropdown menu appears below, with the red color and a black background....

Only, I’m in the first cell of the menu as in the last one, I’m not getting to fit the black background Hover.

I tried to do this, but to no avail:

	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;
	}

Below is the code and the link to view:

@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 answers

Browser other questions tagged css menu dropdown

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-07-16T16:28:15+00:00

You need to declare a border-radius special only for the first and last child of each sub menu, for this you can use first-child and last-child, and the first child only has border-radius in the corners of top and the last child has only border-radius in the corners of bottom

I used different colors so you could identify which element is which. I think it will help you understand what was done...

Follow the image code above.

@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>

by Sam • **79,597** points · Answer 2 · 2019-07-16T16:44:39+00:00

Instead of using :hover, sets the borders as default for the elements. Saves an event in CSS.

For this, use the signal > (direct children) and the :not(:first-child) in ul to catch only the internal ul’s of the first ul of the Nav.

Just take back what you put:

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;
}

And replace with this:

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;
}

This will take all the first and last li’s and all the first and last <a> of any ul, since it is not the first. That is, you can have as many menu sublevels as you want that will work at all.

Behold:

@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>