纯CSS多级下拉菜单

问题描述 投票：0回答：7

我之前没有对多级、纯 CSS 下拉菜单做过很多工作，但我现在正在寻找最干净的方法。当我在网上搜索这个问题时，我发现了很多已有 4-5 年历史的解决方案，我不确定是否有比这样做更好的方法来实现这一目标像这样。

html css drop-down-menu
7个回答
84
投票

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li
{
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>


我还制作了一个现场演示，可以使用这里

4
投票

body{margin:0px;}
.example {
    width:980px;
    height:40px;
    margin:0px auto;
 position:absolute;
 margin-bottom:60px;
 top:95px;
}

.menuholder {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:relative;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    background:#888;
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:10px;
    left:5%;
    position:absolute;
    top:-9px;
    width:100%;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.88);
    height:0;
    width:980px; /*100%*/
}
.menuholder:hover div.back {
    height:280px;
}
ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}
ul.menu li {
    float:left;
    margin:0 10px 0 0;
}
ul.menu li > a {
    -moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.3s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.3s ease-in-out;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -webkit-transition:all 0.3s ease-in-out;
    border-radius:0 0 10px 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    color:#eee;
    display:block;
    padding:0 10px;
    text-decoration:none;
    transition:all 0.3s ease-in-out;
}
ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#073263;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left:0;
    overflow:hidden;
    position:absolute;
    top:35px;
    width:0;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.menu dd a {
    background:transparent;
    color:#fff;
    font-size:12px;
    height:20px;
    line-height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.menu dd a:hover {
    color:#fc0;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:21%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
    background:#aaa;
    color:#fff;
    padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}
<div class="example" align="center">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a href="index.php?id=1" class="blue">Home</a></li>
        <li><a href="index.php?id=14" class="blue">About Us</a></li>
            <li><a href="index.php?id=4" class="blue">Mens</a>
                <div class="subs">
                    <dl>
                        <dd><a href="index.php?id=15">Coats & Jackets</a></dd>
                        <dd><a href="index.php?id=22">Chinos</a></dd>
                        <dd><a href="index.php?id=23">Jeans</a></dd>
                        <dd><a href="index.php?id=24">Jumpers & Cardigans</a></dd>
                        <dd><a href="index.php?id=25">Linen</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=26">Polo Shirts</a></dd>
                        <dd><a href="index.php?id=16">Shirts Casual</a></dd>
                        <dd><a href="index.php?id=27">Shirts Formal</a></dd>
                        <dd><a href="index.php?id=28">Shorts</a></dd>
                        <dd><a href="index.php?id=18">Sportswear</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=19">Tops & T-Shirts</a></dd>
                        <dd><a href="index.php?id=20">Trousers Casual</a></dd>
                        <dd><a href="index.php?id=29">Trousers Formal</a></dd>
                        <dd><a href="index.php?id=30">Nightwear</a></dd>
                        <dd><a href="index.php?id=17">Socks</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=21">Underwear</a></dd>
                        <dd><a href="index.php?id=31">Swimwear</a></dd>
                    </dl>
                </div>
            </li>
            <!--menu-->
                        <li><a href="index.php?id=5" class="blue">Ladie's</a>
                <div class="subs">
                    <dl>
                          <dd><a href="index.php?id=32">Coats & Jackets</a></dd>
                          <dd><a href="index.php?id=33">Dresses</a></dd>
                          <dd><a href="index.php?id=34">Jeans</a></dd>
                          <dd><a href="index.php?id=35">Jumpers & Cardigans</a></dd>
                          <dd><a href="index.php?id=36">Jumpsuits</a></dd>
                    </dl>
                    <dl>
                        <dd><a href="index.php?id=37">Leggings & Jeggings</a></dd>
                          <dd><a href="index.php?id=38">Linen</a></dd>
                          <dd><a href="index.php?id=39">Lingerie & Underwear</a></dd>
                          <dd><a href="index.php?id=40">Maternity Wear</a></dd>
                          <dd><a href="index.php?id=41">Nightwear</a></dd>
                    </dl>
                    <dl>
                     <dd><a href="index.php?id=42">Shorts</a></dd>
                          <dd><a href="index.php?id=43">Skirts</a></dd>
                          <dd><a href="index.php?id=44">Sportswear</a></dd>
                          <dd><a href="index.php?id=45">Suits & Tailoring</a></dd>
                          <dd><a href="index.php?id=46">Swimwear & Beachwear</a></dd>
                    </dl>
                    <dl>
                          <dd><a href="index.php?id=47">Thermals</a></dd>
                          <dd><a href="index.php?id=48">Tops & T-Shirts</a></dd>
                          <dd><a href="index.php?id=49">Trousers & Chinos</a></dd>
                          <dd><a href="index.php?id=50">Socks</a></dd>
                    </dl>
                </div>
            </li><!--menu end-->
                        <!--menu-->
                        <li><a href="index.php?id=7" class="blue">Girls</a>
                <div class="subs">
                    <dl>
                            <dd><a href="index.php?id=51">Coats & Jackets</a></dd>
                          <dd><a href="index.php?id=52">Dresses</a></dd>
                          <dd><a href="index.php?id=53">Jeans</a></dd>
                          <dd><a href="index.php?id=54">Joggers & Sweatshirts</a></dd>
                          <dd><a href="index.php?id=55">Jumpers & Cardigans</a></dd>
                    </dl>
                    <dl>
                                <dd><a href="index.php?id=56">Jumpsuits & Playsuits</a></dd>
                              <dd><a href="index.php?id=57">Leggings</a></dd>
                              <dd><a href="index.php?id=58">Nightwear</a></dd>
                              <dd><a href="index.php?id=59">Shorts</a></dd>
                              <dd><a href="index.php?id=60">Skirts</a></dd>
                    </dl>
                    <dl>
                              <dd><a href="index.php?id=61">Swimwear</a></dd>
                              <dd><a href="index.php?id=62">Tops & T-Shirts</a></dd>
                              <dd><a href="index.php?id=63">Trousers & Jeans</a></dd>
                              <dd><a href="index.php?id=64">Socks</a></dd>
                              <dd><a href="index.php?id=65">Underwear</a></dd>
                    </dl>
                    <dl>

                    </dl>
                </div>
            </li><!--menu end-->
                            <!--menu-->
                        <li><a href="index.php?id=8" class="blue">Boys</a>
                <div class="subs">
                    <dl>
                        <dd><a href="index.php?id=66">Coats & Jackets</a></dd>
                          <dd><a href="index.php?id=67">Jeans</a></dd>
                          <dd><a href="index.php?id=68">Joggers & Sweatshirts</a></dd>
                          <dd><a href="index.php?id=69">Jumpers & Cardigans</a></dd>
                          <dd><a href="index.php?id=70">Nightwear</a></dd>
                    </dl>
                    <dl>
                            <dd><a href="index.php?id=71">Shirts</a></dd>
                          <dd><a href="index.php?id=72">Shorts</a></dd>
                          <dd><a href="index.php?id=73">Sportswear</a></dd>
                          <dd><a href="index.php?id=74">Swimwear</a></dd>
                          <dd><a href="index.php?id=75">T-Shirts & Polo Shirts</a></dd>
                    </dl>
                    <dl>
                          <dd><a href="index.php?id=76">Trousers & Jeans</a></dd>
                          <dd><a href="index.php?id=77">Socks</a></dd>
                          <dd><a href="index.php?id=78">Underwear</a></dd>
                    </dl>
                    <dl>

                    </dl>
                </div>
            </li><!--menu end-->
            <!--menu-->
             <li><a href="index.php?id=9" class="blue">Toddlers</a>
                <div class="subs">
                    <dl>
                      <dd><a href="index.php?id=79">Newborn</a></dd>
                      <dd><a href="index.php?id=80">0-2 Years</a></dd>
                    </dl>                 
                </div>
            </li><!--menu end-->
            <!--menu-->
             <li><a href="index.php?id=10" class="blue">Accessories</a>
                <div class="subs">
                    <dl>
                          <dd><a href="index.php?id=81">Shoes</a></dd>
                          <dd><a href="index.php?id=82">Ties</a></dd>
                          <dd><a href="index.php?id=83">Caps</a></dd>
                          <dd><a href="index.php?id=84">Belts</a></dd>
                    </dl>                 
                </div>
            </li><!--menu end-->
            <li><a href="index.php?id=13" class="blue">Contact Us</a></li>
        </ul>
        <div class="back"></div>
        <div class="shadow"></div>
    </div>
    <div style="clear:both"></div>
</div>

1
投票

对于响应单击事件而不只是悬停事件的菜单，其行为方式与选择控件类似......

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li input {
    display:none;
}
ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {
    display:none;
}
input:checked+label {
    color:red;
}
<ul tabindex='0'>
    <li>
        <input id='item1' type='radio' name='item' checked='true' />
        <label for='item1'>Item 1</label>
    </li>
    <li>
        <input id='item2' type='radio' name='item' />
        <label for='item2'>Item 2</label>
    </li>
    <li>
        <input id='item3' type='radio' name='item' />
        <label for='item3'>Item 3</label>
    </li>
</ul>

0
投票

这里有几个不错的网站可供查看，

http://www.tripwiremagazine.com/2011/10/css-menu-and-navigation.html（很多例子）

http://webdesignerwall.com/tutorials/css3-dropdown-menu（1 个示例更多教程）

希望这是有用的信息！

0
投票

我需要一个 CSS 多级下拉菜单。我找不到我搜索的无错误菜单。然后我使用Css悬停过渡效果创建了一个菜单实例。希望对用户有用。

#AnaMenu {
width: 920px;            
height: 30px;           
position: relative;
background: #0080ff;
margin:0 0 0 -30px;
padding: 10px 0 0 15px;
border: 0;             
}
#nav { display:block;background:transparent;
margin:0;padding: 0;border: 0 }
#nav ul { float: none; display:block;
height:35px; 
margin:16px 0 0 0;border:0;
padding: 15px 0 3px 0; 
overflow: visible;
 }
