这是HTML:
http://codepen.io/anon/pen/epvNRG
<select>
<red>
</select>
.
^是我试图使用但它看起来不那么好!感谢
我需要什么: 悬停下拉菜单。当光标在'词汇表'上时,在词汇表下方有一个下拉菜单可以说什么!谢谢!请使其与词汇表框的大小相同!从那以后,有点透明也会很酷!
谢谢!
答案 0 :(得分:1)
我的建议是要么学习一些引导程序,因为它会使很多css编码变得更容易,或者在询问表单之前快速进行谷歌搜索。无论如何:
html:
<html>
<head>
<meta charset="UTF-8">
<title>Watts</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<ul>
<li class="highlight"><a href="index.html">Home</a></li>
<li><a href="reference.html">References</a></li>
<li><a href="glossary.html">Glossary</a></li>
<li>
<a href="#">Products ▾</a>
<ul class="dropdown">
<li><a href="#">Laptops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
background-color: #ccc;
} /* End of body rule */
ul
{
list-style: none;
background-color: #444; /* A very dark shade of grey as a background colour. */
text-align: center;
margin: 0;
padding: 0;
} /* End of ul rule */
li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
} /* End of li rule */
a
{
color: #fff; /* A white colour. */
text-decoration: none;
display: block;
transition: 0.65s;
} /* End of a rule */
a:hover
{
background-color: #005f5f; /* rgb(0, 95, 95) - A colour similar to teal. */
} /* End of a:hover rule */
.highlight a /* Makes the block of the navigation page that you are on white on the navigation bar. */
{
background-color: #fff; /* A white background colour. */
cursor: default;
color: #444
} /* End of .highlight a rule */
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
答案 1 :(得分:1)
您可以尝试使用此纯HTML / CSS菜单:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
nav { width:100%; background:#000; display:inline-block;}
nav ul { margin:0; padding:0;}
nav ul li { margin:0; padding:0; list-style:none; display:inline-block; cursor:default;}
nav ul li a { color:#fff; padding:10px; font:15px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; display:inline-block;}
nav > ul > li { float:left;}
nav ul li:hover > a { color:#fff; background:#005f5f;}
nav ul li a.active { color:#fff; background:#3b4747;}
nav ul ul { width:auto; min-width:200px; display:none; background:#131313; position:absolute; z-index:555; text-align:left;}
nav li:hover > ul { display:block;}
nav ul ul ul { left:100%; top:0;}
nav ul ul li { width:100%; display:block; float:none;}
nav ul ul a { width:100%; padding:8px 15px; display:block; color:#fff; border-bottom:1px solid #111;}
nav ul ul li:hover > a { background:#005f5f; color:#fff;}
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a>Services</a>
<ul>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a>Support</a>
<ul>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>