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/
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
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;
}
Im doing this web with Wordpress and one theme but i have a problem with a transition to the submenus.
If you can check the "QUÉ HACEMOS" submenu, you will see that when i try to click on an element of submenú if imposible by the margin top, do you understand ?
If i delete the 38px margin top of sub-menu class no problem, but I need that the submenú start and header border but i have this problem that i cant fix, please help.
Thanks a lot.
Find the following definitions in your CSS and edit respectively
.main-nav > li > a {
margin: 0px;
padding: 37px 25px;
}
li:not(.dt-mega-menu) .sub-nav {
width: 280px;
margin-top: 1px;
background: #043349;
}
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;
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.