CSS下拉菜單

我試圖做一個簡單的CSS下拉菜單，當你將鼠標移到鏈接上時，子菜單出現。當你將鼠標懸停在某個li上但我無法弄清楚如何使用鏈接來做到這一點時，我已經實現了這一點。CSS下拉菜單

我試圖用鏈接而不是li來做這件事的原因是我的菜單寬度是100％，而li跨越了比鏈接更大的區域，所以如果你將鼠標放在該區域上，子菜單出現在你不想要的時候。

我的CSS如下：

.menu { 
    border: solid 1px red; 
    font-size: 5em; 
    font-family: 'Raleway', arial, serif; 
} 

.menu ul { 
} 

.menu ul.children { 
    display: none; 
} 

.menu ul li { 
    margin: 20px 0 10px 0; 
} 

.menu ul li:hover ul.children { 
    display: block; 
    position: absolute; 
} 

.menu ul li a { 
    padding: 10px 10px 0 40px; 
    background: rgba(0,0,0,0.5); 
    color: #fff; 
    text-decoration: none; 
}

來源

2011-06-28 cvandal

後的HTML，也 – afaolek

有成千上萬的教程，對於任何一種下拉的，左右滑動做網絡的內容菜單和SO上快速搜索會告訴你已經有發佈的固溶體。你不需要每次重新發明輪子... – easwee

試試這個http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ – petsoukos

我會避免我們如果可能的話，爲JS添加JS。這不是必需的。只需在裏面貼一個div（比裏面的填充少一點），並將div:hover設置爲display:block;。

這裏的a fiddle展示了這種方法。這很像你已經擁有的。

來源

2011-06-28 15:21:09 Spycho

當你的鼠標不在時，它消失了，所以現在菜單已經沒有了。你可以展示如何讓它留下來。 – cppit

簡單地說，這是不是你可以在CSS做的嵌套<ul>在<li>而不是<a>（或整個子菜單將是一個鏈接而這只是愚蠢）

讓您可以與使用Javascript/jQuery的

$('.menu ul li a').hover(function() { 
    $(this).parent().children('ul').toggle(); 
});

來源

2011-06-28 12:51:14

<!doctype html> 
<html lang=''> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <script src="http://webdesign9.in/js/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     (function($) { 
$.fn.menumaker = function(options) { 
var cssmenu = $(this), settings = $.extend({ 
    format: "dropdown", 
    sticky: false 
}, options); 
return this.each(function() { 
    $(this).find(".button").on('click', function(){ 
    $(this).toggleClass('menu-opened'); 
    var mainmenu = $(this).next('ul'); 
    if (mainmenu.hasClass('open')) { 
     mainmenu.slideToggle().removeClass('open'); 
    } 
    else { 
     mainmenu.slideToggle().addClass('open'); 
     if (settings.format === "dropdown") { 
     mainmenu.find('ul').show(); 
     } 
    } 
    }); 
    cssmenu.find('li ul').parent().addClass('has-sub'); 
multiTg = function() { 
    cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
    cssmenu.find('.submenu-button').on('click', function() { 
     $(this).toggleClass('submenu-opened'); 
     if ($(this).siblings('ul').hasClass('open')) { 
     $(this).siblings('ul').removeClass('open').slideToggle(); 
     } 
     else { 
     $(this).siblings('ul').addClass('open').slideToggle(); 
     } 
    }); 
    }; 
    if (settings.format === 'multitoggle') multiTg(); 
    else cssmenu.addClass('dropdown'); 
    if (settings.sticky === true) cssmenu.css('position', 'fixed'); 
resizeFix = function() { 
    var mediasize = 900; 
    if ($(window).width() > mediasize) { 
     cssmenu.find('ul').show(); 
    } 
    if ($(window).width() <= mediasize) { 
     cssmenu.find('ul').hide().removeClass('open'); 
    } 
    }; 
    resizeFix(); 
    return $(window).on('resize', resizeFix); 
}); 
    }; 
})(jQuery); 

