Question

我遇到了4个问题，我目前的代码无法修复（每次我修复它会产生附带问题）： http://jsfiddle.net/88zNs/1/

徽标文字略低于（1或2px）菜单项
蓝色和红色DIV都应该具有80px的固定高度并且是垂直居中于#header DIV，高度为120px。但由于某种原因，蓝色和红色DIV的高度都是120px而我们不能看到黑色的#header DIV。
我的菜单项与红色DIV的左侧对齐，但我希望它们对齐向右侧（如果我想保持不变，则不能使用右侧浮动链接顺序（链接1，链接2，链接3）
子菜单项（sub-link1，sub-link2等）互相浮动，而我喜欢它们就像在正常的下拉菜单中一样

我知道这是一个很大的问题......非常感谢你的帮助

编辑：感谢salsaturion一切几乎已修复http://jsfiddle.net/88zNs/9/剩下的问题是由于浮动，

项目顺序现在的顺序错误：右

enter image description here

HTML:

<div id="header">
    <div class="logo">Logo</div>
    <ul class="drop_menu">
        <li><a href='#'>Link 1</a>

            <ul>
                <li><a href='#'>Sub Link 1</a>
                </li>
                <li><a href='#'>Sub Link 2</a>
                </li>
            </ul>
        </li>
        <li><a href='#'>Link 2</a>

            <ul>
                <li><a href='#'>Sub Link 1</a>
                </li>
                <li><a href='#'>Sub Link 2</a>
                </li>
                <li><a href='#'>Sub Link 3</a>
                </li>
                <li><a href='#'>Sub Link 4</a>
                </li>
            </ul>
        </li>
        <li><a href='#'>Link 3</a>

            <ul>
                <li><a href='#'>Sub Link 1</a>
                </li>
                <li><a href='#'>Sub Link 2</a>
                </li>
                <li><a href='#'>Sub Link 3</a>
                </li>
                <li><a href='#'>Sub Link 4</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS：

#header {
    width: 100%;
    height: 120px;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    display: table;
    background: #000;
        position: fixed;

}
.logo {
    background: aqua;
    display: table-cell;
    vertical-align: middle;
    left:0;
    height:80px;
}
/* ==========================================================================
   Site Navigation
   ========================================================================== */

/* CSSTerm.com Simple Horizontal DropDown CSS menu */
 .drop_menu {
    background:red;
    padding:0;
    margin:0;
    list-style-type:none;
    height:80px;
    right: 0;
    display: table;
    z-index: 3000;
       display: table-cell;
    vertical-align: middle;
    right: 0;
}
.red {
    background:red;
}
.green {
    background:green;
    height: 60px;
    -webkit-transition-duration: 400ms;
    -webkit-transition-function: linear;
}
.drop_menu li {
    display: table-cell;
    vertical-align: middle;
}
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}
/* Submenu */
 .drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover {
    position:relative;
    background:#5FD367;
}
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}
.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover {
    background:#005555;
}

.block {
    width:100%;
    height: 500px;
}

Answer 1

快速查看问题2，原因是因为表格单元格。以下应该具有相同的效果，并将div保持为80px的高度：

.logo {
background: aqua;
vertical-align: middle;
line-height: 80px; /* this is set to same height as the div */
left:0;
height:80px;
margin: 20px 0;
}

当我有机会时，会看看其他问题

编辑： 1）看不到问题 - 它们看起来都是一致的 2）如上所述 3和4）添加浮点数：右到.drop_menu li应解决这两个问题

嵌套DIV和对齐问题

1 个答案: