我正在嘗試設計一個下拉菜單，其中菜單的子項更改顏色（綠色），但該項目不會擴展以水平覆蓋所有框大小，而使其余部分保持原始顏色。謝謝你！HTML文檔<!doctype html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet.css"> <title>Home</title> </head> <body> <div id="container"> <header> <img src="jarir.svg"> <div id="search"><input></div> </header> <nav> <div class="dropdown"> <a>All Catgories</a> <div class="dropdown_content"> <a>Link1</a> <a>Link2</a> <a>Link3</a> </div> </div> <!-- dropdown--> <a>Shop by Brand</a> <a>Online Exclusive</a> </nav> </div> <!-- container--> </body></html>CSS#container{}img{ width: 130px; height: 45px;}#search, #search input{ display: inline-block; position: absolute; margin: auto; margin: 5px 10px; width:500px; max-width: 500px; min-width: 200px; background-color: lightgray;}nav a{ margin-right: 30px; padding: 10px; float:left; border-bottom: 0.7mm solid red;}nav a:hover{ border-bottom: 1.2mm solid #3A44F8;}.dropdown{ position: relative; display: inline-block; float: left;}<!-- -->.dropdown:hover .dropdown_content { display: block; border-bottom: 0px;}.dropdown_content a{border-bottom: 0px;}.dropdown:hover{ background-color:Blue; color: red;}.dropdown_content a:hover{ background-color:green; color: yellow; border: 0px; display: block;}.dropdown_content { display: none; position:absolute; top: 35px; background-color:#f7f7f7; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; list-style-type: none; color: black;}
1 回答
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
你可以試試這個代碼。有一些 CSS 更改。 喜歡.dropdown_content a{border-bottom: 0px;display: block;width: 100%;box-sizing: border-box;}
#container{}
img{
width: 130px;
height: 45px;
}
#search, #search input{
display: inline-block;
position: absolute;
margin: auto;
margin: 5px 10px;
width:500px;
max-width: 500px;
min-width: 200px;
background-color: lightgray;
}
nav a{
margin-right: 30px;
padding: 10px;
float:left;
border-bottom: 0.7mm solid red;
}
nav a:hover{
border-bottom: 1.2mm solid #3A44F8;
}
.dropdown{
position: relative;
display: inline-block;
float: left;
}<!-- -->
.dropdown:hover .dropdown_content {
display: block;
border-bottom: 0px;
}
.dropdown_content a{border-bottom: 0px;display: block;width: 100%;box-sizing: border-box;}
.dropdown:hover{
background-color:Blue;
color: red;
}
.dropdown_content a:hover{
background-color:green;
color: yellow;
border: 0px;
}
.dropdown_content {
display: none;
position:absolute;
top: 35px;
background-color:#f7f7f7;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
list-style-type: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="container">
<header>
<img src="jarir.svg" />
<div id="search"><input /></div>
</header>
<nav>
<div class="dropdown">
<a>All Catgories</a>
<div class="dropdown_content">
<a>Link1</a> <a>Link2</a> <a>Link3</a>
</div>
</div>
<!-- dropdown -->
<a>Shop by Brand</a> <a>Online Exclusive</a>
</nav>
</div>
<!-- container -->
</body>
</html>
- 1 回答
- 0 關注
- 92 瀏覽
添加回答
舉報
0/150
提交
取消