I'm at a loss. I can't seem to get this to work using rounded-corners -webkit-rounded-corners, and -moz-rounded-corners. In FF6, the rounded corners show up for a second, till the menu finishes rolling out, and then they are replaced by the 90-degree corners.

In Safari, IE, Chrome they don't work at all.

I wouldn't mind them not working everywhere as long as they degrade gracefully, but I can't get them to work anywhere. If anyone has a cross-browser solution, or even sort-of-cross-browser solution, I'd love to hear about it. I've been throwing myself at this one for a while.

Here's my CSS:

body{
    background: url(/img/bg_topfade.png) repeat-x scroll 0 0 #BFBFBF;
    font-family:Verdana, Arial, Geneva, sans-serif;
    font-size:100%;
}

.pagenav-wrapper{
    margin-bottom:1.5em;
}

.onthispage{
    font-size:.75em;
    font-weight:bold;
    float:left; 
    line-height:1.5em;
}

.pagenav, .pagenav * {
    margin:         0;
    padding:        0;
    list-style:     none;
    line-height:1.5em;
    z-index:-5;
}
.pagenav {
    position:relative;
    top:0;
    left:9px;
    font-size:.875em!important;

z-index:500;
}
.pagenav li{
    /*line-height:  0;*/

}
.pagenav li a {
    display:block;
}
.pagenav ul {
    position:       absolute;
    top:            -999em;
    width:          180px; /* left offset of submenus need to match (see below) */
}

.pagenav ul li {
    width:          180px;
    /*line-height:1em;
    min-height:1.5em;*/

}
.pagenav ul li a{
    /**/

}

.pagenav li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}
.pagenav li {
    float:          left;
    position:       relative;
}
.pagenav a {
    display:        block;
    position:       relative;
    /*padding:      1em;*/
}
.pagenav ul a {
    padding:0;

}
.pagenav li:hover ul,
.pagenav li.sfHover ul {
    left:           0;
    top:            1.5em; /* match top ul list item height */
    z-index:        98;
}
ul.pagenav li:hover li ul,
ul.pagenav li.sfHover li ul {
    top:            -999em;
}
ul.pagenav li li:hover ul,
ul.pagenav li li.sfHover ul {
    left:           197px; /* match ul width */
    top:            0;
}
ul.pagenav li li:hover li ul,
ul.pagenav li li.sfHover li ul {
    top:            -999em;
}
ul.pagenav li li li:hover ul,
ul.pagenav li li li.sfHover ul {
    left:           197px; /* match ul width */
    top:            0;
}

/*** SKIN ***/
.pagenav {
    float:          left;
    /*margin-bottom:    1em;*/
}

.pagenav {

    font-size:.75em!important;  
}
.pagenav ul {

    font-size:1em!important;    
}
.pagenav a {
    /*border-left:  1px solid #fff;
    border-top:     1px solid #CFDEFF;*/
    text-decoration:underline;
    color:#1d3161;
}
.pagenav ul a {
    /*border-left:  1px solid #fff;
    border-top:     1px solid #CFDEFF;*/
    text-decoration:none;
}
.pagenav li li a, .pagenav li li a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #1d3161;
}
.pagenav li a, .pagenav li a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #1d3161;
}
.pagenav li a:hover{
    color:#1d3161;

}
.pagenav li {
    padding:0 0.75em 0 0.75em;
    height:1.5em;
    border-right:1px dotted gray;
}
.pagenav li li {
    background:     #fff;
    height:auto;
    padding:0;
    border-right:none;
}

.pagenav li li a{

    padding:0 0 0 0.75em;
}
.pagenav li li li {
    background:     #a5a7aa;
}
.pagenav li:hover, .pagenav li.sfHover,
.pagenav a:focus, .pagenav ul li a:hover, .pagenav a:active {
    background:     #fff;
    outline:        0;
    color:          #1d3161;
}

