Question

我正在尝试编辑我的代码，以便当有人在产品上盘旋时，它会下拉并显示不同的子类别，我希望它显示4个选项，450,250,2笔画和Junior。

这是我的HTML：

<link rel="stylesheet" type="text/css" href="website.css">
<font face="Tahoma">
<font color="lightgray">
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style type="text/css">
      body {
        font-family: Verdana,  Helvetica, sans-serif;
        font-size: 20px;

      }
      .horizontal_menu {
        display: inline;
        text-align:center;
        border: 1px lightgray;
        background-color: white; opacity: 0.5; filter: alpha(opacity=50);

        margin: 2px;
        border: 2px solid #a1a1a1;
        padding: 5px 20px;
        width: 800px;
        border-radius: 10px;
      }
      .horizontal_menu li {
        text-align:center;
        display: inline;
        list-style: none;
        margin: 5px;
      }
      .horizontal_menu li a {
        text-decoration: none;
        color: black;
      }
      .horizontal_menu li a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <center>
    <ul class="horizontal_menu">
      <li>
        <a href="Homepage.php" title="Back to the home page">Home</a>
      </li>
      <li>
        <a href="Products.php" title="Check out the products in stock">Products</a>
      </li>
        <li>
        <a href="aboutus.php" title="Check out the products in stock">About us</a>
      </li>
        <li>
        <a href="contact.php" title="Check out the products in stock">Contact</a>
      </li>
     </center> 

    </ul>
  </body>
</html>
<?php

?>

我的CSS：

body {
    background-image: url("http://p1.pichost.me/i/5/1282860.jpg");
    background-size: cover;
}
h2 {
    color: lightgray;
    margin-left: 5px;
}
legend { 
    display: block;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
}
div {

    border: 2px solid #a1a1a1;
    padding: 10px 40px;
    background #dddddd;
    width: 300px;
    border-radius: 25px;
}

{
list-style:none;
list-style-type:none;
}

提前致谢！

Answer 1

将第二个列表嵌入第一个列表中，下面是一个如何工作的示例。这是一个完整示例的小提琴：

http://jsfiddle.net/x5pmmcyq/

HTML：

  <ul class="horizontal_menu">
      <li>
        <a href="Homepage.php" title="Back to the home page">Home</a>
          <ul>
          <li>Nested Item</li>
          <li>Nested Item</li>
          <li>Nested Item</li>
          </ul>
      </li>

然后添加一些CSS以获取隐藏的嵌套项目以便在悬停时显示：

CSS：

.horizontal_menu li > ul {
        display: none       
}

.horizontal_menu li:hover > ul {
        display: block;
    }

小提琴中使用的例子来自这个网站： http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

将导航栏转换为下拉导航

1 个答案: