1

我正在设计一个菜单和子菜单

我正面临子菜单对齐的问题

菜单

我想让子菜单的末尾与“更多”选项的右边缘对齐，如箭头所指。

如果我使用正确：-somepx; 这将要求我在 chrome 中具有不同的对齐方式，它将是 10px，而在 safari 中将是 5px

是否有针对此的跨平台解决方案。

HTML代码是：

<div id=header>
    <ul id="menu">
        <li><a href="#">Get Closer</a></li>
            <li><a href="#">Know your team</a></li>
            <li><a href="#" class="more">More</a>
                <ul>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Case Studies</a></li>
                </ul>
            </li>
            <li><a href="#">Get in touch</a></li>
        </ul>
</div>

CSS代码是

#header #menu {
    margin-top: 25px;
    padding: 0px;
    float: right;
    list-style:none;
    clear: right;
}
#header #menu li {
    padding: 10px 15px 6px 15px;
    border: 1px solid #d2d2d2;
    position:relative;
    float: left;
    margin-left: -1px;
}
#header #menu li:hover { 
    background-color: #fff;
}
#header #menu li:first-child { 
    border-radius: 55px 0 0 55px;
    padding-left: 20px;
}
#header #menu li:last-child { 
    border-right: 1px solid #d2d2d2;
    border-radius: 0 55px 55px 0;
    padding-right: 20px;
}
#header #menu a {
    display:block;
    font: 20px 'Klavika Rg';
    text-transform: uppercase;
}
#header #menu .more:after {
    content: "{";
    font-family: 'WebSymbols';
    font-size: 22px;
    margin-left: 7px;
    line-height: 0;
}
/*--- DROPDOWN ---*/
#header #menu ul{
    list-style:none;
    position: absolute;
    right: 0px;
    margin: 0;
    visibility: hidden;
}
#header #menu ul li{
    position: relative; 
    float: left;
    margin-top: 0;
    padding: 6px 10px 1px 10px;
    margin-left: -1px;
}
#header #menu ul li:first-child { 
    border-radius: 15px 0 0 15px;
    padding-left: 20px;
}
#header #menu ul li:last-child { 
    border-right: 1px solid #d2d2d2;
    border-radius: 0 0 15px 0;
    padding-right: 20px;
}
#header #menu ul a{
    white-space:nowrap; 
    font: 15px 'Klavika Rg';    
    transition: all 0;
    -moz-transition: all 0; /* Firefox 4 */
    -webkit-transition: all 0; /* Safari and Chrome */
    -o-transition: all 0; /* Opera */
}
#header #menu li ul{ 
    margin-top: 6px;
    width: 500px;
}
#header #menu li:hover ul{ 
    visibility: visible;
}
4

2 回答 2

1

那么你所要做的就是将 floot 更改为 header：

#header #menu ul li{
    position: relative; 
    float: right; <------- Here
    margin-top: 0;
    padding: 6px 10px 1px 10px;
    margin-left: -1px; <------- change this to -1px for prefection. (:
}
于 2012-11-04T08:00:08.130 回答
0

解决这个问题以及跨浏览器验证可能遇到的类似问题的最佳方法是在项目中使用重置样式表。默认情况下，这会将所有浏览器的所有边距、填充等默认为 0，并消除大多数不一致之处。

要使用重置样式表，只需单击我提供的链接，将 css 从站点复制并粘贴到 notepad.txt 文件中，然后将其保存为 reset.css。将文件放在您的项目文件夹中，并像使用任何其他 .css 文件一样链接到它（假设您使用最佳实践）。

 <head>
     <link rel="stylesheet" type="text/css" href="reset.css">
 </head>

注意： reset.css 确实将所有内容设置为默认值，因此请务必通过它并删除您不想设置为 0 或无的任何内容。

于 2012-11-04T08:21:07.370 回答