Poniższy kod jest odpowiedzialny za menu ale teraz chcę go skrócić bo wiele rzeczy jest nie potrzebnych oraz usunąć before after oraz ujemne wartości. Jest ktoś chętny?
Kod
.art-bar {
position:relative;
}
.art-bar:before, .art-bar:after {
position:absolute;
top:0;
bottom:0;
content:' ';
background-repeat:repeat;
z-index:-1;
}
.art-bar:before {
left:0;
background-position: top left;
}
.art-bar:after {
right:0;
background-position: top right;
}
.art-nav
{
width:1000px;
margin:0 auto;
min-height: 51px;
z-index: 100;
margin-top: 6px;
margin-bottom: -4px;
}
.art-nav:before, .art-nav:after{
background-image: url('images/nav.png');
}
.art-nav:before{
right: 13px;
}
.art-nav:after{
width: 13px;
}
.art-nav-outer{
position:absolute;
width:100%;
}
.art-nav-wrapper
{
position: relative;
width:1000px;
margin:0 auto;
}
.art-nav-inner{
margin: 0 4px;
}
.art-nav-outer{
position:absolute;
width:100%;
}
.art-nav-wrapper
{
position: relative;
width:1000px;
margin:0 auto;
}
.art-nav-inner{
margin: 0 4px;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
ul.art-hmenu li:hover{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu li li{
float: none;
width: auto;
}
ul.art-hmenu li:hover>ul {
visibility: visible;
top: 100%;
}
ul.art-hmenu li li:hover>ul {
top: 0;
left: 100%;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-left-to-right {
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-right-to-left {
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.art-hmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
z-index: -1;
}
ul.art-hmenu ul ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
}
ul.art-hmenu ul ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
}
ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
right: auto;
left: 100%;
}
ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
left: auto;
right: 100%;
}
ul.art-hmenu{
position:relative;
padding: 4px 5px 4px 5px;
float: left;
}
ul.art-hmenu>li>a
{
position: relative;
display: block;
height: 43px;
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
padding: 0 40px;
line-height: 43px;
text-align: center;
}
ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('images/menuitem.png');
}
ul.art-hmenu>li>a:before
{
left: 0;
right: 0;
background-position: top left;
}
ul.art-hmenu>li>a:after
{
width: 0;
right: 0;
background-position: top right;
}
.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 14px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
ul.art-hmenu>li>a.active:before {
background-position: bottom left;
}
ul.art-hmenu>li>a.active:after {
background-position: bottom right;
}
ul.art-hmenu>li>a.active {
color: #845606;
}
ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before {
background-position: center left;
}
ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after {
background-position: center right;
}
ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{
color: #122326;
}
ul.art-hmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
left: -1px;
width:1px;
height: 43px;
background: url('images/menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li {
margin-left:1px;
}
ul.art-hmenu>li:first-child {
margin-left:0;
}
ul.art-hmenu>li:first-child:before{
display:none;
}
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 24px;
background-image: url('images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #F6AC2C;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 24px;
color: #0C2B32;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin:0;
padding: 0 8px;
}
.art-hmenu ul>li:first-child>a
{
border-top-width: 1px;
}
.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active
{
text-align: left;
text-decoration: none;
line-height: 24px;
color: #0C2B32;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin:0;
padding: 0 8px;
}
.art-hmenu ul li a:hover
{
color: #000000;
background-position: left bottom;
border-color: #F6AC2C;
border-top-width: 1px !important;
}
.art-hmenu ul li a.art-hmenu-before-hovered
{
border-bottom-width: 0 !important;
}
.art-hmenu ul li:hover>a
{
color: #000000;
background-position: left bottom;
border-color: #F6AC2C;
border-top-width: 1px !important;
}
position:relative;
}
.art-bar:before, .art-bar:after {
position:absolute;
top:0;
bottom:0;
content:' ';
background-repeat:repeat;
z-index:-1;
}
.art-bar:before {
left:0;
background-position: top left;
}
.art-bar:after {
right:0;
background-position: top right;
}
.art-nav
{
width:1000px;
margin:0 auto;
min-height: 51px;
z-index: 100;
margin-top: 6px;
margin-bottom: -4px;
}
.art-nav:before, .art-nav:after{
background-image: url('images/nav.png');
}
.art-nav:before{
right: 13px;
}
.art-nav:after{
width: 13px;
}
.art-nav-outer{
position:absolute;
width:100%;
}
.art-nav-wrapper
{
position: relative;
width:1000px;
margin:0 auto;
}
.art-nav-inner{
margin: 0 4px;
}
.art-nav-outer{
position:absolute;
width:100%;
}
.art-nav-wrapper
{
position: relative;
width:1000px;
margin:0 auto;
}
.art-nav-inner{
margin: 0 4px;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
ul.art-hmenu li:hover{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu li li{
float: none;
width: auto;
}
ul.art-hmenu li:hover>ul {
visibility: visible;
top: 100%;
}
ul.art-hmenu li li:hover>ul {
top: 0;
left: 100%;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-left-to-right {
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-right-to-left {
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.art-hmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
z-index: -1;
}
ul.art-hmenu ul ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
}
ul.art-hmenu ul ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
}
ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
right: auto;
left: 100%;
}
ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
left: auto;
right: 100%;
}
ul.art-hmenu{
position:relative;
padding: 4px 5px 4px 5px;
float: left;
}
ul.art-hmenu>li>a
{
position: relative;
display: block;
height: 43px;
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
padding: 0 40px;
line-height: 43px;
text-align: center;
}
ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('images/menuitem.png');
}
ul.art-hmenu>li>a:before
{
left: 0;
right: 0;
background-position: top left;
}
ul.art-hmenu>li>a:after
{
width: 0;
right: 0;
background-position: top right;
}
.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 14px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
ul.art-hmenu>li>a.active:before {
background-position: bottom left;
}
ul.art-hmenu>li>a.active:after {
background-position: bottom right;
}
ul.art-hmenu>li>a.active {
color: #845606;
}
ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before {
background-position: center left;
}
ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after {
background-position: center right;
}
ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{
color: #122326;
}
ul.art-hmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
left: -1px;
width:1px;
height: 43px;
background: url('images/menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li {
margin-left:1px;
}
ul.art-hmenu>li:first-child {
margin-left:0;
}
ul.art-hmenu>li:first-child:before{
display:none;
}
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 24px;
background-image: url('images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #F6AC2C;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 24px;
color: #0C2B32;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin:0;
padding: 0 8px;
}
.art-hmenu ul>li:first-child>a
{
border-top-width: 1px;
}
.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active
{
text-align: left;
text-decoration: none;
line-height: 24px;
color: #0C2B32;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin:0;
padding: 0 8px;
}
.art-hmenu ul li a:hover
{
color: #000000;
background-position: left bottom;
border-color: #F6AC2C;
border-top-width: 1px !important;
}
.art-hmenu ul li a.art-hmenu-before-hovered
{
border-bottom-width: 0 !important;
}
.art-hmenu ul li:hover>a
{
color: #000000;
background-position: left bottom;
border-color: #F6AC2C;
border-top-width: 1px !important;
}