Горизонтальная навигация CSS отображается как вертикальная в IE7 - PullRequest
Новая
       23

Горизонтальная навигация CSS отображается как вертикальная в IE7

0 голосов
/ 20 октября 2011

http://www.sage -wellness.com / nav.html

У меня возникла проблема с этим в IE7 - вся навигация верхнего уровня сложена вертикально, а не горизонтально

Вот CSS 

#navigation { width:800px; height:27px; background-image:url(images/navbg.gif); background-   repeat:no-repeat; margin-top:30px; }
#navigation ul { margin:0px; padding:0px;  font-family: Arial, Helvetica, sans-serif; font-size: 12px;line-height: 27px; display:inline; }
#navigation ul li { display:inline; float:left; list-style:none; height:27px; line-height:27px; position:relative; }
#navigation li a { color:#a1c301; text-decoration:none; padding-right:10px; padding-left:10px; }
#navigation  li a:hover, #navigation li:hover a { color:#fff; background-color: #91b000; display:inline-block; }

#navigation li ul { margin:0px; padding:0px;  display:none; position:absolute; left:0px; top:27px; background-color:#5b5b52;}
#navigation li:hover ul { display:block; width:150px;}
#navigation li li a { color:#a1c301; text-decoration:none; }
#navigation li li a:hover, #navigation li li:hover a { color:#fff; background-color: #91b000; width:130px; display:inline-block;}
#navigation li.top { }
#navigation li.top a:hover { }
#navigation ul.submenu { background-color:#5b5b52;  }
#navigation li.submenu { width:150px; border: 1px dotted #999; background-color:#5b5b52; }
#navigation .submenu li a { background:#5b5b52; }

, а вот HTML 

<div id="navigation">
<ul class="top">
<li class="top">&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li class="top"><a href="">Home</a></li>
<li class="top"><a href="">Acupuncture</a></li>
<li class="top"><a href="">Chinese Medicine</a>
  <ul class="submenu">
        <li class="submenu"><a href="">Herbal Medicine</a></li>
        <li class="submenu"><a href="">Other Modalities</a></li>
    </ul>
</li>
<li class="top"><a href="">Conditions Treated</a></li>
<li class="top"><a href="">About</a>
 <ul class="submenu">
        <li class="submenu"><a href="">Deb Valentin Bio</a></li>
        <li class="submenu"><a href="">FAQs</a></li>
        <li class="submenu"><a href="">Community Resources</a></li>

    </ul>
   </li>
 <li class="top"><a href="">Testimonials</a></li>
<li class="top"><a href="">Blog</a></li>
<li class="top"><a href="">Schedule an Appointment</a></li>
</ul>
</div>

1 Ответ

0 голосов
/ 20 октября 2011

ie7 не понимает: наведите курсор на элементы, кроме якорей, а также не имеет ни малейшего представления, что означает отображение: inline-block.проверить выпадающие списки для решения проблемы http://www.htmldog.com/articles/suckerfish/dropdowns/

...