当用户第一次访问网站时，隐藏的li（例如Space 01，Space 02）会在高度上展开。
用户刷新浏览器后，#cssmenu {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 13px;
line-height: 26px;
text-align: left;
}
#cssmenu > ul {
width: auto;
list-style-type: none;
padding: 0;
margin: 0;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
#cssmenu > ul li#responsive-tab {
display: none;
/* Hide for large screens */
}
#cssmenu > ul li {
display: inline-block;
border-right: 1px solid #F1F1F1;
*display: inline;
zoom: 1;
}
#cssmenu > ul li.right {
float: right;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
display: block;
}
#cssmenu > ul li.has-sub ul {
display: none;
width: 250px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block;
border-bottom: 1px solid #f1f1f1;
}
#cssmenu > ul li.has-sub > a {
background-image: url('caret.png');
background-repeat: no-repeat;
background-position: 90% -330%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
background: #009FDA url('caret.png') no-repeat;
background-position: 90% 430%;
}
#cssmenu > ul li a {
display: block;
padding: 12px 24px 11px 17px;
text-decoration: none;
color: #747474;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
background: #009FDA;
color: #fff;
}
@media (max-width: 600px) {
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul li#responsive-tab {
display: block;
}
#cssmenu > ul li#responsive-tab a {
background: url('images/menu.png') no-repeat;
background-position: 95% -35%;
}
#cssmenu > ul li#responsive-tab a:hover {
background-color: #009FDA;
background-position: 95% -35%;
}
#cssmenu > ul li {
display: none;
}
#cssmenu > ul li.right {
float: none;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub ul {
display: block;
position: static;
width: 100%;
background: #ffffff;
border: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block !important;
}
#cssmenu > ul li.has-sub ul li a span {
display: block;
}
#cssmenu > ul li.has-sub > a {
background-image: none;
}
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
#cssmenu > ul > li.collapsed {
display: inline-block !important;
*display: inline;
zoom: 1;
}
#cssmenu > ul ul li.collapsed {
display: block !important;
}
}的高度看起来会很好。
如何解决此问题？此问题仅存在于IE浏览器中。
<html>
<div id="cssmenu">
<ul>
<li class="has-sub">
<a href="#">
<span class="navi"><img src="http://www.kclibrary.org/sites/all/themes/kcplibraryzen/images/menu_items/menu-icon.png"></span>
<span>Test Dropdown</span></a>
<ul>
<li>
<a href="http://www.google.com"><span>Space 01</span></a></li>
<li class="last">
<a href="http://www.google.com"><span>Space 02</span></a></li>
</ul>
</li>
</ul></div>
</html>{{1}}＆＃13;