I have this mega-menu, some of the links have fairly long names, when the window is made smaller the longer links overlap text on the the other columns. I added the following rules to the ul class,
.sub-menu-lists {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I had tried adding these rules to the li class .hover_drop_down and also .hover_drop_down a, neither of these helped.
The overlap is gone, but the link is just cut off. I can not get the ellipsis to show up. I want them to trail to the end of the column.
here is my codepen, going into the software menu shows the problem. Any suggestions on how to accomplish this??
https://codepen.io/iamgonge/full/egqPQR
You have to assign these settings to the li elements, not to the ul as you did. So, that's this selector:
ul.main-nav > li ul.sub-menu-lists > li {...}
Related
I have a problem with part of the html and css code
I am working on a menu that has children. Unfortunately, this child cannot be opened by holding the mouse over it. I have put the html & css code inside the website site so that friends can give a proper guide.
[https://codepen.io/croner2/pen/vYRrpMg][1]
The below code was missing, where we make the dropdown ul tag visible on hover!
#mainNavigation nav.desktop ul li.dropdown:hover ul {
visibility: visible;
opacity:1;
}
codepen
I am using Twitter bootstrap and CSS to style a dropdown. I have a child element that floats on the left and then text that flows to the right of it. Unfortunately the text does not flow within the containing box and spills over.
I' not sure if this is a Twitter bootstrap issue or just a CSS issue (ultimately a CSS isseu I know but worth tagging this as Twitter Bootstrap too since I'm using that framework).
I've tried several combinations, and obviously not the right combination to achieve the behavior I'm after. Does anyone know how to fix this? A working example of the problem is here:
http://ec2-54-215-108-9.us-west-1.compute.amazonaws.com/
(click on the International Gymnast link on the right)
Here is a screenshot demonstrating the issue as well.
Thanks,
Karl..
Its because links in dropdowns in TWBS have white-space: nowrap;.
The easiest solution i could think of is creating a custom CSS class:
.dropdown-menu > li > a.btn-wrap {
white-space: normal;
}
And then adding class="btn-wrap" to your <a> element
.dropdown-menu > li > a ,
.btn.btn-default.btn-large.btn-left > span {
white-space: normal;
}
I would also reduce the line-height on the a tag.
Reduce the height on [.live-mon]
Remove the height on the a tag.
Increase the padding top and bottom on the a tag.
.intl-link li a {
overflow: hidden;
}
.intl-link li a {
line-height: 19px;
}
.dropdown-menu.intl-link > li > a {
padding: 7px 20px;
}
.live-mon {
display: block;
height: 62px;
width: 92px;
}
You would get something like this:
I'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}
Im trying to create a menu bar which uses image buttons.On my menu bar, I can see my images on it but I can not click them. I used text-indent: 100%; white-space: nowrap; overflow: hidden; in my css file to hide links text. My link text became hidden but links became inactive. Moreover i tried text-indent:-9999px; but result was same. I could not find the problem maybe my html or css structure is wrong. Could you pls check it ?
I updated html and css file on jsfiddle
jsfiddle
try this:
nav ul li a{display: block}
Its Working
nav ul li a
{
display: block
}
I'm not quite sure why, but the CSS code in this fiddle does not work properly in Chrome. In Firefox, if you hover on one of the li elements, the text would become visible but not in Chrome. Apparently, in Chrome if you change the display attribute on hover, the whole CSS rule for the li element would just get ignored (The state doesn't change to hover actually). However, if you use the Chrome Developer Tools to change the state of the element manually, it'd work just fine. Am I missing something here? Or is this a bug in Chrome? I've tested this in Chrome 22 (stable release) and 24 (dev channel release).
I don't know what is getting ignored as you said, because I see no difference, but by removing display: inline;
li:hover
{
overflow: visible;
}
and it works
My Fiddle
Updated Fiddle assuming you need to have a background color for the text
Updated Fiddle
HTML
<ul>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
</ul>
CSS
ul
{
width: 100px;
}
li
{
overflow: hidden;
text-overflow: ellipsis;
}
li:hover
{
overflow: visible;
}
li:hover span
{
background-color: #ff0000;
}
While having the text wrapped in a span would allow you to modify the display attribute, it's redundant in this case because you want to set it to inline. Wrapping it inside the span element is enough.