子菜单项重叠

Question

我的导航如下......

<div id="topnav">
  <ul>
  <li class="active"><a class="" href="#">About Us</a>
        <ul>
            <li><a href="link">About Our College</a></li>
            <li><a href="link">From Chairman's Desk</a></li>
            <li class="last"><a href="link">Governing Body</a></li>
        </ul>   
      </li>
      <li class=""><a class="" href="#">Admission</a>
        <ul>
            <li><a href="link">Admission Procedure</a></li>
            <li class="last"><a href="link">Fees Structure</a></li>
        </ul>
      </li>
  </ul>
</div>

和CSS如下

#topnav{height:75px; overflow:hidden;}
#topnav ul{display:block; width:100%; height:75px; margin:0; padding:0; list-style:none;}
#topnav ul li ul{display:none;}
#topnav ul li.active ul{display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}
#topnav li{display:block; float:left;}
#topnav li.last{margin-right:0;}
#topnav ul li a:link, #topnav ul li a:visited, #topnav ul li a:hover{display:block; float:left; height:25px; padding:10px 15px 0 15px; color:#333333; background-color:#E5E2C9;}
#topnav ul ul li a:link, #topnav ul ul li a:visited, #topnav ul ul li a:hover{float:left; height:auto; margin:13px 15px 0 0; padding:0 16px 0 0; color:#FFFFFF; background-color:#591434; border-right:1px solid #FFFFFF;}
#topnav ul ul li.last a{margin-right:0; padding:0; border-right:none;}
#topnav ul li.active a, #topnav ul li a:hover{color:#FFFFFF; background-color:#591434;}
#topnav ul li:hover > a {background-color:#591434;color:#ffffff;}
#topnav ul li:hover ul {display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}

问题是，当我悬停父母时，它会显示上一个项目的子菜单。像

我删除了.active类，即

#topnav ul li.active ul{display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}

但是菜单没有显示子菜单项并且显示为

我该怎么办？

更新

我已更正了我的html代码。所有li都位于ul下。

Answer 1

只需将background-color（此棕色）添加到您的孩子<ul> 目前它没有background-color，这就是为什么你可以通过它看到下面的项目。

#topnav ul li.active ul{
  display:block; 
  position:absolute; 
  top:35px; left:0; 
  width:100%; 
  height:40px;
  background-color: #591434;
}

Answer 2

 #horizontalmenu ul { 
        padding:1; 
        margin:1; 
        list-style:none; 
        } 
   #horizontalmenu li { 
        float:left;
        position:relative; 
        padding-right:100; 
        display:block; 
        border:4px solid #CC55FF; 
        border-style:inset; 
        } 
   #horizontalmenu li ul { 
        display:none; 
        position:absolute; 
        } 
   #horizontalmenu li:hover ul{ 
        display:block; 
        background:red; 
        height:auto; 
        width:8em; 
        } 
    #horizontalmenu li ul li{ 
        clear:both; 
        border-style:none;
        } 

<div id="horizontalmenu"> 
     <ul> <li><a href="#">News</a> 
         <ul> <li><a href="#">National</a></li> <li><a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul> 
         </li> 
         <li> 
         <a href="#">Technology</a> 
         <ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Neuro-Science</a></li> </ul> 
         </li> 
         <li> 
         <a href="#">Sports</a> 
         <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul> 
         </li> 
         <li> 
         <a href="#">Country</a> 
         <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> <li><a href="#">Pakistaan</a></li> </ul> 
         </li> 
         </ul> 
        </div>

请检查此链接： - http://mrbool.com/how-to-create-menu-with-submenu-using-css-html/26146

或

