Html CSS/Styles中的下拉菜单_Html_Css_Drop Down Menu

Html CSS/Styles中的下拉菜单

html css drop-down-menu

Html CSS/Styles中的下拉菜单,html,css,drop-down-menu,Html,Css,Drop Down Menu,我希望有一个下拉菜单从“治疗”选项卡下降，鼠标悬停。这将是理想的，如果“治疗.html”可以只是一个按钮，而不是一个链接 1.）菜单栏在网页顶部保持粘性 2.）治疗选项卡具有下拉选项 3.）治疗成为按钮而不是链接 HTML 您需要的是，当鼠标悬停在具有子页面的选项卡上时，它会显示在该选项卡下方，以便用户可以单击子页面（子页面）。你真的不必让一个选项卡成为按钮，而另一个选项卡则不是要实现这一点，您必须使用如下定位： -父容器是锚定（链接），其位置为：相对；子与位置：绝对位置；底部：

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

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

HTML

您需要的是，当鼠标悬停在具有子页面的选项卡上时，它会显示在该选项卡下方，以便用户可以单击子页面（子页面）。你真的不必让一个选项卡成为按钮，而另一个选项卡则不是

要实现这一点，您必须使用如下定位： -父容器是锚定（链接），其位置为：相对；

子
与

位置：绝对位置；
底部：0；
左：0；

这将使

恰好位于选项卡下方。

问题是什么？它不起作用吗？@NisargShah唯一的问题是治疗选项卡。我有其他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>

.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;
}