如何使元素内边距最大水平覆盖其 <div>
我正在尝试设计一个下拉菜单，其中菜单的子项更改颜色（绿色），但该项目不会扩展以水平覆盖所有框大小，而使其余部分保持原始颜色。
谢谢你！
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
你可以试试这个代码。有一些 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>
随时随地看视频慕课网APP
相关分类
Html5