时间戳

首页 > 解决方案 > 如何使元素填充最大值覆盖其

水平

html - 如何使元素填充最大值覆盖其
水平

问题描述

我正在尝试设计一个下拉菜单，其中菜单的子项更改颜色（绿色），但该项目没有扩展到水平覆盖所有框大小，其余部分保持原始颜色。

谢谢！

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

标签： htmlcss

解决方案

你可以试试这段代码。有一些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>

推荐阅读