html - CSS 下拉菜单问题，垂直对齐

Question

我正在尝试在我的列表中水平和垂直对齐我的顶部 anchor 标记。 http://jsfiddle.net/Hk7HC/

但我在尝试做这件事时遇到了噩梦。此外，我在“上市优势”右侧的下拉菜单跳到了列表的顶部……哎呀!任何帮助将不胜感激:)

 <div id = "menu">
        <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>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>
    </div>


/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 1024px;
    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 */
    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: #b95d73;
    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

为您的父级别 anchor 提供与导航高度相同的 line-height 使文本垂直居中。

行高:3.5em;

在此处查看更新的 jsfiddle:http://jsfiddle.net/Hk7HC/4/

还要修复弹出菜单，删除 top:auto 并像这样使用 margin-top:

#nav ul ul {
//removed top:auto
}

#nav li ul ul {
    left:15em;
    margin:8px 0 0 10px; //adjusted top-margin to 8px
}

请参阅垂直对齐和固定弹出窗口的工作示例:http://jsfiddle.net/Hk7HC/8/