Inline dropdown menu – CSS – Fórum – Programujte.com

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. 

Tak, ve FF je to pri zoom=100% zalomene pres 2 radky (myslim tim menu Kurzy a menu == 3 carky). Asi to mas tedy od zacatku spatne.

Pokud jsi chytry, pouzij tabulku.
Pokud se chces drbat s css, tak musis mit predstavu, co se deje. Treba bych zkusil nastavit vsemu margin:0; padding:0;, width, height, border:0, line-height nemenit, fontsize nemenit a vubec font. Font se nezvetsuje na pixely ale na EM, EX, pt, takze si treba nechat dostatecnou rezervu.
A vzdycky muzes pouzit pozicovani.

Ja nevim, ale podle mne, stejne potrebujes pro rozbaleni menu mit tam urcitou sirku. Tak bych proste natvrdo nastavil vsude stejnou. 

.x {width:1200px;} // 4x300
.x, .x div, .x ul, .x li, .x a {margin:0; padding:0; display: block;}
.x li, .x a {width:300px;}
.x {position: relative;}
.x .a, .x .b, .x .c, .x .d  {position:absolute;}
.x .a {left:0;}
.x .b {left:300px;} ...
<div class=x><ul><li class=a></li><li class=b></li>...</ul></div>

(netestovano)

test: https://jsfiddle.net/mpcj2b1z/

<div class=x><ul><li class=a></li><li class=b></li><li class=c></li><li class=d></li></ul></div>
<style>
.x {width:120px; height:30px; border:1px solid #f00;} 
.x, .x div, .x ul, .x li, .x a {margin:0; padding:0; display: block;}
.x li, .x a {width:30px;}
.x {position: relative;}
.x .a, .x .b, .x .c, .x .d  {position:absolute; background:#f00; opacity:0.3;width:20px;height:30px;}
.x .a {left:5px;}
.x .b {left:35px;} 
.x .c {left:65px;} 
.x .d {left:95px;} 
</style>