Wordpress Principal Menu and Submenu. The dropdown flikers a lot an disappear when i hover over it. What's going wrong and how can I fix it?
PRODUCTO > CLICLISMO
#menu-item-3083 .nav-column-links {
display: none;
}
#menu-item-3083 a:hover+.nav-column-links,
#menu-item-3083 a {
display: block !important;
}
#menu-item-3083 .nav-column-links {
position: absolute;
left: 32em;
top: 30px;
}
<li id="menu-item-3083" class="menu-item-3083">
Ciclismo >
<div class="nav-column-links">
<ul>
<li id="menu-item-3643" class="menu-item-3643">Elite Bib Short Hombre</li>
<li id="menu-item-3644" class="menu-item-3644">Elite Jersey Hombre</li>
<li id="menu-item-3645" class="menu-item-3645">Performance Bib Short Mujer</li>
<li id="menu-item-3646" class="menu-item-3646">Performance Jersey Mujer</li>
</ul>
</div>
</li>
Change #menu-item-3083 a:hover + .nav-column-links, #menu-item-3083 a
to
#menu-item-3083:hover .nav-column-links, #menu-item-3083 a {
display: block !important;
}
Do this for all the other menus:
#menu-item-3083 a:hover + becomes #menu-item-3083:hover
Related
I'm trying to follow this tutorial on codepen to make an animated underline when a user hovers over a link in the navbar. Currently, I have the line appearing but only shows one underline underneath the whole nav list. I am trying to achieve the line appearing underneath the hovered link.
.navbar-fixed-left .navList a.link {
text-decoration: none;
}
/*Removing bullet points */
.navbar-fixed-left .navList li {
list-style-type: none;
}
.link::before {
transition: 300ms;
height: 2px;
content: "";
position: absolute;
background-color: #031D44;
}
.link-ltr::before {
width: 0%;
bottom: 10px;
}
/* Length of the line */
.link-ltr:hover::before {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-left mt-4">
<ul class="navList">
<li><a class="link link-ltr" href="about.html">About</a></li>
<li><a class="link link-ltr" href="resume.html">Resume</a></li>
<li><a class="link link-ltr" href="projects.html">Projects</a></li>
<li><a class="link link-ltr" href="databasediagram.html">Database Diagrams</a></li>
<li><a class="link link-ltr" href="apiunittests.html">API Unit Tests</a></li>
<li><a class="link link-ltr" href="bucketlist.html#">Bucket List</a></li>
</ul>
</div>
Any help would be appreciated thank you!
you need to add a relative position to .link so that the underline will be relative to the link's position. and then just set the top or bottom position of the underline to make it appear on the bottom of the link.
.link { position: relative }
You must just add this element in CSS:
.link {
padding: 20px 0px;
display: inline-block;
position: relative;
}
I have a menu with different items, these items are returned from a controller, and looks like this.
#foreach (var item in ViewBag.LoggedIn)
{
if (item.Url == path)
{
<li><a class="active" href="#item.Url">#item.Text</a></li>
}
else
{
<li>#item.Text</li>
}
<li class="slider"></li>
}
It is the "li" at the end, which is of class="slider" which is the "hover/slider" I somehow have to define the starting position of that slider.
The hovering is defined like this in the css.
.menu li:nth-child(1):hover ~ .slider,
.menu li:nth-child(1):focus ~ .slider,
.menu li:nth-child(1):active ~ .slider {
left: 0;
background-color: #3498db;
}
.menu li:nth-child(2):hover ~ .slider,
.menu li:nth-child(2):focus ~ .slider,
.menu li:nth-child(2):active ~ .slider {
left: 20%;
background-color: #9b59b6;
}
and so on.
The selected link is defined as active after the button is pushed. The problem is that the "hover/slider" starts at the left side.
This is illustrated in the picture below. In that example About is clicked, but the "hover/slider" starts at Home, which is kinda weird.
I would like to know how I could make the slider/hover (which is at Home in the image) to be where the link is active (About)
The generated HTML is provided below.
<ul class="menu">
<li>
Home
</li>
<li>
Contact
</li>
<li>
<a class="active" href="/Home/About">About</a>
</li>
<li>
Register
</li>
<li>
Log in
</li>
<li class="slider" id="menu_slider"></li>
</ul>
When implementing the slider in the answer I get the following error (the red line is not supposed to be covering the entire menu, just the selected link)
Here is what I understand from your question: You want to move your "slider" under the link that is currently active or hovered. If this is what you want then I have a solution for you.
Since you didn't provide your CSS properties for the rest of the menu, I am using my own CSS properties to achieve this.
Instead of moving the "slider", I am using the padding-bottom property to move the slider. When you run this in your browser, it simulates as if it moved the "slider"
.menu li a.active,
.menu li a:hover {
background-color: #E74C3C;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
Here is the complete solution in code snippet below. Do let me know if this isn't what you wanted and I will update my answer.
.menu {
flex-direction: row;
padding-left: 0;
margin-bottom: 0;
list-style: none;
display: flex;
}
.menu li:not(.slider) {
box-sizing: border-box;
background: #2C3E50;
width: 100%;
}
.menu li a {
color: white;
text-decoration: none;
display: block;
padding: 1rem;
}
.menu li a.active,
.menu li a:hover {
background-color: #E74C3C;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
.menu .slider {
height: 5px;
width: calc(100% - 1rem);
position: fixed;
margin-top: 50px;
background: #D6F1FF;
}
<ul class="menu">
<li>
Home
</li>
<li>
Contact
</li>
<li>
<a class="active" href="/Home/About">About</a>
</li>
<li>
Register
</li>
<li>
Log in
</li>
<li class="slider" id="menu_slider"></li>
</ul>
I'm trying to add a drop-down menu for one of the options in my nav menu for a simple html page. However, when I hover over the nav menu option, the menu doesn't actually drop down. It just replaces the nav menu option with the first option in the drop-down whenever I hover over it. I'm not exactly sure why it isn't "dropping down".
Any help would be really appreciated... Here's the HTML for the nav and attempted drop-down.
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
and here is the CSS snippet for the Dropdown menu:
.dropdown {
float: left;
background-color: #FFF0F5;
width: 100%;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #FFF0F5;
height: 200px;
width: 100%;
z-index: 1;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownContent a:hover {background-color: #fff8dc;}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
I'm not really sure why the drop-down part isn't displaying, i'm sure it's some stupid mistake but it's eluded me for an hour and a half...
I see you have mentioned position: absolute in dropdownContent class. This is causing to overlap. Just remove it and try. By default it sets to static, which mean Elements render in order, as they appear in the document flow. Where as absolute means element is positioned relative to its first positioned ancestor element.
The problem is in your HTML.
For the dropdown within an item of the 1st level you'll need a code block that looks like your 1st level. That is, another <ul> with a group of <li>s one for each 2nd level option.
You have a lot of unwanted css and markup. Just fix it. I have created a basic one for you. May be you can try,
.dropdownContent {
display: none;
background-color: #FFF0F5;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropdownContent a{
display: block;
}
.dropdown:hover .dropdownContent {
display: block;
z-index: 1;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">
History
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
The thing that's causing the problem is that when I make the size of the window smaller (restore down), the 4th sub div of class=Menu is not behaving like the other 3 divs, which I gave 25% width each. Instead, it is overflowing horizontally and going past the body, header and footer.
/*---------Dropdown----------*/
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
width:25%;
}
.Menu li {
width: 14.84em;
}
.Menu li ul { /*Hides dropdown*/
position: absolute;
left: -999em;
}
.Menu li:hover ul { /*Makes the dropdown show on hover*/
left: auto;
}
.Menu a { /*Styles the links on menubar */
color: black;
text-decoration: none;
display: block;
}
.Menu a:hover { /*background color of links change on
hover*/
background-color: #dcefdc;
}
.Menu div a{
padding-top:11px;
}
.Menu div a:hover{
height:50px;
}
.liwidth{
float:left;
background-color:#4CAF50 ;
height:50px;
}
/*----------Dropdown ends-----------*/
<div id="DivMenu">
<div class="Menu"><a style="text-decoration:none;" href="index.html">HomePage</a></div>
<div class="Menu"><a style="text-decoration:none;" href="About.html">About</a></div>
<div class="Menu"><a style="text-decoration:none;" href="Survey.html">Take our survey </a></div>
<div class="Menu">
<li>
Login/Register
<ul>
<div>
<li class="liwidth">
<a class="linkvalign" href="Login.html">Login</a>
</li>
<li class="liwidth" >
<a class="linkvalign" href="Register.html">Register</a>
</li>
</div>
</ul>
</li>
</div>
</div>
I can see that the thing causing the problem is the <li>'s in the 4th div, but I can't figure out how to arrange it so that it doesn't overflow.
I've tried removing the <li> tags altogether but that just causes more issues.
I'm not completely sure I understand what you're trying to do, and therefore what the proper solution should be, but adding overflow: hidden to .Main will prevent its content from overflowing at least.
I have basically this html code:
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
</ul>
Is there a way to expand the clickable area of the link to the size of the li element by keeping the links position and the description nicely below the link?
I tried to use absolute positioning for both the link and the description but this fails if for example the link text has a line break. As you can see in this jsFiddle: http://jsfiddle.net/xgcjngvs/3/
I would love to find a solution for this problem without javascript.
EDIT: I should have mentioned that the link tag should only contain the plain text and not any other html code.
Given your new requirement there is another way that this can be achieved without changes to your existing HTML structure:
Remove the absolute positioning from .list-item-link and .list-item-link-description, position: absolute; takes the elements out of the document flow and these two need to be aware of how much space each of them take up
Add a pseudo element to .list-item-link using .list-item-link:after, make this position: absolute; and set the height and width to take up the dimensions of the container.
.unordered-list {
list-style: none;
padding-left: 0;
}
.list-item {
min-height: 50px;
position: relative;
}
.list-item-link {
width: 100%;
}
.list-item-link:after {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.list-item-link-description {
margin: 0;
}
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
</ul>
JS Fiddle: http://jsfiddle.net/5s44c95q/
This is possible with a few changes to your markup and css:
Change list-item-block into the a element and set it as display: block;
Change list-item-link and list-item-link-description into span elements as only inline elements are valid in a elements
Style list-item-link to look like the link
Style list-item-link-description to look like the paragraph
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
height: 50px;
}
.list-item-block {
display: block;
min-height: 100%;
text-decoration: none;
}
.list-item-link {
text-decoration: underline;
}
.list-item-link-description {
color: #000000;
display: block;
text-decoration: none;
}
<ul class="unordered-list">
<li class="list-item">
<a href="www.google.com" class="list-item-block">
<span class="list-item-link">Sometimes a wrapped link to Google</span>
<span class="list-item-link-description">Short description of the link above</span>
</a>
</li>
<li class="list-item">
<a href="www.google.com" class="list-item-block">
<span class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</span>
<span class="list-item-link-description">Short description of the link above</span>
</a>
</li>
</ul>
If your short description will be on 1 line, you can add padding-bottom to the list-item-link and then move the description up by the same amount and also set a negative margin-bottom for the block as a whole. If you do the padding in ems, it should take care of different font sizes.
To make the short description clickable, you need to make the z-index of the link higher than the description.
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
margin-top:10px;
margin-bottom:-2em;
position:relative;
}
.list-item-link {
display:block;
position:relative;
border:1px #000 solid; /*to show link area */
padding-bottom:2em;
z-index:1;
}
.list-item-link-description {
position:relative;
top:-2em;
}
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.
<p class="list-item-link-description">Short description of the link above 2</p>
</div>
</li>
</ul>
EDIT: I removed the paragraph tags as you have requested but I can not get it to work any other way without the span, so the span would have to stay in place.
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
<span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</span>
Short description of the link above
</a>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
<span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break This needs to be a longer link then .</span>
Short description of the link above
</a>
</div>
</li>
</ul>
And here's your CSS.
EDIT: New styles to match the top, it's pretty straight forward stuff
a{
text-decoration: none;
color: #000;
}
.anchor-control a{
text-decoration: underline;
width: 100%;
float: left;
color: #00f;
}
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
padding; 0;
margin: 0;
}
.list-item-link {
position: relative;
}
a .list-item-link-description {
position: relative;
color: #000;
margin: 0;
margin-bottom: 10px;
}
EDIT: This should be what you're after.
http://jsfiddle.net/xgcjngvs/9/
css
a{
text-decoration: none;
}
.anchor-control{
text-decoration: underline;
}
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
padding; 0;
margin: 0;
}
.list-item-link {
position: relative;
}
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
.btn-open:after,.btn-close:after{
position:absolute;
right:280px;
top:0;
}
.btn-open:after{
content: "\25BC";
}
.btn-close:after{
content: "\25B2";
}
<ul class="unordered-list">
<li class="list-item">
<span class='anchor-control'>Sometimes a wrapped link to Google</span>
<div id="show">
<div id="content">
Short description of the link above
</div>
</div>
</li>
</ul>
try this JSFIDDLE