0

我正在尝试在悬停时实现纯 CSS 菜单。一切正常，除了隐藏菜单并尝试在悬停时显示它......它不会发生。

这是我的 HTML：

         <ul id="nav-menu">
            <li><a href="#" class="first" id="p-menu">A</a></li>
                <ul class="submenu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#" class="last">H</a></li>
        </ul>

还有我的 CSS：

  #nav-menu {
   position: relative;
     }

       #header .submenu {
        width: 158px;
            height: 133px;
background: url(../images/submenu-bg.png) no-repeat;
position: absolute;
top: 49px; left: -11px;
display: none;

}

            #header .submenu li a {
display: block;
margin: 10px 66px 5px 20px;
border: 0 none;

}

        #header .submenu li a:hover {
display: block;
margin: 10px 66px 3px 20px;
border: 0 none;

}

           #nav-menu #p-menu:hover ul.submenu {
display: block!important;

}

任何帮助将不胜感激。

4

3 回答 3

1

像这样写：

<li id="p-menu">
 <a href="#" class="first">A</a>
   <ul class="submenu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
   </ul>
</li>
于 2012-04-11T10:19:01.810 回答
0

您的子菜单ul应该嵌套在您的li中，而不是在它之后。否则这是无效的 HTML。你也应该把你p-menu id的li而不是a.

改变：

<li><a href="#" class="first" id="p-menu">A</a></li>
<ul class="submenu">
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
</ul>

到：

<li id="p-menu"><a href="#" class="first">A</a>
   <ul class="submenu">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
   </ul>
</li>

-- 见示例 --

于 2012-04-11T10:19:55.297 回答
0

您的<ul>子菜单在<li>标签之外

于 2012-04-11T10:20:19.360 回答