How do I add curved corners to menu in css


Tags: html,css

Problem :

I want to curve the corners in css in .second-level-menu.

I tried to add in .second-level-menu and in .second-level-menu > li:

border-radius: 0px 0px 8px 8px; 
-moz-border-radius: 0px 0px 8px 8px; 
-webkit-border-radius: 0px 0px 8px 8px; 

/* Menu Styles */

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.third-level-menu > li {
  height: 30px;
  background: #999999;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}
.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  width: 150px;
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu li:hover > ul {
  /* On hover, display the next level's menu */
  display: inline;
}
/* Menu Link Styles */

.top-level-menu a
/* Apply to all links inside the multi-level menu */

{
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}
<ul class="top-level-menu">
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Services</a>
  </li>
  <li>
    <a href="#">Offices</a>
    <ul class="second-level-menu">
      <li><a href="#">Chicago</a>
      </li>
      <li><a href="#">Los Angeles</a>
      </li>
      <li>
        <a href="#">New York</a>
        <ul class="third-level-menu">
          <li><a href="#">Information</a>
          </li>
          <li><a href="#">Book a Meeting</a>
          </li>
          <li><a href="#">Testimonials</a>
          </li>
          <li><a href="#">Jobs</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Seattle</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>



Solution :

It works with border-radius, you just can't see it because the overlapping li elements. Setting overflow:hidden to .second-level-menu will cause the radius to show.

/* Menu Styles */

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.third-level-menu > li {
  height: 30px;
  background: #999999;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}
.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  border-radius:0px 0px 8px 8px;
  overflow:hidden;
}
.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  width: 150px;
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu li:hover > ul {
  /* On hover, display the next level's menu */
  display: inline;
}
/* Menu Link Styles */

.top-level-menu a
/* Apply to all links inside the multi-level menu */

{
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}
<ul class="top-level-menu">
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Services</a>
  </li>
  <li>
    <a href="#">Offices</a>
    <ul class="second-level-menu">
      <li><a href="#">Chicago</a>
      </li>
      <li><a href="#">Los Angeles</a>
      </li>
      <li>
        <a href="#">New York</a>
        <ul class="third-level-menu">
          <li><a href="#">Information</a>
          </li>
          <li><a href="#">Book a Meeting</a>
          </li>
          <li><a href="#">Testimonials</a>
          </li>
          <li><a href="#">Jobs</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Seattle</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>


    CSS Howto..

    How to pick with css multiple select tags that has at least one option selected?

    How to add code into a page with a lot of conflicting CSS, without using Scoped CSS?

    CSS sprite - showing part of another image when zooming

    List-style: how to hide that extra empty space

    How to change H3 color in bootstrap using CSS file

    How to use calc in CSS for mozilla firefox without position absolute

    How to make two tooltip ids independently close, and remember cookie?

    How to use CSS property position:fixed with top:50px and height:100%?

    How to center an input field in HTML / CSS / Bootstrap

    How to create this type of window,as described in the attached picture with HTML,CSS? [closed]

    How to add css library to project generated with angular-cli@webpack

    How to write page specific CSS in backbone js

    How to make the css affect the new content loaded by jquery?

    How to apply css to an iframe

    How to make text on the same line different font without using extra divs?

    How to use custom css file for layout of a module in Yii2

    Rails: how to style submit tag with custom css

    How to find a first td in a tr using tr class name in CSS? [duplicate]

    With css, how to ensure wrap on span boundary?

    How can I use JQ to pick out a parent whose child is hr.strong?

    html - how to make images stay on certain part of background

    How to make dynamic picture boxes with text on bottom with css?

    How to: Illustrator graphic to web animation [closed]

    How to apply CSS style to a Sibling Label field of a Div?

    How to exclude the container from this javascript code?

    How to select the first paragraph in a div with a specific class (CSS 2)

    How to make a colorful gradient glow around your input-box?

    slideshow banner without using flash

    How to activate a CSS property according to a variation in PHP code or URL direction?

    How should I crop the image at client side using jcrop and upload it?