下拉菜单

Question

小提琴拉链

我只想为我的网站做一个超级下拉菜单。上面的链接是我现在所做的。我只想让所有的主要标题内联。但它就像街区一样。我如何使标题"Loans", ""Leasing (Automotive)"在一行和其他列表在它们下面？

Answer 1

演示

css

body {
    font: 300 86% helvetica, arial, sans-serif;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 980px;
    min-height: 600px;
    margin: 0 auto;
}
nav {
    display: block;
    position: relative;
    width: 980px;
    height: 50px;
    margin: 0 auto;
    background: #8dc63f;
}
nav ul#menu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: 0;
}
nav ul#menu li {
    position: relative;
    display: inline-block;
}
nav ul#menu li a {
    display: block;
    height: 50px;
    font-size: 1em;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
}
nav ul#menu li a:hover, nav ul#menu li:hover > a {
    background: #333;
}
nav ul#menu li:hover > #mega {
    display: block;
}
#mega {
    position: absolute;
    top: 100%;
    left: 0;
    width: 920px;
    height: auto;
    padding: 20px 30px;
    background: #333;
    display: none;
}
ul#menu ul {
    float: left;
    width: 23%;
    margin: 0 2% 15px 0;
    padding: 0;
    list-style: none;
}
ul#menu ul li {
    display: block;
}
ul#menu ul li a {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    line-height: 1.3em;
    color: #888;
    text-decoration: none;
    padding: 6px 0;
}
ul#menu ul li:first-child a {
    font-size: 1.2em;
    color: #8dc63f;
}
ul#menu ul li a:hover {
    color: #fff;
    background: none;
}
ul#menu ul li:first-child a:hover {
    color: #fff;
}
/* clearfix */
 nav ul:after {
    content:".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
nav ul {
    display: inline-block;
}
html[xmlns] nav ul {
    display: block;
}
* html nav ul {
    height: 1%;
}
#content {
    padding: 30px 0;
}

html

<!-- begin wrapper -->
<div id="wrapper">
    <!-- begin nav -->
    <nav>
        <ul id="menu">
            <li><a href="#">Products & Services</a>

                <div id="mega">
                    <ul>
                        <li><a href="#">Loans</a>

                        </li>
                        <li><a href="#">Mortgage Loans</a>

                        </li>
                        <li><a href="#">SME Loans</a>

                        </li>
                        <li><a href="#">Revolving Loans</a>

                        </li>
                        <li><a href="#">Professional Loans</a>

                        </li>
                        <li><a href="#">Personal Loans</a>

                        </li>
                        <li><a href="#">Micro Loans</a>

                        </li>
                        <li><a href="#">Commercial Credit</a>

                        </li>
                    </ul>
                    <ul>
                        <li><a href="#">Leasing (Automotive)</a>

                        </li>
                        <li><a href="#">Three Wheeler Leasing</a>
                        </li>
                        <li><a href="#">Motorcyvle Leasing</a>
                        </li>
                        <li><a href="#">Motorcar Leasing</a>
                        </li>
                        <li><a href="#">Mini trucks Leasing</a>
                        </li>
                    </ul>
                    <ul>
                        <li><a href="#">Leasing (Automotive)</a>

                        </li>
                        <li><a href="#">Three Wheeler Leasing</a>
                        </li>
                        <li><a href="#">Motorcyvle Leasing</a>
                        </li>
                        <li><a href="#">Motorcar Leasing</a>
                        </li>
                        <li><a href="#">Mini trucks Leasing</a>
                        </li>
                    </ul>
                    <ul>
                        <li><a href="#">Leasing (Automotive)</a>

                        </li>
                        <li><a href="#">Three Wheeler Leasing</a>
                        </li>
                        <li><a href="#">Motorcyvle Leasing</a>
                        </li>
                        <li><a href="#">Motorcar Leasing</a>
                        </li>
                        <li><a href="#">Mini trucks Leasing</a>
                        </li>
                    </ul>
                    <ul>
                        <li><a href="#">Loans</a>

                        </li>
                        <li><a href="#">Mortgage Loans</a>

                        </li>
                        <li><a href="#">SME Loans</a>

                        </li>
                        <li><a href="#">Revolving Loans</a>

                        </li>
                        <li><a href="#">Professional Loans</a>

                        </li>
                        <li><a href="#">Personal Loans</a>

                        </li>
                        <li><a href="#">Micro Loans</a>

                        </li>
                        <li><a href="#">Commercial Credit</a>

                        </li>
                    </ul>
                    <ul>
                        <li><a href="#">Leasing (Automotive)</a>

                        </li>
                        <li><a href="#">Three Wheeler Leasing</a>
                        </li>
                        <li><a href="#">Motorcyvle Leasing</a>
                        </li>
                        <li><a href="#">Motorcar Leasing</a>
                        </li>
                        <li><a href="#">Mini trucks Leasing</a>
                        </li>
                    </ul>
                    <ul>
                        <li><a href="#">Leasing (Automotive)</a>

                        </li>
                        <li><a href="#">Three Wheeler Leasing</a>
                        </li>
                        <li><a href="#">Motorcyvle Leasing</a>
                        </li>
                        <li><a href="#">Motorcar Leasing</a>
                        </li>
                        <li><a href="#">Mini trucks Leasing</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Locations</a>

            </li>
            <li><a href="#">Our Team</a>

            </li>
            <li><a href="#">Testimonials</a>

            </li>
            <li><a href="#">FAQ</a>

            </li>
            <li><a href="#">News &amp; Events</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
        </ul>
    </nav>
    <!-- /nav -->
    <div id="content">
        <p>Page content...</p>
    </div>
</div>
<!-- /wrapper -->

Answer 2

将第二层ul放在li中作为标题，然后将其添加到样式表中：

nav .dropdown-list > li {
    float:left;
}

视图小提琴：http://jsfiddle.net/7WXZL/1/

Answer 3

在html中

<ul id="main_menu">

<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>

<li class="main_list">Food&Snacks
<ul>
<p class="category_header">Buy Any Food&Snacks Item And Get Upto 40% OFF</p>
<ol>
<li>Pulses</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>

如果你想写更多

在css中

body
{
text-align:center;
font-family:helvetica;
background-color:#424242;
}
h1
{
margin:0px;
margin-top:40px;
color:#8181F7;
font-size:45px;
}
#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;

}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}
.main_list ul ol li:first-of-type 
{
list-style: none;
font-size:19px;
margin-top:10px;
color:#084B8A;
}
.main_list:hover ul
{
display:block;
}
.main_list ul
{
display:none;
}

这是http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php创建css mega下拉菜单的主要代码。