css проблема с рамкой мегаменю - PullRequest
Новая
       9

css проблема с рамкой мегаменю

0 голосов
/ 11 июля 2020

Я пытаюсь сделать мегаменю с рамкой, чтобы она выглядела хорошо, но граница не равна 100% ширины поля вот мой код: 

.mega-menu {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 90px;
  max-width: 630px;
  background: rgb(45, 98, 214);
  z-index: 1;
  padding: 10px;
}

.mega-menu a {
  display: block;
  color: white;
  margin: 5px;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.row-reset {
  margin-left: 0;
  margin-right: 0;
}
<div class="mega-menu">
  <div class="row row-reset">
    <div class="col-xl-6">
      <ul>
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2 </a></li>
        <li><a href="#">test 3</a></li>
      </ul>
    </div>
    <div class="col-xl-6">
      <ul>
        <li><a href="#">test 4</a></li>
        <li><a href="#">test 5 </a></li>
        <li><a href="#">test 6</a></li>
      </ul>
    </div>
  </div>
</div>

вот что я имею в виду, я хочу, чтобы граница была отсюда:

From This to This

Ответы [ 3 ]

0 голосов
/ 11 июля 2020 
 .mega-menu{
    display: block;
    overflow: hidden;
    position: absolute;
    top: 90px;
    max-width: 630px;
    background: rgb(45, 98, 214);
    z-index: 1;
    padding: 10px;
}
  .mega-menu a{
      display: block;
      color: white;
      margin: 5px;
      font-size: 15px;
  }
  .row-reset{
      margin-left: 0;
      margin-right: 0;
  }
  .row-reset ul{
    padding-left: 0;
  }
  .row-reset ul li{
      border-bottom: 1px solid rgba(255, 255, 255, 0.45);
      list-style: none;
  }
   .row-reset ul li:last-child {
      border-bottom: 0px;
  }
  .row-reset .column ul{
      border-right: 1px solid rgba(255, 255, 255, 0.45);
  }
  .row-reset .column:last-child ul{
      border-right: 1px solid transparent !important;
  }




<div class="mega-menu">
    <div class="row row-reset">
     <div class="col-xl-6 column px-0">
      <ul>
       <li><a href="#">test 1</a></li>
       <li><a href="#">test 2 </a></li>
       <li><a href="#">test 3</a></li>
      </ul>
     </div>
   <div class="col-xl-6 column px-0">
    <ul>
    <li><a href="#">test 4</a></li>
    <li><a href="#">test 5 </a></li>
    <li><a href="#">test 6</a></li>
    </ul>
  </div> 
 </div>
</div>
0 голосов
/ 11 июля 2020

Вы можете сделать это следующим образом. В основном это bootstrap, которое будет легко закодировать. В данном случае я использовал таблицу, которая, вероятно, будет лучшим выбором в данном случае. 

.mega-menu {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 90px;
  max-width: 630px;
  background: rgb(45, 98, 214);
  z-index: 1;
  padding: 10px;
}

.mega-menu a {
  display: block;
  color: white;
  margin: 5px;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.table,
td {
  border: 1px solid white !important;
  background-color: blue;
  width: 260px !important;
  font-weight: 730;
  font-size: 22px;
}

td {
  padding: 5px 20px !important;
}

* {
  color: white !important;
}

.row-reset {
  margin-left: 0;
  margin-right: 0;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class='container'>
  <table class="table table-hover table-bordered font-weight-bolder table-sm mt-5">
    <tbody>
      <tr>
        <td><a href="#">test 1</a></td>
        <td><a href="#">test 4 </a></td>
      </tr>
      <tr>
        <td><a href="#"> test 2</a></td>
        <td><a href="#">test 5 </a></td>
      </tr>
      <tr>
        <td><a href="#"> test 3</a></td>
        <td><a href="#">test 6 </a></td>
      </tr>
    </tbody>
  </table>
  <div>
  </div>

Надеюсь, это поможет!

0 голосов
/ 11 июля 2020

, поскольку вы используете bootstrap, вам необходимо настроить каждый элемент. 

.mega-menu {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 90px;
  max-width: 630px;
  background: rgb(45, 98, 214);
  z-index: 1;
}

.mega-menu a {
  display: block;
  color: white;
  margin: 5px;
  font-size: 15px;
}

.row-reset {
  margin-left: 0;
  margin-right: 0;
}


.mega-menu > div > div {
  padding: 0;
}

.mega-menu > div > div ul {
  padding: 0;
  margin-bottom: 0rem;
}

.mega-menu > div > div ul li {
  list-style: none;
  border: 1px solid #ffffff;
  padding: 5px 25px;
}
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    
<div class="mega-menu">
  <div class="row row-reset">
    <div class="col-xl-6">
      <ul>
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2 </a></li>
        <li><a href="#">test 3</a></li>
      </ul>
    </div>
    <div class="col-xl-6">
      <ul>
        <li><a href="#">test 4</a></li>
        <li><a href="#">test 5 </a></li>
        <li><a href="#">test 6</a></li>
      </ul>
    </div>
  </div>
</div>
...