0

I've got a little issue with a inline menu, bug only appears in ie7. The only menu li that has another menu underneath it, is not inline with the rest, the rest seem to appear pushed down.

HTML

<div id="topnav">
<ul id="jsddm">
<li id="">
<a id="" href="/">Home</a>
</li>
<li id="">
<a href="/about.aspx">About</a>
<ul style="visibility: hidden;">
<li>
<a href="/about/board.aspx">Board</a>
</li>
<li>
<a href="/about/contact.aspx">Contact</a>
</li>
</ul>
</li>
<li>
<a href="/practices.aspx">Practices</a>
</li>
<li>
<a href="/how-we-work.aspx">How we work</a>
</li>
<li>
<a href="/patients.aspx">Patients</a>
</li>
<li>
<a href="/news-links.aspx">News &amp; Links</a>
</li>
<li>
<a href="/link.aspx">Link</a>
</li>
</ul>
</div>

CSS

    #jsddm
{   margin: 0;
    padding: 0;
    width: 100%;
}

#jsddm li
{   
    display: inline-block;
    list-style: none;
    font: 12px Tahoma, Arial;
    width: 100px;
    text-align: center;
}

*+html #jsddm li { display:inline }
* html #jsddm li { display:inline }

#jsddm ul li
{   
    display: block;
    font: 12px Tahoma, Arial;
}

#jsddm li ul
{   
    margin: 0 0 0 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 0px solid white;
    *margin: 0 0 0 -50px; /* IE 7 and below */
     /* margin: 0 0 0 -50px\9; IE 8 and below */
}

#jsddm ul li ul li
{           
    font: 12px Tahoma, Arial
}

#jsddm li a
{
    display: block;
    background: #009EE0;
    padding: 0;
    line-height: 28px;
    text-decoration: none;
    border-right: 0px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap;
    font-weight: bold;
    width: 100%;
}

#jsddm li a:hover
{   background: #1A4473}

#jsddm li ul li
{   
    float: none;
    *margin: -2px 0 0 0;
    *padding:0;
}

+html #jsddm li ul li {  }

#jsddm li ul li a
{
    width: auto;
    background: #009EE0
    font-weight: bold;
}

#jsddm li ul li a:hover
{   background: #0E559C }

It uses a jquery function to display the dropdownmenu but it does'nt effect the static html/css.

Thanks.

4

1 回答 1

0

IE7 不支持inline-block。尝试浮动其中的元素 - http://jsfiddle.net/SsDnd/1/

#jsddm li
{   
    display: inline-block;
    list-style: none;
    font: 12px Tahoma, Arial;
    width: 100px;
    text-align: center;
    *float: left;
}
于 2012-06-29T09:52:18.413 回答