尝试向现有菜单添加 CSS 子菜单答案

【问题标题】：Trying to add a CSS sub menu to the existing one尝试向现有菜单添加 CSS 子菜单
【发布时间】：2014-09-30 05:06:27
【问题描述】：

我是菜单样式的新手，一直在尝试将子菜单添加到现有的下拉菜单中。

CSS如下

.menu_main {
float: left;
width: 60%;
}

#access .menu {
list-style: none;
font-weight: normal;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
margin-top: 0px;
}

#access .menu select {
border: 2px solid #eee;
padding: 10px 10px 10px 10px;
background-color: #f9f9f9;
color: #333;
}

#access .menu ul {
margin: 0px;
list-style-type: none;
position: relative;
text-align: left;
z-index: 1001;
height: 80px;
margin: 0px 0px 0px 0px;
float: left;
}

#access .menu ul li {
position: relative;
display: inline-block;
padding: 0;
z-index: 101;
margin: 0px 0px 0px 0px;
float: left;
background: url(../images/menu-divider.png) no-repeat right top;
}

#access .menu ul li a {
display: inline-block;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
color: #29A9E0;
margin: 0;
padding: 32px 16px 32px 18px;
text-align: center;
}

#access .menu ul li a:hover {
color: #999;
} 
#access .menu ul li a.active {
color: #999;
}
#access .menu ul li i {
margin-left: 2px;
}

#access .menu ul li ul {
position: absolute;
left: 0;
height: auto;
display: none;
visibility: hidden;
width: 194px;
padding: 0;
margin-top: -1px;
text-align: left;
background: #615c73;
border-top-left-radius: 0px;
}

#access .menu ul li ul li {
display: list-item;
float: none;
background: none;
padding: 0;
margin: 0;
height: auto;
}

#access .menu ul li ul li ul {
top: 0;
}

#access .menu ul li ul li a {
margin: 0;
border: none;
display: block;
padding: 14px 17px 14px 17px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
color: #fff;
background: #1B88B8;
width: 159px;
text-align: left;
border-bottom: 1px solid #FFF;
}

#access .menu ul li ul li a:hover,
#access .menu ul li ul li.active a,
#access .menu ul li ul li a.selected {
background: #544e67;
border-bottom: 1px solid #544e67;
color: #fff;
padding: 14px 17px 14px 17px;
}

#access .menu ul li ul li:last-child {
border: none;
}
* html #access .menu {
height: 1%;
}

.selectnav {display: none; width: 440px; margin-left: 20px;}

这是我很久以前设计的 HTML 代码，我正在使用它，我很着急，无法弄清楚为什么当我添加另一个级别时子菜单没有出现。

<div class="menu_main">

       <nav id="access" class="access" role="navigation">

        <div id="menu" class="menu">

            <ul id="tiny">

                <li><a href="index.html">Home</a></li>  

                <li><a href="#">Layouts <i class="fa fa-angle-down"></i></a>

                    <ul>
                        <li>
                        <ul style="top: 600px; visibility: visible; left: 0px; width: 194px;        display: block;">
                        <a href="http://gsrthemes.com/joosa/layout2/fullwidth/index.html">Creative</a>
                        </ul>

                        </li>


                        <li><a href="http://gsrthemes.com/joosa/layout3/fullwidth/index.html">Medical</a></li>
                        <li><a href="http://gsrthemes.com/joosa/layout4/fullwidth/index.html">Hosting</a></li>
                        <li><a href="http://gsrthemes.com/joosa/layout5/fullwidth/index.html">One Page</a></li>
                        <li><a href="http://gsrthemes.com/joosa/layout1/fullwidth/index.html">Corporate</a></li>
                    </ul>

                </li>

                <li><a href="#" class="active">Pages <i class="fa fa-angle-down"></i></a>

                    <ul>
                        <li><a href="about.html">About Page Style 1</a></li>
                        <li><a href="about-2.html">About Page Style 2</a></li>
                        <li><a href="services.html">Services Style 1</a></li>
                        <li><a href="services-2.html">Services Style 2</a></li>
                        <li><a href="full-width.html">Full Width Page</a></li>
                        <li><a href="left-sidebar.html">Left Sidebar Page</a></li>
                        <li><a href="right-sidebar.html">Right Sidebar Page</a></li>
                        <li><a href="left-nav.html">Left Navigation</a></li>
                        <li><a href="right-nav.html">Right Navigation</a></li>
                        <li><a href="404.html">404 Error Page</a></li>
                    </ul>

                </li>

                <li><a href="#">Features <i class="fa fa-angle-down"></i></a>

                    <ul>
                        <li><a href="elements.html">Elements</a></li>
                        <li><a href="typography.html">Typography</a></li>
                        <li><a href="pricing-tables.html">Pricing Tables</a></li>
                        <li><a href="columns.html">Page Columns</a></li>
                        <li><a href="testimonials.html">Testimonials</a></li>
                        <li><a href="faqs.html">FAQs</a></li>
                        <li><a href="tabs.html">Tabs</a></li>
                        <li><a href="#">5 Diffrent Layouts</a></li>                         
                        <li><a href="#">Custom BGs &amp; Colors</a></li>
                        <li><a href="#">PSD Files Included</a></li>                             
                        <li><a href="#">Clean &amp; Valid Code</a></li>
                        <li><a href="#">Useful Typo Elements</a></li>
                        <li><a href="#">Cross Browser Check</a></li>   
                    </ul>

                </li>

                <li><a href="#">Portfolio <i class="fa fa-angle-down"></i></a>

                    <ul>
                        <li><a href="portfolio-one.html">Single Image</a></li>
                        <li><a href="portfolio-two.html">2 Columns</a></li>
                        <li><a href="portfolio-three.html">3 Columns</a></li>
                        <li><a href="portfolio-four.html">4 Columns</a></li>
                        <li><a href="portfolio-five.html">Portfolio + Sidebar</a></li>
                        <li><a href="portfolio-six.html">Portfolio Fancy</a></li>
                    </ul>
                </li>

                <li><a href="#">Blog <i class="fa fa-angle-down"></i></a>

                    <ul>
                        <li><a href="blog.html">with Large Image</a></li>
                        <li><a href="blog-2.html">with Small Image</a></li>
                        <li><a href="blog-post.html">Single Post</a></li>
                    </ul>
                </li>

                <li><a href="contact.php">Contact</a></li>

            </ul>

        </div>

    </nav>

    </div>

【问题讨论】：

我尝试添加更多的 ul 和 li，但似乎没有出现
在某一时刻，您有一个a 作为ul 的子级。 ul 的唯一有效直接子代是 li。这可能是您的问题，也可能不是。

标签： css drop-down-menu navigation submenu multi-level

【解决方案1】：

您必须在悬停父元素时显示子元素。

#access .menu ul li:hover ul{display:block;}

我还注意到您同时使用了display:none 和visibility:hidden 来隐藏子菜单。这不是必需的。只需使用display:none，如下所示。

#access .menu ul li ul {
 position: absolute;
 left: 0;
 height: auto;
 display: none;
 width: 194px;
 padding: 0;
 margin-top: -1px;
 text-align: left;
 background: #615c73;
 border-top-left-radius: 0px;
}

DEMO

【讨论】：

【解决方案2】：

我为你的问题做了一个新的。
我认为this JSFiddle 有足够的理论来解决您的问题。

这是关键代码：

ul li:hover ul {
    display: block;
}

ul li ul {
margin: 0;
padding:0;
display: none;
position: absolute;
left: 10px;
background:#efefef;
}

【讨论】：