jquery菜单错误显示块而不是内联点击

时间:2012-07-06 21:50:24

标签: jquery css navigation

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

任何人都有任何关于为什么这样做的想法?

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/

1 个答案:

答案 0 :(得分:1)

您的display:block;语句中已.engli(英格兰列表中的LI元素都有'engli'类。)您的UL可能设置为内嵌,但LI是阻止的,因此一旦点击它们,它们就会全部删除。