#nav ul li{border:0;}
#nav li a, #nav li a:link, #nav li a:visited {height:23px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
color: #fff;                              
display: block;border:0;border-right:1px solid #efefef;text-decoration:none;
margin: 0;letter-spacing:0.6px;
padding: 2px 10px 2px 10px;             
#nav li a:hover, #nav li a:active {
color: #fff; 
margin: 0;background:#6ab5ff;border:0;
padding: 2px 10px 2px 10px;      
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #fafafa;      
width: 200px;
color: #05429b;           
float: none;
margin: 0;border-bottom:1px solid #9be6e9;
padding: 8px 15px;        
}
#nav li li a:hover, #nav li li a:active {
background: #2793ff;       
color: #fff;               
padding: 8px 15px;border:0 ;text-decoration:none}
#nav li {float: none; display: inline-block;margin: 0; padding: 0; border: 0 }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 200px; margin: 0; padding: 0;background:transparent}
#nav li ul a { width: 170px;border:0;text-decoration:none;font-size:14px } 
#nav li ul ul { margin: -40px 0 0 230px }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } 
#nav li:hover, #nav li.sfhover {position: static;}
<div id='AnaMenu'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu1</a>  
 <!—sub menu (Sub menu) için başlangıç     -->
<ul>
  <li><a href='#'>Menu1-sub menu</a></li>                 <li><a href='#'>Menu1-sub menu</a></li>                 <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li>  </ul>  
 <!—sub menu (Sub menu) bitiş     -->
