悬停下拉菜单上的 CSS 菜单
[英]CSS menu on hover dropdown
问题描述
I'm trying to make simple hover drop down menu in my header it works fine except on hover it shows additional buttons and i can't find the reason for that
我正在尝试在我的标题中制作简单的悬停下拉菜单它工作正常，除了悬停时它显示其他按钮，我找不到原因
Jsfiddle : http://jsfiddle.net/gpf5n/#&togetherjs=EleDQDiDLG Jsfiddle： http : //jsfiddle.net/gpf5n/#&togetherjs=EleDQDiDLG
HTML: HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hotel</title>
<link rel="stylesheet" type="text/css" href="Hotel.css">
<script src="HotelM.js"></script>
</head>
<body>
<main>
<header>
<div></div>
<nav>
<ul class="Menu1">
<li><a class="MenuButtons" href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
</ul>
<ul class="Menu">
<li><a class="MenuButtons" href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
</ul>
<ul class="Menu">
<li><a class="MenuButtons" href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
</ul>
<ul class="Menu">
<li><a class="MenuButtons" href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
</ul>
<ul class="Menu">
<li><a class="MenuButtons" href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
<li><a href="#">ASD</a></li>
</ul>
</nav>
</header>
</main>
</body>
</html>
CSS: CSS：
body , div ,h1, h2, section,canvas, main, footer , header , p , a, article, ul ,li, ol, table {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
width: 1000px;
height: auto;
margin: 0 auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */
background: rgb(42,176,237); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(42,176,237,1) 0%, rgba(159,216,239,1) 27%, rgba(159,216,239,1) 27%, rgba(191,232,249,1) 52%, rgba(159,216,239,1) 79%, rgba(42,176,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#2ab0ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
header{
width: 100%;
height: 100px;
background-color: #7142AA;
}
header div{
height: 50%;
width: 100%;
}
header nav{
height: 50%;
width: 100%;
padding-left: 0.5%;
}
header nav ul{
list-style-type: none;
}
nav ul{
display: inline-block;
width: 15%;
height: 100%;
}
nav li{
height: 100%;
}
nav a{
font-size: 1.7em;
text-decoration: none;
background-color: #6025A8;
display: block;
width: 100%;
height: 100%;
text-align: center;
display: none;
}
.MenuButtons{
font-size: 1.7em;
text-decoration: none;
background-color: #6025A8;
display: block;
width: 100%;
height: 100%;
text-align: center;
display: block;
}
.Menu1:hover a{
display: block;
}
2 个解决方案
解决方案1
1 已采纳 2015-11-12 12:48:50
Try making the ul floating elements:尝试使 ul 浮动元素：
http://jsfiddle.net/b4wkhqLb/ http://jsfiddle.net/b4wkhqLb/
body , div ,h1, h2, section,canvas, main, footer , header , p , a, article, ul ,li, ol, table { margin: 0; padding: 0; box-sizing: border-box; } main{ width: 1000px; height: auto; margin: 0 auto; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */ background: rgb(42,176,237); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(42,176,237,1) 0%, rgba(159,216,239,1) 27%, rgba(159,216,239,1) 27%, rgba(191,232,249,1) 52%, rgba(159,216,239,1) 79%, rgba(42,176,237,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#2ab0ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } header{ width: 100%; height: 100px; background-color: #7142AA; } header div{ height: 50%; width: 100%; } header nav{ height: 50%; width: 100%; padding-left: 0.5%; } header nav ul{ list-style-type: none; } nav ul{ display: inline-block; width: 15%; height: 100%; float: left; } nav li{ height: 100%; } nav a{ font-size: 1.7em; text-decoration: none; background-color: #6025A8; display: block; width: 100%; height: 100%; text-align: center; display: none; } .MenuButtons{ font-size: 1.7em; text-decoration: none; background-color: #6025A8; display: block; width: 100%; height: 100%; text-align: center; float: left; } .Menu1:hover a{ display: block; }
<main> <header> <div></div> <nav> <ul class="Menu1"> <li><a class="MenuButtons" href="#">ASD</a></li> <li><a href="#">ASD1</a></li> <li><a href="#">ASD2</a></li> <li><a href="#">ASD3</a></li> <li><a href="#">ASD4</a></li> </ul> <ul class="Menu"> <li><a class="MenuButtons" href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> </ul> <ul class="Menu"> <li><a class="MenuButtons" href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> </ul> <ul class="Menu"> <li><a class="MenuButtons" href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> </ul> <ul class="Menu"> <li><a class="MenuButtons" href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> <li><a href="#">ASD</a></li> </ul> </nav> </header> </main>解决方案2
0 2015-11-12 12:55:57
You can remove a lot off extra HTML Markup您可以删除很多额外的 HTML 标记
CSS CSS
nav ul {
position: relative;
display: block;
top: 40px;
}
nav ul li {
display: inline-block;
position: relative;
margin-right: 10px;
}
nav ul li ul li {
display: block;
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
top:100%;
background:#7142AA;
}
nav ul li:hover ul {
display: block;
}
body, div, h1, h2, section, canvas, main, footer, header, p, a, article, ul, li, ol, table {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 1000px;
height: auto;
margin: 0 auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */
background: rgb(42, 176, 237);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(42, 176, 237, 1) 0%, rgba(159, 216, 239, 1) 27%, rgba(159, 216, 239, 1) 27%, rgba(191, 232, 249, 1) 52%, rgba(159, 216, 239, 1) 79%, rgba(42, 176, 237, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(42, 176, 237, 1) 0%, rgba(159, 216, 239, 1) 27%, rgba(159, 216, 239, 1) 27%, rgba(191, 232, 249, 1) 52%, rgba(159, 216, 239, 1) 79%, rgba(42, 176, 237, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(42, 176, 237, 1) 0%, rgba(159, 216, 239, 1) 27%, rgba(159, 216, 239, 1) 27%, rgba(191, 232, 249, 1) 52%, rgba(159, 216, 239, 1) 79%, rgba(42, 176, 237, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ab0ed', endColorstr='#2ab0ed', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
header {
width: 100%;
height: 100px;
background-color: #7142AA;
}
header div {
height: 50%;
width: 100%;
}
header nav {
height: 50%;
width: 100%;
padding-left: 0.5%;
}
header nav ul {
list-style-type: none;
}
nav a {
font-size: 1.7em;
text-decoration: none;
color: #fff;
display: block;
text-align: center;
}
HTML HTML
<main>
<header>
<nav>
<ul class="Menu1">
<li><a href="#">ASD1</a>
<ul>
<li><a href="#">1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
</ul>
</li>
<li><a class="MenuButtons" href="#">ASD</a>
<ul>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
</ul>
</li>
<li><a class="MenuButtons" href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
<ul>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
</ul>
</li>
<li><a class="MenuButtons" href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
<ul>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
</ul>
</li>
<li><a class="MenuButtons" href="#">ASD</a>
<ul>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
<li><a href="#">ASD</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
悬停时的CSS下拉菜单 - CSS Dropdown menu on hover
CSS下拉菜单-悬停消失 - Css Dropdown Menu - Hover disappear
在悬停CSS上显示下拉菜单 - Show dropdown menu on hover css
在悬停时隐藏CSS下拉菜单 - Hiding css dropdown menu on hover
CSS菜单下拉悬浮问题 - CSS Menu Dropdown Hover issue
使用CSS将鼠标悬停在下拉菜单上 - Dropdown menu on mouse hover with CSS
HTML/CSS 悬停下拉菜单 - HTML/CSS Hover Dropdown Menu
使用CSS的下拉菜单不会在悬停时显示菜单 - Dropdown menu using CSS not displaying the menu on hover
将CSS悬停转换为JS onClick的下拉菜单？ - convert CSS Hover to JS onClick for Dropdown Menu?
CSS3下拉菜单将鼠标悬停在不同的大小 - CSS3 Dropdown Menu hover different size
相关标签