CODEWITHSUNDEEP
htmlcss
Jammi
Jammi

Reputation: 177

How do stop the second element "li" (of the first ul) from having a bottom border

How do stop the second element "li" (of the first ul) from having a bottom border

I basically want to remove the extra border under the "sign in" li

#topcleanMenu ul {
  padding: 15px 4px 17px 0;
  list-style: none;
  padding-right: 60px;
}
#topcleanMenu ul li {
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
   background: #F5F5F5;
  cursor: pointer;
}
#topcleanMenu ul li:hover {
color: #e56804;
 background: #F5F5F5;
}
#topcleanMenu ul li ul {
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
color: #e56804;
  opacity: 0;
}
#topcleanMenu ul li ul li { 
   background: #F5F5F5;
  color: black;  
}

#topcleanMenu ul:nth-child(1) li:nth-child(2){
border-bottom: 1px solid rgb(199, 199, 199);
}

#topcleanMenu ul li:hover ul {
   border-left: 1px solid rgb(199, 199, 199);
 border-right: 1px solid rgb(199, 199, 199);
}

I attached a image to explain this: https://i.sstatic.net/q8hRt.jpg

Upvotes: 1

Views: 92

Answers (1)

Shiva
Shiva

Reputation: 6885

Just removed this class

 #topcleanMenu > ul:nth-child(2) > li:nth-child(2){
    border-bottom: 1px solid rgb(199, 199, 199);
    }

and added the following classes to achieve the desired result #topcleanMenu ul li ul li is used to create the right border and #topcleanMenu ul li ul li:last-child is used to apply the bottom border but only to the last li element of the list

#topcleanMenu ul li ul li:last-child  {
    border-bottom: 1px solid rgb(199, 199, 199);
}
#topcleanMenu ul li ul li  {
    border-right: 1px solid rgb(199, 199, 199);
}

JsFiddle: http://jsfiddle.net/Lt3Dh/8/

Upvotes: 1

Related Questions