Проблема с выпадающим списком меню CSS

Я работаю над сайтом для своего клиента, и меню меня слишком беспокоит, так как выпадающее меню не выравнивается в разных ширинах и браузерах. Я использовал хаки и CSSuseragent, но все еще остается проблема пикселя или двух.Проблема с выпадающим списком меню CSS

Проверить сайт здесь - 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 Сура

источник

2015-02-26 BK Suru

Я изменил определения ширины на .link1, он отлично выглядит в Chrome. Более того, вам не нужно использовать повторно используемые классы, как сейчас. (.link1, .link2 и т.д.)

Определение:

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

В box-sizing починки потребности из-за границы 2x 1px.

Chenk из:

enter image description here

источник

2015-02-26 14:46:58 DNReNTi

Спасибо DNRenTi, но это только временное решение и работает на определенной ширине. При более низком разрешении он снова выравнивается. –

Вот исправление, примените эти определения на своих .link # classes: 'width: 100%; box-size: border-box; ' Он отлично работает в Chrome на любом разрешении. ;) Я редактирую свой первоначальный ответ. – DNReNTi

Эй, приятель ... это потрясающий человек ... спасибо, много приятель ... ты рок-звезда! –

Пожалуйста, добавьте права: 0 и осталась: 0 на .ul.menu-парить этот класс. и .menu-hover li {ширина: 100%} Я думаю, что он будет работать нормально

источник

2015-02-26 14:15:34 Kumar

Хорошо ... Я буду стараться, и пусть вы знаете ... –

Добавить левый: 0 слишком – Kumar

Эй Кумар ... Нету ... право: 0 или правый: 0! важный не работает. Я думаю, что это проблема с отображением шрифта или шириной/заполнением, которая становится нарушенной при изменении ширины. Любые подсказки? –

Проблема с выпадающим списком меню CSS

ответ

Смежные вопросы