div.top-menu
    {
            width: 920px;
            margin: 0 auto;
    }

    div.top-menu ul.topmenu
    {
            margin: 0;
            height: 41px;
            background: #ccc;
            padding: 0;
            position: relative;
    }

    ul.topmenu li
    {
            list-style: none;
            float: left;
            padding: 12px 19px;
            min-height: 17px;
            position: relative;
    }

    ul.topmenu ul
    {
            width: 190px;
            position: absolute;
            z-index:999;
            top: 41px;
            left: 0;
            margin: 0;
            padding: 0;
            background: #dddddd;
            border: #c4c4c4 1px solid;
    }

    ul.topmenu ul li
    {
            float: none;
            padding: 3px 6px 3px 13px;
    }

    ul.topmenu a
    {
            color: #333;
            text-decoration: none;
    }

    ul.topmenu ul li a
    {
            display: inline-block;
            font-weight: normal;
            width: 90%;
    }

    ul.topmenu ul li:hover
    {
            background: #3399cc;
    }

    ul.topmenu ul ul
    {
            left: 100%;
            top: 0;
    }

    ul.topmenu div
    {
            cursor: pointer;
    }

    .topmenu-sub-item > .item
    {
            padding-left: 6px;
    }

    .topmenu-sub-item > .item > a
    {
            margin-top: 3px;
            margin-bottom: 3px;
    }

    ul.topmenu ul ul.to-the-left
    {
            left: -100.5%;
    }       

<div class="top-menu">
        <ul class="topmenu">
            <li class="topmenu-root-node">
            <a href="foobar.html">root item</a>
            <ul class="topmenu-submenu-container">
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item1">item 1</a>
                </div>
                </li>
                <li class="topmenu-sub-item nonempty">
                    <div class="item has-submenu">
                        <a class="topmenu-hassubmenu" href="/item2">item 2</a>
                    </div>
                    <ul class="topmenu-submenu-container to-the-right">
                        <li class="topmenu-sub-item nonempty">
                            <div class="item has-submenu">
                                <a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
                            </div>
                            <ul class="topmenu-submenu-container to-the-right">
                                <li class="topmenu-sub-item nonempty">
                                    <div class="item has-submenu">
                                        <a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
                                    </div>
                                </li>
                                <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem2">Sub sub item 2</a>
                                </div>
                            </li>
                            <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem3">Sub sub item 3</a>
                                </div>
                            </li>
                        </ul>
                        </li>
                    </ul>
                </li>
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item3">Item 3</a>
                </div>
                </li>
            </ul>
            </li>
        </ul>
    </div>

    <div class="top-menu" style="margin-top: 170px">
        <ul class="topmenu">
            <li class="topmenu-root-node">
            <a href="foobar.html">root item</a>
            <ul class="topmenu-submenu-container">
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item1">item 1</a>
                </div>
                </li>
                <li class="topmenu-sub-item nonempty">
                    <div class="item has-submenu">
                        <a class="topmenu-hassubmenu" href="/item2">item 2</a>
                    </div>
                    <ul class="topmenu-submenu-container to-the-right">
                        <li class="topmenu-sub-item nonempty">
                            <div class="item has-submenu">
                                <a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
                            </div>
                            <ul class="topmenu-submenu-container to-the-left">
                                <li class="topmenu-sub-item nonempty">
                                    <div class="item has-submenu">
                                        <a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
                                    </div>
                                </li>
                                <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem2">Sub sub item 2</a>
                                </div>
                            </li>
                            <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem3">Sub sub item 3</a>
                                </div>
                            </li>
                        </ul>
                        </li>
                    </ul>
                </li>
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item3">Item 3</a>
                </div>
                </li>
            </ul>
            </li>
        </ul>
    </div>

请检查此链接： - Parent li overlaps child li, having absolute uls, relative lis或 http://jsfiddle.net/VK7Mt/3/

Answer 3

问题已解决。

我已background:#591434 #topnav ul li:hover ul并已解决。

#topnav ul li:hover ul {display:block; position:absolute; top:35px; left:0; width:100%; height:40px;background:#591434;}

从 Code Spirit 得到了这个想法。但他将background属性添加到了#topnav ul li.active ul，#topnav ul li:hover ul

感谢大家解决问题。