Question

我希望鼠标悬停在“治疗选项卡”中有一个下拉菜单。如果“treatments.html”可能只是一个按钮而不是链接，那将是理想的选择。

1。）菜单栏在网页顶部保持粘性 2.）“治疗”选项卡有下拉选项 3.）治疗成为按钮而不是链接

HTML

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="UL.css">

<title>Home</title>

<div class="parallax"></div>

</head>

<div class="stripes">
<body>

<div class="navbar">
    <a href="contact-us.html" target="_top">Contact Us</a>
    <a href="products-gifts.html" target="_top">Products & Gifts</a>
    <a href="treatments.html" target="_top">Treatments</a>
    <a href="home.html" target="_top">Home</a>
</div>

<div class="main">

<h1>Welcome to Undercover Laser</h1>

</div>

</body>
</div>

</html>

CSS

.parallax {
       background-image: url("images/IMG_5026.jpg");
       min-height: 680px;
       background-attachment: fixed;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       }

body {
  margin:0;
  }

.stripes {
      background-image: url("images/stripes.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      }

.navbar {
overflow: hidden;
background-color: rgba(49,49,49,0.85);
position: fixed;
top: 0;
width: 100%;
float: right;
font-family: Helvetica, sans-serif;
}

.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
float: right;
}

.navbar a:hover {
      background-color: #ff008f;
      color: #FFFFFF;
      }

.main {
padding: 16px;
margin-top: 30px;
height: auto;
}

h1 {
font-family: Helvetica, sans-serif;
font-size: 75px;
color: #FF008F;
text-align: center;
}

h2 {
font-family: Caslon, serif;
font-size: 40px;
font-weight: bold;
color: #000000;
margin-left:50px;
}

p {
font-family: Caslon, serif;
color: #000000;
margin-left: 50px;
margin-right: 50px;
font-size: 18px;
}

Answer 1

您想要的是当鼠标悬停在具有子相关页面的选项卡上时，它会显示在其下方，以便用户可以单击子页面（Childs）。你真的不必将一个标签设为按钮而其他标签没有！。

要实现这一点，您必须使用如下定位： - 父容器是position: relative;

的锚点（链接）

带{/ 1>的儿童<div>

position: absolute; bottom: 0; left: 0;

这会使<div>位于标签下方。

CSS /样式中的下拉菜单

1 个答案: