Wordpress - подменю отображается неправильно
Вернуться сюда снова. Я пытаюсь завершить навигацию по установке Wordpress. Я не учел трехуровневую навигацию, которая мне понадобится.
Мои первые два уровня отображаются так, как я хотел бы, однако последний уровень отображается под вторым уровнем. Я бы хотел, чтобы он отображался справа от родителя. Я пытался изменить несколько строк кода, но вся навигация сломалась.
Я создал скрипт JS и удалил весь код, кроме полезного.
https://jsfiddle.net/jackniksmith/6y38jv1g/8/
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class = "no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class = "no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class = "no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html ng-app = "curriculum" class = "no-js">
<!--<![endif]-->
<body>
<header>
<div class = "inner">
<div id = "navigation">
<nav class = "nav-main">
<div class = "menu-menu-main-container">
<ul id = "menu-menu-main" class = "menu">
<li id = "menu-item-138" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-77 current_page_item menu-item-138"><a href = "#" aria-current = "page">Home</a></li>
<li id = "menu-item-14005" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14005"><a href = "#">About</a>
<ul class = "sub-menu">
<li id = "menu-item-14017" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14017"><a href = "#">About Us</a></li>
<li id = "menu-item-14018" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14018"><a href = "#">Vision, ethos and mission aims</a></li>
<li id = "menu-item-14019" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14019"><a href = "#">Ofsted Report 2017</a></li>
<li id = "menu-item-14020" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14020"><a href = "#">Governance</a></li>
<li id = "menu-item-14021" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14021"><a href = "#">Quotes and Parental Views</a></li>
<li id = "menu-item-14022" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14022"><a href = "#">Pupil Leadership</a></li>
<li id = "menu-item-14023" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14023"><a href = "#">The Decus Educational Trust</a></li>
<li id = "menu-item-14024" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14024"><a href = "#">Image Gallery</a></li>
</ul>
</li>
<li id = "menu-item-14026" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14026"><a href = "#">Parents</a>
<ul class = "sub-menu">
<li id = "menu-item-14025" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14025"><a href = "#">Attendance</a></li>
<li id = "menu-item-14027" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14027"><a href = "#">Letters</a>
<ul class = "sub-menu">
<li id = "menu-item-14028" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14028"><a href = "#">Letter Bank</a></li>
<li id = "menu-item-14029" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14029"><a href = "#">Newsletters and Learning Letters</a></li>
</ul>
</li>
<li id = "menu-item-14030" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14030"><a href = "#">Safeguarding</a>
<ul class = "sub-menu">
<li id = "menu-item-14031" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14031"><a href = "#">Safeguarding</a></li>
<li id = "menu-item-14032" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14032"><a href = "#">Online Safety</a></li>
</ul>
</li>
<li id = "menu-item-14033" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14033"><a href = "#">Out of Hours Activities</a></li>
<li id = "menu-item-14034" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14034"><a href = "#">PTA</a></li>
<li id = "menu-item-14035" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14035"><a href = "#">Inclusion</a>
<ul class = "sub-menu">
<li id = "menu-item-14036" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14036"><a href = "#">SEND and Inclusion</a></li>
<li id = "menu-item-14037" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14037"><a href = "#">Anti-Bullying</a></li>
<li id = "menu-item-14038" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14038"><a href = "#">Pupil Premium Checklist</a></li>
</ul>
</li>
<li id = "menu-item-14039" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14039"><a href = "#">Key Information</a>
<ul class = "sub-menu">
<li id = "menu-item-14040" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14040"><a href = "#">Term Dates</a></li>
<li id = "menu-item-14041" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14041"><a href = "#">Uniform</a></li>
<li id = "menu-item-14042" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14042"><a href = "#">Lost Property</a></li>
<li id = "menu-item-14043" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14043"><a href = "#">SchoolComms</a></li>
<li id = "menu-item-14044" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14044"><a href = "#">School Menu</a></li>
</ul>
</li>
<li id = "menu-item-14045" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14045"><a href = "#">Nursery</a></li>
<li id = "menu-item-14046" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14046"><a href = "#">Supporting your child’s learning</a>
<ul class = "sub-menu">
<li id = "menu-item-14047" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14047"><a href = "#">Supporting your child’s learning</a></li>
<li id = "menu-item-14048" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14048"><a href = "#">Useful Websites</a></li>
</ul>
</li>
<li id = "menu-item-14049" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14049"><a href = "#">Admissions</a></li>
</ul>
</li>
<li id = "menu-item-88" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href = "#">Curriculum</a></li>
<li id = "menu-item-124" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href = "#">Contact</a></li>
</ul>
</div>
</nav>
<nav class = "sub-nav">
<div class = "menu-sub-menu-container">
<ul id = "menu-sub-menu" class = "menu">
<li id = "menu-item-1701" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-1701"><a href = "#">Calendar</a></li>
<li id = "menu-item-13879" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-13879"><a href = "#">Facebook</a></li>
<li id = "menu-item-13880" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-13880"><a href = "#">Twitter</a></li>
<li id = "menu-item-13881" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-13881"><a href = "#">YouTube</a></li>
<li id = "menu-item-112" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href = "#">Policies</a></li>
<li id = "menu-item-5139" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-5139"><a href = "#">Vacancies</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</body>
</html>
CSS
body { background: #e6eef2; }
header { background: #FFFFFF; overflow: auto; }
.inner { width: 1000px; margin: 0 auto; }
.main { width: 1000px; margin: 0 auto; background: #FFFFFF;
overflow: auto; }
.home-section { padding: 60px 0; overflow: auto; position:
relative; }
#logo { width: 250px; padding: 40px 0; float: left; }
#logo-img { width: 100%; }
.nav-main { float: right; position: relative; }
.nav-main ul { text-align: right; font-size: 18px; padding-top:
35px; }
.nav-main ul li { display: inline-block; margin-left: 15px;
position: relative; }
.nav-main ul li a { color: #666; text-decoration: none; }
.nav-main ul ul { display: none; position: absolute; left: 0;
width: 150px; padding: 0; left: 0; margin: 0; text-align:
left; }
.nav-main ul ul li { background: grey; padding: 5px 10px;
margin-left: 0; z-index: 999999; }
.nav-main ul ul li a { padding: 0; }
.nav-main ul li:hover>ul { display: block; }
.sub-nav { float: right; clear: right; }
.sub-nav ul { text-align: right; font-size: 14px; margin: 0 0
15px 0; }
.sub-nav ul li { display: inline-block; margin-left: 15px; }
.sub-nav ul li h2 { font-size: 14px; font-weight: normal;
margin: 0; }
.sub-nav ul li a { color: #999; text-decoration: none; }
#navigation { float: right; width: 50%; position: absolute; left: 482px; }
Например, если вы перейдете в «Родители» > «Письма». При наведении на буквы под ними будет отображаться третий уровень.
Если кто-то может объяснить, что мне не хватает, я был бы очень благодарен.
Спасибо
разъем
Привет, я бы хотел, чтобы это было справа от родительского элемента. Изменил мой Z-Index и он не работает? Спасибо
—
23.04.2019 13:13
Тогда начните с изменения left: 0 …
—
23.04.2019 13:16
Вы должны поддерживать IE7? Вы должны поддерживать IE8??
—
23.04.2019 13:18
Мы не знаем, на меня только что свалили эту работу, так что я учусь по ходу дела. Материал IE должен быть от оригинального разработчика.
—
23.04.2019 13:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
5
28
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Замените ниже CSS:
body {
background: #e6eef2;
}
header {
background: #FFFFFF;
overflow: auto;
}
.inner {
width: 1000px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 0 auto;
background: #FFFFFF;
overflow: auto;
}
.home-section {
padding: 60px 0;
overflow: auto;
position: relative;
}
#logo {
width: 250px;
padding: 40px 0;
float: left;
}
#logo-img {
width: 100%;
}
.nav-main {
float: right;
position: relative;
}
.nav-main ul {
text-align: right;
font-size: 18px;
padding-top: 35px;
}
.nav-main ul li {
display: inline-block;
margin-left: 15px;
position: relative;
}
.nav-main ul li a {
color: #666;
text-decoration: none;
}
.nav-main ul ul {
display: none;
position: absolute;
left: 0;
width: 150px;
padding: 0;
margin: 0;
text-align: left;
top:20px;
background: grey;
}
.nav-main ul ul ul {
display: none;
position: absolute;
left: 150px;
width: 150px;
padding: 0;
top: 10px;
margin: 0;
text-align: left;
background: #CCC;
}
.nav-main ul ul li {
padding: 5px 10px;
margin-left: 0;
width:100%;
z-index: 999999;
}
.nav-main ul ul li a {
padding: 0;
}
.nav-main ul li:hover>ul {
display: block;
}
.sub-nav {
float: right;
clear: right;
}
.sub-nav ul {
text-align: right;
font-size: 14px;
margin: 0 0 15px 0;
}
.sub-nav ul li {
display: inline-block;
margin-left: 15px;
}
.sub-nav ul li h2 {
font-size: 14px;
font-weight: normal;
margin: 0;
}
.sub-nav ul li a {
color: #999;
text-decoration: none;
}
#navigation {
float: right;
width: 50%;
position: absolute;
left: 482px;
}Спасибо большое. Этот и приведенные ниже фрагменты кода сработали для меня.
—
23.04.2019 13:41
всегда рад помочь, и не могли бы вы проголосовать за ответ.
—
23.04.2019 14:10
Ответ принят как подходящий
Ваша проблема в том, что вы устанавливаете значения z-index для своих <li>s вместо ваших <ul>s.
Удалите значение z-index на вашем <li> и установите значение индекса на вашем <ul> :
.nav-main ul li:hover > ul {
display: block;
z-index: 1;
}
Вам нужна только эта декларация. Поскольку под-подменю является дочерним по отношению к первому, оно будет над ним, потому что у него также будет z-индекс 1. Посмотрите этот статья, чтобы немного лучше понять z-index (таких много).
Затем, если вы хотите, чтобы второе подменю отображалось слева от его родителя, просто добавьте следующие строки:
.nav-main ul ul ul {
left: 100%;
top: 0;
}
body {
background: #e6eef2;
}
header {
background: #FFFFFF;
overflow: auto;
}
.inner {
width: 1000px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 0 auto;
background: #FFFFFF;
overflow: auto;
}
.home-section {
padding: 60px 0;
overflow: auto;
position: relative;
}
#logo {
width: 250px;
padding: 40px 0;
float: left;
}
#logo-img {
width: 100%;
}
.nav-main {
float: right;
position: relative;
}
.nav-main ul {
text-align: right;
font-size: 18px;
padding-top: 35px;
}
.nav-main ul li {
display: inline-block;
margin-left: 15px;
position: relative;
}
.nav-main ul li a {
color: #666;
text-decoration: none;
}
.nav-main ul ul {
display: none;
position: absolute;
left: 0;
width: 150px;
padding: 0;
left: 0;
margin: 0;
text-align: left;
}
.nav-main ul ul li {
background: grey;
padding: 5px 10px;
margin-left: 0;
}
.nav-main ul ul ul {
left: 100%;
top: 0;
}
.nav-main ul ul ul li {
background: red;
}
.nav-main ul ul li a {
padding: 0;
}
.nav-main ul li:hover > ul {
display: block;
z-index: 1;
}
.sub-nav {
float: right;
clear: right;
}
.sub-nav ul {
text-align: right;
font-size: 14px;
margin: 0 0 15px 0;
}
.sub-nav ul li {
display: inline-block;
margin-left: 15px;
}
.sub-nav ul li h2 {
font-size: 14px;
font-weight: normal;
margin: 0;
}
.sub-nav ul li a {
color: #999;
text-decoration: none;
}
#navigation {
float: right;
width: 50%;
position: absolute;
left: 482px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class = "no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class = "no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class = "no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html ng-app = "curriculum" class = "no-js">
<!--<![endif]-->
<body>
<header>
<div class = "inner">
<div id = "navigation">
<nav class = "nav-main">
<div class = "menu-menu-main-container">
<ul id = "menu-menu-main" class = "menu">
<li id = "menu-item-138" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-77 current_page_item menu-item-138"><a href = "#" aria-current = "page">Home</a></li>
<li id = "menu-item-14005" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14005"><a href = "#">About</a>
<ul class = "sub-menu">
<li id = "menu-item-14017" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14017"><a href = "#">About Us</a></li>
<li id = "menu-item-14018" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14018"><a href = "#">Vision, ethos and mission aims</a></li>
<li id = "menu-item-14019" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14019"><a href = "#">Ofsted Report 2017</a></li>
<li id = "menu-item-14020" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14020"><a href = "#">Governance</a></li>
<li id = "menu-item-14021" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14021"><a href = "#">Quotes and Parental Views</a></li>
<li id = "menu-item-14022" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14022"><a href = "#">Pupil Leadership</a></li>
<li id = "menu-item-14023" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14023"><a href = "#">The Decus Educational Trust</a></li>
<li id = "menu-item-14024" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14024"><a href = "#">Image Gallery</a></li>
</ul>
</li>
<li id = "menu-item-14026" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14026"><a href = "#">Parents</a>
<ul class = "sub-menu">
<li id = "menu-item-14025" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14025"><a href = "#">Attendance</a></li>
<li id = "menu-item-14027" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14027"><a href = "#">Letters</a>
<ul class = "sub-menu">
<li id = "menu-item-14028" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14028"><a href = "#">Letter Bank</a></li>
<li id = "menu-item-14029" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14029"><a href = "#">Newsletters and Learning Letters</a></li>
</ul>
</li>
<li id = "menu-item-14030" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14030"><a href = "#">Safeguarding</a>
<ul class = "sub-menu">
<li id = "menu-item-14031" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14031"><a href = "#">Safeguarding</a></li>
<li id = "menu-item-14032" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14032"><a href = "#">Online Safety</a></li>
</ul>
</li>
<li id = "menu-item-14033" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14033"><a href = "#">Out of Hours Activities</a></li>
<li id = "menu-item-14034" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14034"><a href = "#">PTA</a></li>
<li id = "menu-item-14035" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14035"><a href = "#">Inclusion</a>
<ul class = "sub-menu">
<li id = "menu-item-14036" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14036"><a href = "#">SEND and Inclusion</a></li>
<li id = "menu-item-14037" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14037"><a href = "#">Anti-Bullying</a></li>
<li id = "menu-item-14038" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14038"><a href = "#">Pupil Premium Checklist</a></li>
</ul>
</li>
<li id = "menu-item-14039" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14039"><a href = "#">Key Information</a>
<ul class = "sub-menu">
<li id = "menu-item-14040" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14040"><a href = "#">Term Dates</a></li>
<li id = "menu-item-14041" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14041"><a href = "#">Uniform</a></li>
<li id = "menu-item-14042" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14042"><a href = "#">Lost Property</a></li>
<li id = "menu-item-14043" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14043"><a href = "#">SchoolComms</a></li>
<li id = "menu-item-14044" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14044"><a href = "#">School Menu</a></li>
</ul>
</li>
<li id = "menu-item-14045" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14045"><a href = "#">Nursery</a></li>
<li id = "menu-item-14046" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14046"><a href = "#">Supporting your child’s learning</a>
<ul class = "sub-menu">
<li id = "menu-item-14047" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14047"><a href = "#">Supporting your child’s learning</a></li>
<li id = "menu-item-14048" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14048"><a href = "#">Useful Websites</a></li>
</ul>
</li>
<li id = "menu-item-14049" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-14049"><a href = "#">Admissions</a></li>
</ul>
</li>
<li id = "menu-item-88" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href = "#">Curriculum</a></li>
<li id = "menu-item-124" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href = "#">Contact</a></li>
</ul>
</div>
</nav>
<nav class = "sub-nav">
<div class = "menu-sub-menu-container">
<ul id = "menu-sub-menu" class = "menu">
<li id = "menu-item-1701" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-1701"><a href = "#">Calendar</a></li>
<li id = "menu-item-13879" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-13879"><a href = "#">Facebook</a></li>
<li id = "menu-item-13880" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-13880"><a href = "#">Twitter</a></li>
<li id = "menu-item-13881" class = "menu-item menu-item-type-custom menu-item-object-custom menu-item-13881"><a href = "#">YouTube</a></li>
<li id = "menu-item-112" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href = "#">Policies</a></li>
<li id = "menu-item-5139" class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-5139"><a href = "#">Vacancies</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</body>
</html>Большое спасибо, это решило мою проблему. Мне действительно нужно прочитать о позиционировании css, так как это меня действительно смущает. Спасибо еще раз.
—
23.04.2019 13:40
@JackSmith Прочитайте об этом. Это часть основ CSS. Понимание позиционирования, блочной модели, того, как работают поля и отступы и т. д., является ключом к хорошему CSS.
—
23.04.2019 13:50
Другие вопросы по теме
Отключить переход во время выполнения анимации
Как я могу заменить содержимое класса css?
Почему свойство автозаполнения CSS Grid не работает в направлении столбца
Top = $this.css("top") возвращает объект по сравнению со значением элемента
Обрезать изображение значков
Является ли селектор ::before неподдерживаемым при применении к электронным письмам в формате HTML?
Масштабируемое изображение с текстом рядом с ним
Реагировать дать анимацию только на щелкнутый элемент
Невозможно установить свойства для изображения логотипа, чтобы оно реагировало
Есть ли способ загрузить одну высоту столбца, равную двум столбцам по вертикали?
Похожие вопросы
Почему свойство автозаполнения CSS Grid не работает в направлении столбца
Как получить правильный Xpath для HTML-элемента <li>?
Top = $this.css("top") возвращает объект по сравнению со значением элемента
Является ли селектор ::before неподдерживаемым при применении к электронным письмам в формате HTML?
Масштабируемое изображение с текстом рядом с ним
Невозможно установить свойства для изображения логотипа, чтобы оно реагировало
Удаление атрибутов с двоеточиями с помощью BeautifulSoup Python
Есть ли способ загрузить одну высоту столбца, равную двум столбцам по вертикали?
Я не могу изменить размер кнопки на странице css
Выбор элемента по id внутри элемента DOM
Так вы просто хотите это выше? Затем присвойте этим UL z-индекс. (И сделайте бессмысленное значение
li-z-index: 999999- чем-то более разумным.)