为单个下拉菜单创建儿童子菜单

我需要一个仅在悬停时显示的下拉菜单。从下拉菜单列表中，我需要一个关于悬停在其中一个子项目上的进一步列表。为单个下拉菜单创建儿童子菜单

关键字/父母是受试者。 悬停（字上主题），它具有显示：
数学
英语
西班牙语
历史
科学
额外
商标

悬停在孩子额外，它必须显示3个其他项目：
艺术
运动
社区

我已经尝试了下拉菜单和下拉菜单，但是即使当我悬停在父主题上时，也会显示子菜单项（即艺术，体育和社区）。他们只能在悬停在Extra上时出现。

我是CSS挑战者，从网上下载的下载脚本中尽力而为。但似乎没有人能够解决这种情况。

下面是菜单的HTML。不知道我是否做对了。

<nav id="subjectsNav"> 
    <ul> 
     <li class="last"><a href="#" title="SUBJECTS">SUBJECTS</a> 

      <ul> 
       <li><a href="#" title="Maths">Maths</a> 
       </li> 
       <li><a href="#" title="English">English</a> 
       </li> 
       <li><a href="#" title="Spanish">Spanidsh</a> 
       </li> 
       <li><a href="#" title="History">History</a> 
       </li> 
       <li><a href="#" title="Science">Science</a> 
       </li> 
       <li><a href="#" title="EXTRA">EXTRA</a> 
       </li> 
       <ul id="extraNav"> 
        <li><a href="#" title="Arts">Arts</a> 
        </li> 
        <li><a href="#" title="Sports">Sports</a> 
        </li> 
        <li><a href="#" title="Community">Community</a> 
        </li> 
       </ul> 
       <li><a href="#" title="Marks">Marks</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav>

需要关于上述HTML和CSS的帮助。你的回答非常感谢。非常感谢您花时间。

来源

2013-03-10 user2153828

extraNav子必须是父列表项的内部：

<ul id="subjectsNav"> 
<li><a href="#" title="SUBJECTS">SUBJECTS</a> 

    <ul> 
     <li><a href="#" title="Maths">Maths</a> 
     </li> 
     <li><a href="#" title="English">English</a> 
     </li> 
     <li><a href="#" title="Spanish">Spanidsh</a> 
     </li> 
     <li><a href="#" title="History">History</a> 
     </li> 
     <li><a href="#" title="Science">Science</a> 
     </li> 
     <li><a href="#" title="EXTRA">EXTRA</a> 
      <ul> 
       <li><a href="#" title="Arts">Arts</a> 
       </li> 
       <li><a href="#" title="Sports">Sports</a> 
       </li> 
       <li><a href="#" title="Community">Community</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#" title="Marks">Marks</a> 
     </li> 
    </ul> 
</li> 
</ul>

CSS：

/* Main */ 
#subjectsNav { 
    list-style: none; 
} 
#subjectsNav li { 
    width: 70px; 
    display: block; 
    float: left; 
    position: relative; 
} 
#subjectsNav li:hover > ul { 
    display: block; 
} 
/* Sub-menu */ 
#subjectsNav ul { 
    list-style: none; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    display: none; 
    position: absolute; 
    z-index: 99999; 
} 
#subjectsNav ul li { 
    float: none; 
    display: block; 
} 
#subjectsNav ul ul { 
    top: 0; 
    left: 70px; 
}

演示： http://jsfiddle.net/Bc2sv/

来源

2013-03-10 14:32:45 polybios

为单个下拉菜单创建儿童子菜单

回答

相关问题