Question

我正在尝试点击打开菜单。该菜单运行良好但我想将其设为width:100%（现在的菜单 max-width:160px;）。如何打开菜单width:100%;？

这是我的工作 signature 。

HTML

<div class="dd">
<a href="#" class="drop">
 <svg class="icon" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="19" r="2"></circle>
  </svg>
 </a>
  <div class="dd-menu">
    <ul>
      <li>Profile & status</li>
       <li>Notification</li>
       <li>Help</li>
       <li>Log out</li>
    </ul>
  </div>
</div>

CSS

    body {
  margin:0;
  font-family:Arial;
  background:#ececec;
}

.drop {
  float:right;

}

.dd {
position:relative;
background:#404BB3;
  padding:20px;
  width:25%;
  box-sizing:border-box;
  color:#FFF;
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  height:68px;
}

h1 {
  margin:0;
  padding:0;
  float:left;
  font-size:26px;
}
small {
 font-size:14px;
  color:#666;
  font-weight:normal;
}
svg {
  height:24px;
  width:24px;
}
svg circle {
 fill:#FFF; 
}

.dd-menu {

position: absolute;
  top: 70%;
  right:0;    /*changed here*/
  width:100%;  /*changed here*/
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  opacity:0;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(0); 
}
.dd-menu ul {
   min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
  position:relative;
}

.dd-menu.active {
  opacity:1;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(1); 
}

.dd-menu li {
  color:#666;
margin: 0;
padding: 5px 0 5px 15px;
height: 24px;
list-style: none;
  opacity: 0; 
  transform: translateY(0px);
}
.dd-menu li {
  -webkit-transition: all 0.3s ease;
  transform: translateY(-30%);
}
.dd-menu.active li {
  opacity: 1; 
  transform: translateY(0px);
}

Answer 1

你可以用

做到这一点

.dd-menu {
    width: 100%;
    right: 0;
}

Answer 2

您只需要将宽度设为100％。它将占用100％的页面宽度。

工作DEMO。

以下是代码中已更改的CSS：

.dd-menu {
  position: absolute;
  top: 70%;
  right:0;    /*changed here*/
  width:100%;  /*changed here*/
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  opacity:0;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(0); 
}

编辑：.dd宽度为25％。这是DEMO。

点击打开菜单宽度100％

2 个答案: