悬停导航栏上的纯HTML和CSS下拉列表

Question

这是HTML：

<select>
<red>
</select>
.

^是我尝试使用的功能，但效果不佳！ 谢谢

我需要：悬停上的下拉菜单。 当光标位于“词汇表”上时，在词汇表下方有一个下拉菜单，可以说什么！ 谢谢！ 请使其尺寸与词汇表框相同！ 除此之外，一点透明感也很酷！

谢谢！

Answer 1

我对您的建议是学习一些引导程序，因为这会使很多CSS编码变得如此简单，或者在进行表格查询之前先进行快速的Google搜索。 无论如何：

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 &#9662;</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;
    }

Answer 2

您可以尝试以下纯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>

悬停导航栏上的纯HTML和CSS下拉列表

问题描述

2 个解决方案

解决方案1
1 2015-10-02 02:01:15

解决方案2
1 2015-10-02 04:48:52

悬停导航栏上的纯HTML和CSS下拉列表

问题描述

2 个解决方案

解决方案1 1 2015-10-02 02:01:15

解决方案2 1 2015-10-02 04:48:52

解决方案1
1 2015-10-02 02:01:15

解决方案2
1 2015-10-02 04:48:52