Question

求CSS大神网页导航条鼠标经过后有背景有下拉菜单 效果如图

还有的没有二级子菜单的没有任何变化不要JS的只要CSS，一定是鼠标经过后自动出现的谢谢

Answer 1

这个其实很简单啊，用hover就行。

下面是例子：

css代码

<style type="text/css">
  body{background:#566;}
  ul{margin-left: 0;padding-left: 0}
  li{
    display:inline-block;
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
  }
  .menuitem{
    float: left;
    width: 120px;
    list-style: none;
  }
 .submenuitem{
    display: none;
    float: none;
    margin-left: 0;
    list-style: none;
    border: dotted #e00;
    border-width: 0 0 2px 0;
  }
  .menuitem:hover{
    background-color:#b00;
  }
  .menuitem:hover .submenuitem{
    display: block;
    background-color:#b00;
  }
</style>

HTML代码

<ul>
  <li class="menuitem">首页</li>
  <li class="menuitem">
    学校概况
    <ul>
      <li class="submenuitem">学校简介</li>
      <li class="submenuitem">现任领导</li>
      <li class="submenuitem">信息公开</li>
    </ul>
  </li>
  <li class="menuitem">机构设置</li>
</ul>

效果大概其就是你想要的那种，不用js，鼠标经过时自动出现

追问

需要在正下方，上面的效果偏左

Answer 2

一定要有js才行的