Блог

Главная - Вопросы по программированию - CSS подчеркивание с помощью того же элемента, что и выше

CSS подчеркивание с помощью того же элемента, что и выше

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать следующий вид:

введите описание изображения здесь

Как вы можете видеть на этом рисунке, даже если в пункте меню «sub» есть некоторые отступы, граница все равно работает.

Итак, вот что я попытался:

 .menu-ul {
  list-style-type: none;
}
.menu-li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(50, 50, 50, 0.3);
  width: 100%;
}
a {
  font-family: Titillium Web;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #323232;
  text-decoration: none;
}

a:hover {
  color: #DB091C;
}
.sub-menu-ul {
  padding: 0px;
  list-style-type: none;
  border-top: 1px solid rgba(50, 50, 50, 0.3);
}
.sub-menu-li {
  padding: 10px;
  width: calc(100% - 20px);
  border-top: 1px solid rgba(50, 50, 50, 0.3);
}
hr.solid {
  border-top: 3px solid #bbb;
}  
 <link href="https://pro.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet"/>
<nav style="width: 300px">
        <ul class="menu-ul">
            <li class="menu-li">
            <a href="" >Title </a> 
            <span style="float: right"><i class="fa fa-angle-down"></i></span>

              <div style="display: block">
               <ul class="sub-menu-ul">
                  <li class="sub-menu-li"> <a href="#">
                        Sub menu item2
                  </a>
        <span style="float: right"><i class="fa fa-angle-right"></i></span>
                  </li>
                  </li>
                  <li class="sub-menu-li"> <a href="#">
                        Sub menu item2
                  </a>
 
                  </li>
               </ul>
              </div>
            </li>
            <li class="menu-li"><a href="" >Title 2</a>

            </li>
            <li class="menu-li"><a href="" >Title 2</a> </li>
        </ul>
      </nav>

Но, похоже, я не могу правильно определить границу.

Комментарии:

1. Вы пробовали использовать аккордеоны JS?

Ответ №1:

Попробуйте это, я изменил отступы для menu-li и ширину sub-menu-li 

 .menu-li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(50, 50, 50, 0.3);
  width: 100%;
}
.sub-menu-li {
  padding: 10px;
  padding-right: 0;
  width: calc(100% - 10px);
  border-top: 1px solid rgba(50, 50, 50, 0.3);
}

Комментарии:

1. Эй, приятель, это сработало, один вопрос подумал, что у меня есть несколько значков на уровне подменю, как я могу убедиться, что они совпадают с верхним, позвольте мне отредактировать мой пост, чтобы он соответствовал ему

2. @MarcRasmussen ты имеешь в виду > значок?

3. Балджу, да, это тот

4. добавьте тег span после вашего тега привязки, подобного этому <a href="#">Sub menu item2</a><span>></span> , и css для него span{float: right;}