</li>
<li><a href='#'>Menu2</a> </li>
<li> <a href='#'>Menu3 </a></li>
<li> <a href='#'>Menu4 </a>
<ul>
<li><a href='#'>Menu4-sub menu</a>
<ul>        <li><a href='#'>Menu4-sub -sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li> </ul>
 <li> <a href='#'>Menu4-sub menu </a></li> 
<li> <a href='#'>Menu4-sub menu </a>
<ul>        <li><a href='#'>Menu4-sub -sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li>          <li><a href='#'>Menu4-sub-sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li>

 </ul>
</li>
</ul></li>
</ul>
</div>

Blogger 博客中可以使用多级下拉菜单。详情请参阅：Css多级下拉菜单

0
投票

    /* Banner bar */
nav ul
        {
        background-color: rgba(300,300,300,0.9); /* White */

        margin: 0.5em;
        border: 0.5em dotted rgba(0,0,0,0.9);  /* Black */
        padding: 0.5em;

        list-style: none;
        text-align:center;

        display: block;
        position:sticky;
        }


    /* Menus */
nav li
        {
        background-color: rgba(0,100,100,1);  /* Green/Blue */
        display: inline-block;
        position:relative;

        margin: 0.5em;
        border: 1em dashed rgba(0,0,300,0.8);  /* Blue */
        padding:0.5em;
        }


    /* Menu selection highlight */
