jquery 菜单错误在单击时显示 block 而不是内联

Question

我使用 jquery 创建了一个下拉菜单，它以内联方式显示，这是我希望它显示的方式，然后单击一次以显示其他选项。然而，一旦我点击链接，它似乎将 LI 标签放回 block 中。

有人知道为什么要这样做吗？

HTML

<!-- Navigation bar start -->

<div id="navbar">

    <!-- England nav bar start -->
    <li id="engmainnav"><a href="#">England</a>
    <ul id="engsubnav">
        <li class="engli"><? echo $this->Html->link('News', array('controller'=>'Premiership', 'action' =>'news')); ?></li>
        <li class="engli"><? echo $this->Html->link('Results/Fixtures', array('controller'=>'Premiership', 'action' =>'resultsfixtures')); ?></li>
        <li class="engli"><? echo $this->Html->link('Teams', array('controller'=>'Premiership', 'action' =>'teams')); ?></li>
        <li class="engli"><? echo $this->Html->link('Table', array('controller'=>'Premiership', 'action' =>'table'));?></li>

    </ul>
    </li>
    <!-- England nav bar end -->

    <!-- La liga nav bar start-->
    <li id="sanav"><a href="#">Italy</a>
    <ul id="sasubnav">
        <li class="sali"><? echo $this->Html->link('News', array('controller'=>'Italy', 'action' =>'news')); ?></li><br/>
        <li class="sali"><? echo $this->Html->link('Results/Fixtures', array('Italy'=>'Premiership', 'action' =>'resultsfixtures')); ?></li><br/>
        <li class="sali"><? echo $this->Html->link('Teams', array('controller'=>'Italy', 'action' =>'teams')); ?></li><br/>
        <li class="sali"><? echo $this->Html->link('Table', array('controller'=>'Seriea', 'action' =>'table'));?></li><br/>

    </ul>
    </li>



    </div>
    <!-- Navigation bar end -->

CSS

/* Navigation Style */
#navbar {
background-color: #000666;
margin: 0px 0px 0px 10px;
}

#engsubnav {
list-style: none;
margin:none;
display: none;

}

 #sasubnav{
 list-style: none;
margin:none;
display: none;
}

 .engli {
   margin: 0px 0px 0px -38px;
display:block;
 }


 li {
  list-style: none;
 margin: 0px 0px 0px 10px;
 display:inline;

  }

  ul{
display:inline;
 }

在此先感谢您的帮助

http://jsfiddle.net/Hm4ns/5/

Answer 1

您的 .engli 语句中有 display:block;(england 列表中的 LI 元素都有一个类'英语')。您的 UL 可能设置为内联，但 LI 是 block 状的，所以一旦它们在点击时显示，它们都会掉到新行。