Ahoj,
mám vytvořené menu (viz. www.mkm.cz). Bohužel nedrží poslední položka v menu v řadě a při zoomování se menu rozhazuje. Bohužel už mě nenapadá, jak to vyřešit. Můžete mi někdo poradit?
/*Menu*/
.menu{
margin-top:40px;
width:100%;
min-width:900px !important;
padding-bottom:20px;
}
.menu ul {
list-style-type: none;
float:right;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu li {
float: left;
padding-bottom:12px;
}
.menu img {
float: left;
margin-left:0px;
margin-right:0px !important;
}
.menu li a, .dropbtn {
display: inline-block;
text-align: left;
padding-left: 80px;
text-decoration: none;
font-size:100%;
font-family: font;
}
.menu li a:hover, .dropdown:hover .dropbtn {
text-align:left;
position:relative;
z-index:2;
}
.menu li.dropdown {
display: inline-block;
}
.menu ul.dropdown-content {
display: none;
text-align: left;
background: #00cccc;
width: 200px;
min-height:150px;
padding-top: 110px;
margin-right: 55px;
top: 0px;
position: absolute;
font-size: 70%;
font-family: 'font';
z-index: 1 !important;
margin-left: 50px;
}
.menu ul.dropdown-content a {
color: #BCF1F3;
text-decoration: none;
display: block;
text-align: left;
width: 170px;
padding-left: 25px;
line-height: 1.1;
white-space: normal;
}
.menu ul.dropdown-content a:hover {
color:white;
position:relative; z-index:100;
}
.menu .dropdown:hover ul.dropdown-content {
display: block;
}
.menu a:hover .dropdown-content a {
color:white;
}
.menu .red {
color: #ff6600;
font-family: 'webfont';
}
.menu .green {
color: #00cccc;
font-family: 'webfont';
}
.menu a:hover .red {
color: white;
padding-top:20px;
background:url('img/top_link.gif');
font-family: 'webfont';
}
.menu a:hover .green {
color: white;
font-family: 'webfont';
}
.menu a.dropbtn.href-hovered .green {
color: white;
font-family: 'webfont';
}
.menu a.dropbtn.href-hovered .red {
color: white;
padding-top:20px;
z-index:2;
font-family: 'webfont';
}
.menu a:hover .red, a:hover .green {
color: white;
font-family: 'webfont';
}
Děkuji za rady, bohužel už mě nenapadá způsob, jak to vyřešit.