用纯css打开/向上的下拉菜单
我创build了一个纯CSS的下拉菜单，我已经把它到了一个我喜欢的地方，除了我希望它是“下拉”而不是“下拉”，因为菜单栏在底部布局。 我需要添加或更改以使其“drop-up”？
#menu * { padding:0; margin: 0; font: 12px georgia; list-style-type:none; } #menu { margin-top: 100px; float: left; line-height: 10px; left: 200px; } #menu a { display: block; text-decoration: none; color: #3B5330; } #menu a:hover { background: #B0BD97;} #menu ul li ul li a:hover { background: #ECF1E7; padding-left:9px; border-left: solid 1px #000; } #menu ul li ul li { width: 140px; border: none; color: #B0BD97; padding-top: 3px; padding-bottom:3px; padding-left: 3px; padding-right: 3px; background: #B0BD97; } #menu ul li ul li a { font: 11px arial; font-weight:normal; font-variant: small-caps; padding-top:3px; padding-bottom:3px; } #menu ul li { float: left; width: 146px; font-weight: bold; border-top: solid 1px #283923; border-bottom: solid 1px #283923; background: #979E71; } #menu ul li a { font-weight: bold; padding: 15px 10px; } #menu li { position:relative; float:left; } #menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul { display:none; list-style-type:none; width: 140px; } #menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { display:block; } #menu:hover ul li:hover ul li:hover ul { position: absolute; margin-left: 145px; margin-top: -22px; font: 10px; } #menu:hover ul li:hover ul { position: absolute; margin-top: 1px; font: 10px; } <div id="menu"> <ul> <li><center><a href="X">Home</a></center> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Disclaimer</a></li> </ul> </li> <li> <center><a href="#">Practice Areas</a></center> <ul> <li><a href="#">Civil Law</a></li> <li><a href="#">Criminal Law ›</a> <ul> <li><a href="#">Joomla</a></li> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> </ul> <li><a href="#">Family Law ›</a> <ul> <li><a href="#">Joomla</a></li> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> </ul> <li><a href="#">Personal Injury ›</a> <ul> <li><a href="#">Joomla</a></li> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> </ul> <li><a href="#">Traffic Offenses ›</a> <ul> <li><a href="#">Joomla</a></li> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> </ul> <li><a href="#">FAQ</a> </li> </ul> </li> <li><center><a href="#">Attorney</a></center> <ul> <li><a href="#">X</a></li> <li><a href="#">X</a></li> <li><a href="#">X</a></li> <li><a href="#">X</a></li> </ul> </li> <li><center><a href="#">Contact Us</a></center> <ul> <li><a href="#">Locations ›</a> <ul> <li><a href="#">Rockville Office</a></li> <li><a href="#">Frederick Office</a></li> <li><a href="#">Greenbelt Office</a></li> </ul> <li><a href="#">Phone Directory</a></li> <li><a href="#">Mailing Address</a></li> </ul> </li> <li><center><a href="#">Resources</a></center> <ul> <li><a href="#">Helpful Links</a></li> <li><a href="#">Affiliates ›</a> <ul> <li><a href="#">Healthcare Providers</a></li> <li><a href="#">Insurance Companies</a></li> </ul> </li></ul> <li><center><a href="#">News & Events</a></center> <ul> <li><a href="#">Press Articles</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">Events</a></li> <li><a href="#">Blog</a></li> </ul> <li><center><a href="#">Espanol</a></center> <ul> <li><a href="#">X</a></li> </ul> </ul> </div>
将bottom:100%添加到您的#menu:hover ul li:hover ul规则
演示1
#menu:hover ul li:hover ul { position: absolute; margin-top: 1px; font: 10px; bottom: 100%; /* added this attribute */ }
或者更好的是防止子菜单产生相同的效果，只需添加此规则即可
演示2
#menu>ul>li:hover>ul { bottom:100%; }
演示3
来源： http : //jsfiddle.net/W5FWW/4/
为了找回边界，您可以添加以下属性
#menu>ul>li:hover>ul { bottom:100%; border-bottom: 1px solid transparent }
使用这个简单的代码，并复制粘贴到您的网页的任何地方。 您可以使用它作为博客的小工具。 这适用于Android手机。 您可以修改边距以正确放置
<style type="text/css"> body{padding: 3em; } #menu * { padding:0; margin: 0; font: 22px arial; list-style-type:none;} #menu { position:fixed; bottom:0px; z-index:102; width:6%; height:9%; float: left; line-height: 30px; margin-left:40%; text-align:center; } #menu a { display: block; text-decoration: none; color: #ffffff;} #menu a:hover { background: #blue;} #menu ul li ul li a:hover { background: #red; padding-left:1px; border-left: solid 1px #000;} #menu ul li ul li { border: none; color: #000000; padding-top: 3px; padding-bottom:3px; padding-left: 3px; padding-right: 3px; background: #B0BD97;} #menu ul li ul li a { font: 24px arial; font-weight:normal; font-variant: small-caps; padding-top:3px; padding-bottom:3px;} #menu ul li { width:234%; float: left; font-weight: bold; border-top: solid 1px #283923; border-bottom: solid 1px #283923; background: #000000; } #menu ul li a { font-weight: bold; width:100%; padding: 15px 10px;} #menu li{ position:relative; float:left; } #menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ display:none; list-style-type:none; width: 150px; margin-left:-275%; } #menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { display:block;} #menu:hover ul li:hover ul li:hover ul { position: absolute; margin-left: 145px; margin-top: -22px; font: 16px;} #menu:hover ul li:hover ul { position: absolute; margin-top: 1px; font: 10px;} #menu:hover ul li:hover ul { position: absolute; margin-top: 1px; font: 10px; bottom: 100%; /* added this attribute */ } #menu:focus ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { display:block;} </style> <div id="menu"> <ul> <li><center><img width="100%" height="100%" src="http://2.bp.blogspot.com/-Xk8BG-CyVUs/VLkRTKHU-RI/AAAAAAAAAJg/ZTQIspbB5g0/s1600/menu.png"/></center> <ul> <li><a href="#">ITEM1</a></li> <li><a href="#">ITEM2</a></li> <li><a href="#">ITEM3</a></li> <li><a href="#">ITEM4</a></li> <li><a href="#">ITEM5</a></li> </ul> </li> </ul> </div>
