Trying to add right margin for the drop down item to the last menu item.
Here is the menu:
https://jsfiddle.net/5tymk7o4/11/
Here s what I'd like to get:
Here is what I have tried:
.dropdown-menu {
right: 0;
/* or */
margin-right: 0px;
}
both didn't work well
I have also tried to
1. add right margin to UL
2. to make UL relative and add right: o to LI...
all in vain...
I swear I have searched for a good while before posting this question.
thanks!
As mentioned in previous answers, you can use right: 0 for that particular item.
To avoid targeting other menu items, use this selector:
#menue .menu-item:last-child .dropdown-menu {
right: 0;
left: initial;
margin-right: auto !important; /* Only if you can't delete the inline margin-right applied to this element */
}
This will apply the css only to the the dropdown menu inside the last menu item, leaving the alignment of the rest as is.
Replace the inline margin-right: 1200px on the ul for the last menu item with:
left: auto; right: 0;
If you add right: 0, left must be auto to work how you want
.dropdown-menu {
left: auto;
right: 0;
}
Related
I'm looking at this CSS menu https://codepen.io/StephenScaff/pen/bVbEbJ and it seems to do what I want apart from the '>' image/icon at the end of each menu option.
Is there a way to only show this image/icon if there is a submenu/flyout ?
I've worked it it is being added using
.sidebar-nav>ul>li>a:after {
content: "";
font-family: ionicons;
font-size: 0.5em;
width: 10px;
color: #fff;
position: absolute;
right: 0.75em;
top: 45%;
}
But I don't know how to only apply that to the menu entries with sub entries.
Thanks
You can add a class "has-sub-entries" to the links that should have it.
.sidebar-nav>ul>li>a.has-sub-entries:after {
}
so you remove the :after element on
.sidebar-nav>ul>li>a:after
In this site http://rgdev.realtyguard.com/ In "Find your dream home!" section I am having problem with dropdown which is cut down when I click on it.
I would like to see the div above the main div.
Find out the following attachment
Please help.
Thanks.
There is a padding and margin on ul.chosen-results which means that the items dont reach the edge. To remove this all you have to do is add this to your css:
.chosen-results {
padding: 0;
margin: 0;
}
You can set margin-right: 0 to:
#ihf-main-container ul,
#ihf-main-container ol {
margin-top: 0;
margin-bottom: 10px;
margin-right: 0;/*add margin right 0*/
}
How to open bootstrap-dropdown when i click on cell within ng-grid ?
I can open it only partially.
Here's plunker
I think you need to add this to your CSS:
.ngCell {
overflow: visible;
}
which allows the ngCell to display the drop down like you want. The issue that I'm having is getting the drop down on a lower cell to appear over the ngGrid footer rather than increasing the size of the scroll bar.
This CSS worked for me so something in this direction will hopefully work for you
.dropdown-menu {
position: fixed;
display: block;
margin: 22px;
top: auto;
left: 0px;
padding: 0px;
Before my english a little. So I am sorry.
I try a dropown menu with css. When completed the menu, as below image final view.
Sub menu list must be side by side.
But my problem. My list are not happening side-by-side in sub-menu class.
EDIT
If I write a constant width for #dl_menu .sub-menu everything is ok. But my .sub-menu maybe possible 3 item, maybe 6 item and my sub-menu is width change it. isnt' it. ?
So I can't write constant width.
Example as this link.
http://jsbin.com/fulekulo/7/edit?html,css,output
Thank you for help.
Thank you.
Change Your Menu CSS Like This
#dl_menu .sub-menu {
display: table;
position: absolute;
padding: 0;
right: 0;
top: 40px;
float: left;
width: 304px;
left: 0px;
top: 30px;
}
#dl_menu .sub-menu{width:400px;}
http://jsfiddle.net/kisspa/dsx8R/
In HTML page I have a navigation menu that when hover(mouse over) above some menu items, a submenu/dropdown menu appears. Then moving mouse above some of the submenu's items another submenu appears/dropright submenu. To understand the concept, see jsfiddle.
Now, try to hover above menu item Categories->All->IT, and you can see that item Programming is somehow overlapped with text on the page/background. And item after it can not be accessed then.
See CSS styles. What is causing this, and how to prevent that overlapping?
Just set a high z-index on your .droprightMenu and that will place the dropdown above that text
ex:
.droprightMenu {
display: none;
/* hide the sub menus */
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100; /*ADD Z-INDEX*/
}
Try this DEMO, comment position: relative; out:
#homeMainContent #pages {
// position: relative;
text-align: center;
font-weight: bold;
}
Please let me know if this works for you
Just add z-index: 99 to .dropdownMenu, it will be fine.
See : http://jsfiddle.net/CDx9j/4/
To understand : your #pages element use a position relative, such as your dropdown menu. As the #pages element comes after the menu in the HTML float, it will come over the menu.