Question

这是HTML：

<select>
<red>
</select>
.

^是我试图使用但它看起来不那么好！感谢

我需要什么：悬停下拉菜单。当光标在'词汇表'上时，在词汇表下方有一个下拉菜单可以说什么！谢谢！请使其与词汇表框的大小相同！从那以后，有点透明也会很酷！

谢谢！

Answer 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 &#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 个答案: