Question

我试图在中间垂直对齐我的顶级菜单项，我尝试了行高，但因为它们跨越2行，这将无法正常工作。此外，当我向列表添加第3级时，飞出菜单与对应的父列表项不对齐。 http://jsfiddle.net/pk8Lm/

HTML：

<ul id="nav">
            <li class="rhombusStart">&nbsp;</li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Market <br> Update</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Team Membership</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>FISC Info</span></a>
                <ul>
                    <li><a class="linkchild" href="#">About the FISC</a></li>
                    <li><a class="linkchild" href="#">International</a></li>
                    <li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.png" alt="&#9658;">Advantages of listing</a> 
                        <ul>
                            <li><a class="linkchild" href="#">Advantages of Listing</a></li>
                            <li><a class="linkchild" href="#">Products</a></li>
                        </ul>
                    </li>
                    <li><a class="linkchild" href ="#">Links</a></li>
                </ul>
            </li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Contact Us</span></a>
                 <ul>
                    <li><a class="linkchild" href="#">About US</a></li>
                     <li><a class="linkchild" href="#">Details</a></li>
                    <li><a class="linkchild" href="#">Location</a></li>
                  </ul>
            </li>
            <li class="rhombusEnd">&nbsp;</li>
        </ul>

CSS：

/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 640px;
    height: 3.5em;
    position: relative;
    top: 0;
    background-color: rgb(255,194,14);
    border: 1px solid rgb(140,51,61);
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:3.5em;
     background-color: rgb(255,194,14);
     display: table;
}

#nav ul {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     background-color: rgb(255,194,14);
}

#nav a.linkchild:link,
#nav a.linkchild:active,
#nav a.linkchild:visited {
    display:block;
    padding:0px 5px;
    text-decoration:none;
    background: #b95d73; /* Old browsers */
    background: -moz-linear-gradient(top, #b95d73 0%, #970e2e 0%, #9c1a38 0%, #910022 52%, #b95d73 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b95d73), color-stop(0%,#970e2e), color-stop(0%,#9c1a38), color-stop(52%,#910022), color-stop(100%,#b95d73)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* IE10+ */
    background: linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b95d73', endColorstr='#b95d73',GradientType=0 ); /* IE6-9 */
    color: white;
}

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
    display: block;
    padding: 0px 5px;
    text-decoration: none;
    color: inherit;
}

#nav li.rhombus:hover {
    background: -webkit-gradient(linear, center top, center bottom, from(#B95D73), color-stop(25%, #9C1A38), color-stop(50%, #970E2E), color-stop(75%, #910022), to(#B95D73)); 
    background: #b95d73; /* Old browsers */
    background: -moz-linear-gradient(top, #b95d73 0%, #9c1a38 25%, #970e2e 50%, #910022 75%, #b95d73 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b95d73), color-stop(25%,#9c1a38), color-stop(50%,#970e2e), color-stop(75%,#910022), color-stop(100%,#b95d73)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b95d73 0%,#9c1a38 25%,#970e2e 50%,#910022 75%,#b95d73 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b95d73 0%,#9c1a38 25%,#970e2e 50%,#910022 75%,#b95d73 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b95d73 0%,#9c1a38 25%,#970e2e 50%,#910022 75%,#b95d73 100%); /* IE10+ */
    background: linear-gradient(top, #b95d73 0%,#9c1a38 25%,#970e2e 50%,#910022 75%,#b95d73 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b95d73', endColorstr='#b95d73',GradientType=0 ); /* IE6-9 */
    color: white;
    text-decoration: none;
}

#nav a.linkchild:hover {
   background: rgb(118,0,18);
   color: white;
}

#nav > li {
    float:left;
    position:relative;
}

#nav > li.rhombus {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8em;
    text-align: center;
    height: 3.5em;
}
#nav > li.rhombusStart {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    background-color: rgb(255,194,14);
    width: 1em;
    height: 3.5em;

}
#nav > li.rhombusEnd {
    float: left;
    position: relative;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    width: 1em;
    height: 3.5em;
}   

li.rhombus > a span {
    -webkit-transform:skew(-35deg);
    -moz-transform:skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;     
 }

li.rhombus > ul {
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(-35deg);
    -moz-transform:translate(0,1px) skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
}

#nav ul {
    position:absolute;
    top:3.5em;
    left:0;
    width:15em;
    display:none;
}

#nav li ul a {
    width:15em;
    float:left;
    border-bottom: 1px, solid, rgb(145,0,34);
    border-top: 1px, solid, rgb(178,77,101);
    display: block;
    line-height: 2em;
    text-align: left;
    display: table-cell; 
}

#nav ul ul {
    top:auto;
}

#nav li ul ul {
    left:15em;
    margin:0px 0 0 10px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul {
    display:none;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul {
    display:block;
}

img.arrow 
{
    float: right;
    vertical-align: middle;
}

Answer 1

除非您需要支持IE6，否则请执行：

从#nav
将display：table添加到主li元素中，其中包含链接（要中心的那些）。
将display：table-cell和vertical-align：middle添加到li元素内的主链接。

然后用外表捣乱。

垂直对齐顶部列表元素，跨越2行和飞出以与下拉菜单项对齐

1 个答案: