2017-08-09 148 views
-1

我希望有一個下拉菜單從「處理選項卡與鼠標懸停。」這將是理想的,如果「treatments.html」可能只是一個按鈕,而不是一個鏈接下拉菜單在CSS /樣式

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; 
} 
+1

問題是什麼?它不工作? – Nisarg

+0

@NisargShah唯一的問題是治療選項卡。我有其他的HTML文件,我想附加在下拉菜單中,只有該治療選項卡 –

回答

1

你想要的是當鼠標懸停一個有子相關頁面的標籤時,它顯示在它下面,用戶可以點擊子頁面(Childs)。 你真的不必做一個標籤按鈕,而其他不是!!

要做到這一點,你必須使用定位如下: - 父容器是錨(鏈接)與position: relative;

  • 兒童<div>

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

這將使標籤下方的<div>