Question

好吧，我有一个类别面板图片，我正在尝试将其创建为HTML。

我已经尝试过这段代码，但是我将鼠标悬停在一个类别上，出现了一个sub_category面板，但每个面板的顶部似乎都有边距。我希望每个面板都像图片一样具有相同的位置。

我试过top: 0，但没有任何影响。有人可以帮忙吗？

.category_nav {
  height: 40px;
  margin-top: 28px;
}

.category_nav_ul {
  list-style-type: none;
  padding: 0;
}

.category_nav_ul>li {
  display: inline-block;
}

#category_nav_ul_category {
  width: 380px;
  cursor: pointer;
}

#category_nav_div {
  margin-top: 5px;
  width: 380px;
  position: absolute;
  background-color: white;
  padding-bottom: 10px;
}

.category {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 1px;
  margin-left: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
}

.category:hover {
  border: 2px;
  background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
  background-color: white;
  border-top: 1px solid grey !important;
  border-bottom: 1px solid grey !important;
}

.fa-chevron-right {
  font-weight: 100px !important;
  font-size: 10px !important;
}

.left-menu-ul {
  list-style: none;
}

.left-mega-menu {
  background: #fff none repeat scroll 0 0;
  left: 90%;
  position: absolute;
  top: 0;
  width: 470px;
  opacity: 0;
  visibility: hidden;
  z-index: 2345;
  transition: .3s;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 60px;
}

.left-menu ul li:hover>.left-mega-menu {
  opacity: 1;
  visibility: visible;
  left: 100%;
}

.sub_categories {
  border-radius: 0 !important;
  padding-top: 6px;
  padding-bottom: 6px;
  border-left: 2px solid #E5002B;
  border-top: 0px !important;
  border-right: 0px !important;
  width: 200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
  <div class="left-menu collapse in" id="left-menu">
    <nav>
      <ul class="left-menu-ul list-group">
        <li class="category list-group-item">
          <i class="fa fa-camera fa-fw"></i>
          <a href="/mystore/category/Camera">Camera
										<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
									</a>


          <div class="left-mega-menu light-border">

            <div class="row">
              <ul class="list-group">
                <div class="col-lg-6">
                  <a href="/mystorecategory/Camera/sub_cat/">
                    <li class="list-group-item sub_categories">Camera</li>
                  </a>
                </div>
              </ul>
            </div>


          </div>
        </li>
        <li class="category list-group-item">
          <i class="fa fa-angle-right fa-fw"></i>
          <a href="/mystore/category/Clothes">Clothes
										<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
									</a>


          <div class="left-mega-menu light-border">

            <div class="row">
              <ul class="list-group">
                <div class="col-lg-6">
                  <a href="/mystorecategory/Clothes/sub_cat/">
                    <li class="list-group-item sub_categories">Clothes</li>
                  </a>
                </div>
              </ul>
            </div>


          </div>
        </li>
        <li class="category list-group-item">
          <i class="fa fa-mobile fa-fw"></i>
          <a href="/mystore/category/Mobiles">Mobiles
										<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
									</a>


          <div class="left-mega-menu light-border">

            <div class="row">
              <ul class="list-group">
                <div class="col-lg-6">
                  <a href="/mystorecategory/Mobiles/sub_cat/">
                    <li class="list-group-item sub_categories">Mobiles</li>
                  </a>
                </div>
                <div class="col-lg-6">
                  <a href="/mystorecategory/Tablet/sub_cat/">
                    <li class="list-group-item sub_categories">Tablet</li>
                  </a>
                </div>
              </ul>
            </div>


          </div>
        </li>
        <li class="category list-group-item">
          <i class="fa fa-angle-right fa-fw"></i>
          <a href="/mystore/category/Graphics Cards">Graphics Cards
										<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
									</a>


          <div class="left-mega-menu light-border">

            <div class="row">
              <ul class="list-group">
                <div class="col-lg-6">
                  <a href="/mystorecategory/Graphics Cards/sub_cat/">
                    <li class="list-group-item sub_categories">Graphics Cards</li>
                  </a>
                </div>
                <div class="col-lg-6">
                  <a href="/mystorecategory/Computer/sub_cat/">
                    <li class="list-group-item sub_categories">Computer</li>
                  </a>
                </div>
                <div class="col-lg-6">
                  <a href="/mystorecategory/DVDs/sub_cat/">
                    <li class="list-group-item sub_categories">DVDs</li>
                  </a>
                </div>
                <div class="col-lg-6">
                  <a href="/mystorecategory/Laptop/sub_cat/">
                    <li class="list-group-item sub_categories">Laptop</li>
                  </a>
                </div>
              </ul>
            </div>


          </div>
        </li>
        <li class="category list-group-item">
          <i class="fa fa-television fa-fw"></i>
          <a href="/mystore/category/Television">Television
										<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
									</a>


          <div class="left-mega-menu light-border">

            <div class="row">
              <ul class="list-group">
                <div class="col-lg-6">
                  <a href="/mystorecategory/Television/sub_cat/">
                    <li class="list-group-item sub_categories">Television</li>
                  </a>
                </div>
              </ul>
            </div>


          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

从li类别移除相对位置并将其应用于其父级

.left-menu-ul {
    list-style: none;
    position: relative;
}

fiddle

如何让div保持在同一位置css

1 个答案: