Title: Using border-radius with menu plugin
Last modified: August 19, 2016

---

# Using border-radius with menu plugin

 *  [utrikesperspektiv](https://wordpress.org/support/users/utrikesperspektiv/)
 * (@utrikesperspektiv)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/using-border-radius-with-menu-plugin/)
 * On my website — [http://www.utrikesperspektiv.se](http://www.utrikesperspektiv.se)—
   I use a menu plugin called [Drop Down Menu](http://goudendouche.com/plugins/dropdown-menu-plugin/).
   I’ve recently added a “border-radius” attribute to most of my elements to make
   their edges round in Firefox and other good browsers ;). I can’t, however, figure
   out how to make the unfolding child lists (those under “Artiklar” and “Utrikespolitiska
   Föreningen” för instance)to have rounded edges at the bottom.
 * The CSS of the menu plugin looks like this:
 *     ```
       #dropdownmenu {
       	display: block;
       	border: 0px;
       	padding: 10px 0px 0px 0px;
       	margin: 0px 0px 0px 0px;
       	z-index: 5;
       	position: relative;
       	height: auto;
       	font-size: 16px;
       	}
   
       #dropdownmenu ul {
       	width: 940px;
       	list-style-type: none;
       	padding: 0px 0px 0px 0px;
       	margin: 0px 0px 0px 0px;
       	z-index: 500;
       	position: absolute;
       	height: auto;
       	font-size: 20px;
       	-moz-border-radius: 3px;
       	-khtml-border-radius: 3px;
       	-webkit-border-radius: 3px;
       	border-radius: 3px;
       }
   
       #dropdownmenu li {
       	display: inline;
       	float: center;
       	position: relative;
       	text-align: left;
       	padding-top: 0px;
       	padding-bottom: 0px;
       	padding-right: 16px;
       	padding-left: 8px;
       	margin: 0px 0px 0px 0px;
       	height: auto;
       	font-size: 20px;
       	font-weight: bold;
       	}
   
       #dropdownmenu h2 {
       	font-size: 16px;
       	padding: 0;
       	margin: 0;
       	weight: ;
       }
   
       #dropdownmenu li ul {
       	width: auto;
       	height: 20px;
       	top: 100%;
       	left: 0px;
       	}
   
       #dropdownmenu li.LargeMenu ul {
       	width: 200px;
       	height: 20px;
       	top: 100%;
       	left: 0px;
       }
   
       #dropdownmenu li ul li {
       	text-align: left;
       	width: 220px;
       	height: auto;
       	min-height: auto;
       	display: block;
   
       	}
   
       #dropdownmenu li.LargeMenu ul li {
       	text-align: left;
       	width: 148px;
       	height: auto;
       	min-height: auto;
       	display: block;
       }
   
       #dropdownmenu a {
               font-size: 16px;
               font-weight: 300;
               font-family: Sans-Serif, Verdana, Arial;
               }
   
       }
   
       #dropdownmenu li li ul {
       	top: 0;
       	left: 0;
       }
   
       #dropdownmenu li li:hover ul {
       	left: 150px;
       }
   
       /* initialy hide all sub sidemenus */
       #dropdownmenu ul ul,
       #dropdownmenu ul li:hover ul ul,
       #dropdownmenu ul ul li:hover ul ul,
       #dropdownmenu ul ul ul li:hover ul ul,
       #dropdownmenu ul ul ul ul li:hover ul ul {
       	display: none;
       	position: absolute;
       }
   
       /* display them on hover */
       #dropdownmenu li:hover ul,
       #dropdownmenu ul li:hover ul,
       #dropdownmenu ul ul li:hover ul,
       #dropdownmenu ul ul ul li:hover ul,
       #dropdownmenu ul ul ul ul li:hover ul,
       #dropdownmenu ul ul ul ul ul li:hover ul {
         	display: block;
       }
   
       #dropdownmenu #PhpWebcontent {
       	display:none;
       }	
   
       /* define the consecutive colors */
   
       #dropdownmenu {
       	color: #181b39;
   
       }
   
       #dropdownmenu ul{
       color: #181b39;
       background: #181b39;
   
       }
   
       #dropdownmenu ul ul {
       color: #181b39;
       }
   
       #dropdownmenu ul li a:link, a:active, a:visited {
       color: #FFFFFF;
       }
   
       #dropdownmenu ul li a:active {
       color: #FFFFFF;
       }
   
       #dropdownmenu ul li a:visited {
       color: #FFFFFF;
       }
   
       #dropdownmenu ul li a:hover {
       color: #e9e624;
       }
   
       #dropdownmenu h2 {
       	color: #181b39;
       }
   
       #dropdownmenu li a:link, a:active, a:visited {
       	color: #FFFFFF;
       	}
   
       #dropdownmenu ul li a:hover {
       	color: e9e624;
       }
   
       #dropdownmenu ul li:hover {
       	color: e9e624;
       }
   
       #dropdownmenu ul li ul {
               color: #181b39;
           }
   
       #dropdownmenu ul li ul li {
       	background: #181b39;
   
       }
   
       #dropdownmenu ul li ul li:hover {
       	color: e9e624;
       	background: #181b39;
       }
   
       #dropdownmenu ul li ul ul li{
       	background: #FFFFFF;
   
       }
   
       #dropdownmenu ul li ul ul li:hover {
       	background: #FFFFFF;
       }
       ```
   
 * I’ve tried inserting the “border-radius” attribute into the “#dropdownmenu li”
   id, which should do the trick, but it make the edges of every list item, i.e.
   every child li, round. Inserting a border radius of 0 into the “li ul li” id 
   takes away all of the rounded edges, even the ones I want.
 * Needless to say, I’ve asked the developer, but he couldn’t help. Any ideas?
 * P.S. I’m somewhat of a n00b at WP, so be kind 😉

The topic ‘Using border-radius with menu plugin’ is closed to new replies.

## Tags

 * [border-radius](https://wordpress.org/support/topic-tag/border-radius/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 0 replies
 * 1 participant
 * Last reply from: [utrikesperspektiv](https://wordpress.org/support/users/utrikesperspektiv/)
 * Last activity: [17 years, 3 months ago](https://wordpress.org/support/topic/using-border-radius-with-menu-plugin/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics