CSS菜单下拉对齐问题

时间：2015-02-26 14:12:11

标签： css

我正在为我的客户工作一个网站，由于下拉菜单在不同的宽度和浏览器中没有完全对齐，因此菜单太烦我了。我使用了hacks和CSSuseragent，但仍然存在一两个像素的问题。

在此处查看网站 - http://www.drearth.in 

CSS Code:

    @charset "UTF-8";
nav {
    text-align: center;
    margin: 0px;
    padding: 0px;
}
.menu-wrap {
    width: 100%;
    float: left;
    text-align: center;
}
.menu {
    width: 925px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-image: url(../images/line-0.jpg);
    background-repeat: no-repeat;
    background-position: center 40px;
    text-align: center;
    height: 46px;
    padding: 0px;
}
.table {
    display: table; /* Allow the centering to work */
    margin: 0 auto;
}
.menu ul {
    list-style: none;
    position: relative;
    /* [disabled]float: left; */
    padding: 0px;
    text-align: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.menu li {
    font-family: 'AkzidenzGroteskBE-Md', Arial, sans-serif;
    font-size: 15px;
    color: #d6d3cd;
    text-transform: uppercase;
    line-height: 40px;
    letter-spacing: normal;
    position: relative;
    margin: 0px;
    display: inline;
    float: left;
    height: 40px;
    padding: 0px;
    font-weight: normal;
}
.menu>li {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 0px;
    float: left;
    /* [disabled]margin-top: 50px; */
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.bud {
    display: block;
    height: 24px;
    width: 12px;
    background-image: url(../images/bud.jpg);
    background-repeat: no-repeat;
    float: left;
    margin-top: 3px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 5px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.menu li a {
    color: #d6d3cd;
    position: relative;
    /* [disabled]float: left; */
    display: block;
    text-decoration: none;
    padding-top: 0px;
    padding-right: 23px;
    padding-bottom: 0px;
    padding-left: 21px;
    margin: 0;
}
.menu li:hover {
    background-image: url(../images/line-1.jpg);
    background-repeat: no-repeat;
    background-position: right center;
}
.menu li:hover > a {
    letter-spacing: normal;
    color: #AECF43;
    background-image: url(../images/line-1.jpg);
    background-repeat: no-repeat;
    background-position: left center;
}
.menu li .visit {
    color: #AECF43;
}
ul.menu-hover {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    height: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 10000;
    margin: 0px;
    text-align: center;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 40px;
    padding-left: 0px;
}
.menu li:hover .menu-hover {
    visibility: visible;
    height: 100%;
    opacity: 1;
    background-image: none;
}
.menu-hover li {
    height: 100%;
    border-top-style: none;
    border-right-style: solid;
    border-left-style: solid;
    background-color: #00000D;
    border-right-color: #586922;
    border-left-color: #586922;
    border-right-width: 1px;
    border-left-width: 1px;
    background-image: url(../images/line-2.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    text-indent: 0px;
}
.menu-hover li:hover > a {
    letter-spacing: normal;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: none;
}
.menu-hover li:hover {
    background-image: url(../images/line-2.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
}
.menu-hover li a {
    color: #d6d3cd;
    font-size:18px;
    font-family:'AkzidenzGroteskBE-Cn', "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif !important;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    margin: 0px;
    letter-spacing: normal;
    /* [disabled]float: left; */
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: none;
    line-height: 43px;
}
.menu a span:after {
    content: "";
    /* [disabled]border-left: 3px solid transparent; */
    /* [disabled]border-right: 3px solid transparent; */
    /* [disabled]border-bottom: 3px solid #A5A5A5; */
    position: absolute;
    top: 25px;
    left: 47%;
    margin-top: 12px;
}
.menu li:hover span:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    /* [disabled]border-left: 3px solid transparent; */
    /* [disabled]border-right: 3px solid transparent; */
    /* [disabled]border-bottom: 3px solid #A5A5A5; */
}
.menu-hover li:first-child{
    border-radius: 0;
}
.menu-hover li:last-child {
    border-radius: 0 0 10px 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #586922;
    background-image: none;
}
.menu-hover li:last-child a {
    border-radius: 0 0 10px 10px;
    background-image: none;
}
.menu-hover a:after {
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#link1  {
    width: 189px;
}
#link2 {
    width: 131px;
}
#link3 {
    width: 166px;
}
#link4 {
    width: 110px;
}
#link5 {
    width: 134px;
}
#link6 {
    width: 97px;
}
#link7 {
}


/* Firefox Hack */
@-moz-document url-prefix() { 
 .menu li {
    font-size: 14px !important;
}
 .menu-hover li a {
    font-size: 13px !important;
}
 #link1 {
    width: 186px; !important;
}
 #link2 {
    width: 128px; !important;
}
 #link3 {
    width: 162px; !important;
}
 #link4 {
    width: 109px; !important;
}
 #link5 {
    width: 131px; !important;
}
 #link6 {
    width: 95px; !important;
}
}

.ua-opera #link1 {
    width: 189px;
}
.ua-opera #link2 {
    width: 131px;
}
.ua-opera #link5 {
    width: 135px;
}
.ua-opera #link6 {
    width: 96px;
}


.ua-safari .menu li {
    -webkit-font-smoothing: antialiased;
}
.ua-safari #link1 {
    width: 190px;
}
.ua-safari #link2 {
    width: 131px;
}
.ua-safari #link3 {
    width: 165px;
}
.ua-safari #link4 {
    width: 111px;
}
.ua-safari #link5 {
    width: 135px;
}

非常感谢任何帮助。

谢谢！

BK Suru

2 个答案:

答案 0 :(得分：0)

请添加右：0和左：0 .ul.menu-悬停此课程。和 .menu-hover li {width：100％}我认为它会正常工作

答案 1 :(得分：0)

我更改了.link1上的宽度定义，在Chrome中看起来不错。而且这样你就不必像现在这样使用reduntant类。 （。link1，.link2等）

定义：

width: 100%;
box-sizing: border-box;

由于2x 1px边框，box-sizing修复需要。

Chenk out：

enter image description here

相关问题
最新问题