Mixing
Submenu drops one line lower than it should
Hi guys and Happy New Year!
I am having some trouble with the CSS of the navigation menu submenu items on my WordPress website.
As you can see in the screenshot, the sub-submenu is displayed one line further down than it should be, making it nearly impossible for the user to use it.
The website is live on here and I'm struggling to find what is wrong with the CSS. Everything seems fine.
Can anyone help me out? What should I add/change to ensure that the 3rd level menu items appear in the correct place?
Thank you very much in advance for your help and time!
css submenu
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
add a comment |
Hi guys and Happy New Year!
I am having some trouble with the CSS of the navigation menu submenu items on my WordPress website.
As you can see in the screenshot, the sub-submenu is displayed one line further down than it should be, making it nearly impossible for the user to use it.
The website is live on here and I'm struggling to find what is wrong with the CSS. Everything seems fine.
Can anyone help me out? What should I add/change to ensure that the 3rd level menu items appear in the correct place?
Thank you very much in advance for your help and time!
css submenu
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
Are you able to show a small part of your code that reproduces the problem?
– ksav
Jan 1 at 13:01
add a comment |
Hi guys and Happy New Year!
I am having some trouble with the CSS of the navigation menu submenu items on my WordPress website.
As you can see in the screenshot, the sub-submenu is displayed one line further down than it should be, making it nearly impossible for the user to use it.
The website is live on here and I'm struggling to find what is wrong with the CSS. Everything seems fine.
Can anyone help me out? What should I add/change to ensure that the 3rd level menu items appear in the correct place?
Thank you very much in advance for your help and time!
css submenu
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
Hi guys and Happy New Year!
I am having some trouble with the CSS of the navigation menu submenu items on my WordPress website.
As you can see in the screenshot, the sub-submenu is displayed one line further down than it should be, making it nearly impossible for the user to use it.
The website is live on here and I'm struggling to find what is wrong with the CSS. Everything seems fine.
Can anyone help me out? What should I add/change to ensure that the 3rd level menu items appear in the correct place?
Thank you very much in advance for your help and time!
css submenu
css submenu
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
asked Jan 1 at 12:58
kr3t3nkr3t3n
247
247
Are you able to show a small part of your code that reproduces the problem?
– ksav
Jan 1 at 13:01
add a comment |
Are you able to show a small part of your code that reproduces the problem?
– ksav
Jan 1 at 13:01
Are you able to show a small part of your code that reproduces the problem?
– ksav
Jan 1 at 13:01
Are you able to show a small part of your code that reproduces the problem?
– ksav
Jan 1 at 13:01
add a comment |
2 Answers
2
active
oldest
votes
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
answered Jan 1 at 13:16
LakshmanLakshman
206
add a comment |
The following code solved it:
@media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995630%2fsubmenu-drops-one-line-lower-than-it-should%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
answered Jan 1 at 13:16
LakshmanLakshman
206
add a comment |
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
answered Jan 1 at 13:16
LakshmanLakshman
206
add a comment |
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
answered Jan 1 at 13:16
LakshmanLakshman
206
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
answered Jan 1 at 13:16
LakshmanLakshman
206
answered Jan 1 at 13:16
LakshmanLakshman
206
answered Jan 1 at 13:16
LakshmanLakshman
206
answered Jan 1 at 13:16
LakshmanLakshman
206
206
add a comment |
add a comment |
The following code solved it:
@media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
add a comment |
The following code solved it:
@media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
add a comment |
The following code solved it:
@media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
The following code solved it:
@media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
answered Jan 1 at 13:33
kr3t3nkr3t3n
247
247
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995630%2fsubmenu-drops-one-line-lower-than-it-should%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you able to show a small part of your code that reproduces the problem?
– ksav
Jan 1 at 13:01