(function($){ 
$(document).ready(function(){ 
$("#cssmenu").menumaker({ 
    format: "multitoggle" 
}); 
}); 
})(jQuery); 
    </script> 
    <title>WELCOME TO WEBDESIGN9.IN</title> 
    <style> 
    #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} 
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} 
#cssmenu #head-mobile{display:none} 
#cssmenu{font-family:sans-serif;background:#EEE;} 
#cssmenu > ul > li{float:left} 
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;} 
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff} 
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;} 
#cssmenu > ul > li.has-sub > a{padding-right:30px} 
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''} 
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease} 
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0} 
#cssmenu ul ul{position:absolute;left:-9999px} 
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease} 
#cssmenu ul ul li:hover{} 
#cssmenu li:hover > ul{left:auto} 
#cssmenu li:hover > ul > li{height:35px} 
#cssmenu ul ul ul{margin-left:100%;top:0} 
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;} 
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0} 
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff} 
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''} 
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease} 
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0} 
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;} 
#cssmenu ul ul ul li.active a{border-left:1px solid #333} 
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333} 

@media screen and (max-width:900px){ 
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none} 
.logo2{display:none} 
nav{width:100%;} 
#cssmenu{width:100%} 
#cssmenu ul{width:100%;display:none} 
#cssmenu ul li{width:100%;border-top:1px solid #444} 
#cssmenu ul li:hover{background:#363636;} 
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto} 
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0} 
#cssmenu > ul > li{float:none} 
#cssmenu ul ul li a{padding-left:25px} 
#cssmenu ul ul li{background:#333!important;} 
#cssmenu ul ul li:hover{background:#363636!important} 
#cssmenu ul ul ul li a{padding-left:35px} 
#cssmenu ul ul li a{color:#ddd;background:none} 
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff} 
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left} 
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none} 
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700} 
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;} 
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''} 
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''} 
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} 
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} 
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer} 
#cssmenu .submenu-button.submenu-opened{background:#262626} 
#cssmenu ul ul .submenu-button{height:34px;width:34px} 
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''} 
#cssmenu ul ul .submenu-button:after{top:15px;right:13px} 
#cssmenu .submenu-button.submenu-opened:after{background:#fff} 
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''} 
#cssmenu ul ul .submenu-button:before{top:12px;right:16px} 
#cssmenu .submenu-button.submenu-opened:before{display:none} 
#cssmenu ul ul ul li.active a{border-left:none} 
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none} 
} 
    </style> 
</head> 
<body> 

<header> 
<nav id='cssmenu'> 
<div class="logo"><a href="index.php">Responsive </a></div> 
<div id="head-mobile"></div> 
<div class="button"></div> 
<ul> 
<li class='active'><a href='#'>HOME</a></li> 
<li><a href='#'>ABOUT</a></li> 
<li><a href='#'>PRODUCTS</a> 
    <ul> 
     <li><a href='#'>Product 1</a> 
     <ul> 
      <li><a href='#'>Sub Product</a></li> 
      <li><a href='#'>Sub Product</a></li> 
     </ul> 
     </li> 
     <li><a href='#'>Product 2</a> 
     <ul> 
      <li><a href='#'>Sub Product</a></li> 
      <li><a href='#'>Sub Product</a></li> 
     </ul> 
     </li> 
    </ul> 
</li> 
<li><a href='#'>BIO</a></li> 
<li><a href='#'>VIDEO</a></li> 
<li><a href='#'>GALLERY</a></li> 
<li><a href='#'>CONTACT</a></li> 
</ul> 
</nav> 
</header> 
</body> 
<html>

來源

2015-07-02 10:15:52

（1）雖然這個代碼塊可能會回答這個問題，但最好能提供一些解釋它爲什麼這樣做。（2）你應該使用你的標誌來標記這個問題，作爲你發佈完全相同的答案（[1]（http://stackoverflow.com/a/31183117），[2]（http：/ /stackoverflow.com/a/31181845），[3]（http://stackoverflow.com/a/31181826），[4]（http://stackoverflow.com/a/31181774/1816580））。如果這不是重複的，請提供自定義答案，而不要簡單地將它們複製到多個問題。 –

回答

相關問題