/*** arrows **/
.pagenav a.sf-with-ul {
    padding-right:  2em;
    min-width:      1px; /* trigger IE7 hasLayout so spans position accurately */
}
.pagenav .sf-sub-indicator {
    position:       absolute;
    display:        block;
    right:          .6em;
    top:            0; /* IE6 only */
    width:          10px;
    height: 11px;
    text-indent:    -999em;
    overflow:       hidden;
    background:     url('../img/arrows-ffffff.png') no-repeat -10px -110px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
.pagenav a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            0;
    background-position: -10px -97px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -97px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.pagenav ul .sf-sub-indicator { background-position:  -10px 0; }
.pagenav ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.pagenav ul a:focus > .sf-sub-indicator,
.pagenav ul a:hover > .sf-sub-indicator,
.pagenav ul a:active > .sf-sub-indicator,
.pagenav ul li:hover > a > .sf-sub-indicator,
.pagenav ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

.pagenav ul,
.pagenav ul:hover{
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;    
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background: url('../img/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;

And the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="http://www.ladottransit.com/scripts/sfhover.js"></script>
<script type="text/javascript" src="http://www.ladottransit.com/scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://www.ladottransit.com/scripts/hoverIntent.js"></script>
<script type="text/javascript" src="http://www.ladottransit.com/scripts/superfish.js"></script> 

<link href="/css/pagenav.css" rel="stylesheet" media="screen" />
<title>Untitled Document</title>


<script type="text/javascript"> 

    $(document).ready(function() { 
        $('ul.pagenav').superfish({ 
            delay:       500,                            // one second delay on mouseout 
            animation:   {height:'show'},  // fade-in and slide-down animation 
            speed:       'medium',                          // faster animation speed 
            autoArrows:  true,                           // disable generation of arrow mark-up 
            dropShadows: true                            // enable drop shadows 
        }); 
    }); 

</script>

</head>

<body>
<div class="pagenav-wrapper">
  <ul class="pagenav">
    <li><a href="#ridingwith">item 1</a></li>
    <li><a href="#fares">item 2</a>
      <ul>
        <li><a href="#dashfares">item 2.1</a></li>
        <li><a href="#comexpfares">item 2.2</a></li>
        <li><a href="#cityridefares">item 2.3</a></li>
        <li><a href="#wheretobuy">item 2.4</a></li>
        <li><a href="#acceptedfaremedia">item 2.5</a></li></ul></li>
    <li><a href="#transfers">item 3</a></li>
    <li><a href="#cleanair">item 4</a></li></ul>
</div>

</body>
</html>

1 answer

danwellman 5600
2
points
This was chosen as the best answer

The problem is that the rounded corners are defined on the ul, but the li elements within this have a background-color and no rounded corners, so their square corners cover up the rounded corners of their parent ul

Remove the background colour from the li elements in the submenus and apply it to the ul elements that have the rounded corners and you should be good :)

One reason why I dislike the superfish menus is that they are just way to complex - class names being added and removed all over the place, the use of display:none and visibility:hidden at the same time (I mean what is the point dammit! If you're using display:none, the benefits of visibility:hidden (e.g. it still takes up space in the DOM) are lost!). There's just no need...

Answered over 7 years ago by danwellman
  • Thank you @danwellman! Makes perfect sense, and I have to agree that superfish is overly complicated. Is there a simpler technique you know of that accomplishes the same thing? I do like that SF covers all the bases and offers extensibility like the pretty rollout and all, but I'm a big fan of simplicity as well, if only to spare my tiny brain the wear and tear. This technique worked but revealed another problem: the classes .sf-shadow and .pagenav are applied to the same ul, and the transparent background of the former (required to render the shadow) overrides the white background color of the ul. I'm not sure how to massage the tangled superfish code to resolve this conflict. Do you have any suggestions there? I'd sure like to have both drop shadows and rounded corners! Ugh, listen to me. Did I say I was a simplicity fan? matt kristiansen over 7 years ago
  • I wrote this tutorial just over a year ago, it should get you started: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/ It has rounded-corners, drop-shadows and rollout :) danwellman over 7 years ago