nav li:hover
        {
        background-color: rgba(300,0,0,1);  /* Green  */
        }

    /* Links */
nav a
        {
        background-color: rgba(0,0,100,0.9); /* Blue */
        color: rgba(300,300,300,0.9); /* White */

        text-decoration: none;
        margin: 0.1em;
        padding: 0.1em;
        }

    /* Links */
nav ul ul
        {
        display: none;
        padding: 10px 20px;
        }

nav li:hover > ul
        {
        display: block;
        position: absolute;
        border: 5px solid rgba(100,100,0,0.9); /* Red */
        }
nav ul ul ul
        {
        left: 100%;
        top: 0;
        }
nav > ul > li > ul > li
        {
        min-width: 100%;
        list-style:none        }
</nav>
<nav>
<ul>
<li>
    <a href="#"> Angel </a>
        <ul>
        <li> <a href=""> Psyche </a>
        <ul>
        <li> <a href=""> Caine and Able. </br></br> The Vampire and the  Devil </a>
        <li> <a href=""> Lillth and Eve </a>
        <li> <a href=""> Noah </br> Hollowcost </a>
        <li> <a href=""> Mosses </br> The Barsted King </a>
        <li> <a href=""> Cleopatra theropoda philo-sopher rapter and Mark Antony </a>
        <li> <a href=""> Jesues the king of kings the Emporer </a>
        <li> <a href=""> Haman Xerxes the God king </a>
        <li> <img
            src="https://scontent.fsyd6-1.fna.fbcdn.net/v/t1.18169-9/fr/cp0/e15/q65/599598_10150948960046430_1521751230_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=dd9801&_nc_ohc=7Pq0k6XyEDwAX_YURbo&_nc_ht=scontent.fsyd6-1.fna&oh=00_AT8SLKMjC2rPTSyDntVd-c7XxIhMR1uWcmD062q117K-Ug&oe=61F91E87"
            style="width:10em;"></img>
        </ul>
        </ul>
<li>
    <a href="#">  Syns </a>
    <ul>
        <li> <a href="#"> Dementia </a>
        <ul>
        <li><a href="#"> Mania </br> Envy </a>
        <li><a href="#"> Schizophrenia </br> Mutanity </a>
        <li><a href="#"> Depression </br> Sloth </a>
        <li><a href="#"> Tourettes </br> Nippy </a>
        <li><a href="#"> Autism </br>  verbal_constipation </a>
        </ul>
    </ul>
<li>
    <a href="#"> Tales </a>
    <ul>
    <li> <a href="#"> News </a>
    <li> <a href="#"> Placebo effect </a>
    <li> <a href="#"> Orwells nightmares realised department of mind control 1984 </a>
    <li> <a href="#"> Got you nose </a>
    <li> <a href="#"> Banta </a>
    <li> <a href="#"> Hen peckin </a>
    <li> <a href="#"> Gossip </a>
    <li> <a href="#"> Naming </a>
    <li> <a href="#"> Shaming </a>
    <li> <a href="#"> Cat-o-gory </a>
    <li> <a href="#"> Snitching </a>
    <li> <a href="#"> The_prince_of_darkness lucifer the little light and the false Angels </a>
    <li> <a href="#"> Informant </a>
    <li> <a href="#"> Data </a>
    <li> <a href="#"> Edward Bernays torches of freedom </a>
    <li> <a href="#"> MK.ULTRA.GLEIWITZ </a>
    <li> <a href="#"> The great gaslight </a>
    <li> <a href="#"> Black face </a>
    <li> <a href="#"> Blackfish  </a>
    <li> <a href="#"> Auschwitz ghetto maker </a>
    <li> <a href="#"> Enron to riches </a>
    <li> <a href="#"> The Lamb of God </a>
    <li> <a href="#"> Corperal punishment </a>
    <li> <a href="#"> Side effect profile </a>
    </ul>
    </ul>
</nav>

0
投票

感谢您帮助回答我的问题。我正在浏览器上打开的一个选项卡上进行回答，我回到这里来分享一个三层菜单的代码，我终于可以完美地工作了。然而，与此同时，我发布的主题似乎已经结束，并有一条消息称我的答案缺乏细节。耻辱。这是一个很好的资源，但管理员距离友好还有很长的路要走。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.