• On my website — http://www.utrikesperspektiv.se — I use a menu plugin called Drop Down Menu. 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.