В большинстве браузеров работает отлично.
но в IE7, пожалуйста, проверьте скриншот , это действительно грязно.
- раскрывающееся меню не в правильном положении.
- пункты выпадающего меню не связаны между собой.
- текстовое поле поиска не в правильной позиции.
- кнопка отправки поиска - почему над кнопкой есть текст? ..
- закругленный угол (в любом случае менее важный)
пожалуйста, ознакомьтесь с демонстрацией меню здесь.
<style>
.header-bg {
background: url(img/header-bg.jpg) repeat-x top;
height: 420px;
}
body {
background: url(img/page-bg.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
}
.top-wrapper {
background: none;
margin: -430px auto 270px;
min-height: 150px;
padding: 10px 27px 0 27px;
width: 980px;
clear: both;
overflow: hidden;
}
.top-wrapper .top-menu {
background: #f1faf4;
border-right: 1px solid #81b030;
border-bottom: 1px solid #81b030;
border-left: 1px solid #81b030;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
padding: 10px 35px 8px 35px;
float: right;
}
.top-wrapper .top-menu li {
float: left;
padding: 8px 14px 10px 0;
margin: 0 14px 0 0;
border-right: 1px dotted #282828;
}
.top-wrapper .top-menu li a {
color: #282828;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.top-wrapper .top-menu li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li.search {
padding: 0 10px 0 0;
}
.top-wrapper .top-menu li.search input {
float: left;
border: none;
}
.top-wrapper .top-menu li.search input.search {
background: url(img/top-input-bg.png) no-repeat left;
width: 188px;
height: 34px;
font-size: 12px;
padding: 0 0 0 7px;
color: #9fa0a0;
}
.top-wrapper .top-menu li.search input.submit {
background: url(img/top-submit-bg.png) no-repeat left;
width: 27px;
height: 34px;
padding: 0;
text-indent: -9999px;
outline: none;
cursor: pointer;
}
.top-wrapper .top-menu li.fb-signin {
padding: 2px 0 0 0;
margin: 0;
border: none;
}
.top-wrapper .top-menu li.fb-signin a {
width: 90px;
height: 30px;
display: block;
outline: none;
cursor: pointer;
background: url(img/btn-fb-signin.png) no-repeat left;
text-indent: -9999px;
}
.top-wrapper .top-menu li.signedin {
padding: 2px 0 0 0;
margin: 0;
border: none;
}
.top-wrapper .top-menu li.signedin img {
display: inline-block;
margin: 0 10px 0 0;
vertical-align: top;
}
.top-wrapper .top-menu li.signedin a.menu {
display: inline-block;
margin: 10px 0 0 0;
}
/* REGULAR MENU DROPDOWN */
.top-wrapper .top-menu li ul {
display: none;
margin: 0;
padding: 10px 0 0 -50px;
margin: 0 0 0 -50px;
position: absolute;
top: 42px;
text-align: left;
width: 160px;
}
.top-wrapper .top-menu li ul li {
background: none repeat scroll 0 0 #F1FAF4;
border-bottom: 1px solid #b3c8ba;
border-right: none;
display: inline-block;
float: none;
margin: 0 0 0 -15px;
padding: 10px 0;
width: 160px;
position: relative;
z-index: 1000;
}
.top-wrapper .top-menu li ul li a {
color: #000 !important;
text-decoration: none;
padding: 0 0 0 15px;
}
.top-wrapper .top-menu li ul li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li:hover > ul {
background: none repeat scroll 0 0 transparent;
display: block;
margin: 0 0 0 0;
padding: 10px 0 0;
}
/* USER MENU DROPDOWN */
.top-wrapper .top-menu li.signedin ul {
display: none;
margin: 0;
padding: 10px 0 0;
position: absolute;
top: 42px;
text-align: left;
width: 200px;
}
.top-wrapper .top-menu li.signedin ul li {
background: none repeat scroll 0 0 #F1FAF4;
border-bottom: 1px solid #b3c8ba;
border-right: none;
display: inline-block;
float: none;
margin: 0;
padding: 10px 0;
width: 125px;
position: relative;
z-index: 1000;
}
.top-wrapper .top-menu li ul li.first .corner-left {
background: url(img/menu-corner-left.png) no-repeat center;
width: 6px;
height: 6px;
position: absolute;
left: -6px;
top: 0;
}
.top-wrapper .top-menu li ul li.first .corner-right {
background: url(img/menu-corner-right.png) no-repeat center;
width: 6px;
height: 6px;
position: absolute;
right: -6px;
top: 0;
}
.top-wrapper .top-menu li ul li.last {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
}
.top-wrapper .top-menu li.signedin ul li a {
color: #000 !important;
text-decoration: none;
padding: 0 0 0 10px;
}
.top-wrapper .top-menu li.signedin ul li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li.signedin:hover > ul {
background: none repeat scroll 0 0 transparent;
display: block;
margin: 0 0 0 0;
padding: 10px 0 0;
}
/* SEARCH MENU DROPDOWN */
.top-wrapper .top-menu li.search ul {
display: none;
margin: 0;
padding: 10px 0 0;
position: absolute;
top: 42px;
text-align: left;
width: 222px;
}
.top-wrapper .top-menu li.search input.search:focus {outline: none; border: none;}
}
.top-wrapper .top-menu li.search ul li {
background: none repeat scroll 0 0 #F1FAF4;
border-bottom: 1px solid #b3c8ba;
border-right: none;
display: inline-block;
float: none;
margin: 0;
padding: 10px 0;
width: 222px;
position: relative;
z-index: 1000;
}
.top-wrapper .top-menu li.search ul li a {
color: #000 !important;
text-decoration: none;
padding: 0 0 0 15px;
}
.top-wrapper .top-menu li.search ul li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li.search:hover > ul {
background: none repeat scroll 0 0 transparent;
display: block;
margin: 0 0 0 0;
padding: 10px 0 0;
}
</style>
ааа ....