I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
Related
I am started to use the wordpress theme "Pinnacle Theme" and optimized it for my needs. But now i got a problem i cant solve and hoped someone can help here.
I am trying to center the Large Menu (more Columns, then normal dropdown) to the parent item.
On my Website "Wilde-NaTouren" the Menu Item "Wandern + Trekking" is the Problem.
The normal ".kt-lgmenu" is normally full-width, but i try to give it a fixed width with following code
.kad-primary-nav .sf-menu>.kt-lgmenu>ul {
width: 520px!important;
}
now i have to center the .kt-lgmenu>ul to .sf-menu>.kt-lgmenu but i dont know how.
Here 2 Images to view how it looks right now, and what i want to have (sorry cant post Images).
Actual Situation ->
Result
Thanks for your Help
You have a relative li container already, which is the first step. The next step is to horizontally center the hidden dropdown using transformX:
.sf-dropdown-menu {
…
left: 50%;
transform: translateX(-50%);
}
I edited the site in the inspector and recorded it to show you how each rule is applied.
First, the left: 50% is applied. Then, we perform the negative translation. left refers to the parent element while transform refers to the target element (the actual hidden ul).
I have a problem with a personal project, http://mail.fixca.com.gt/. on Drupal 8 with the profile Brainstorm
The menu doesn't display the submenus created. I have already:
Set Show Expanded mode on the menu item.
Set the max menu level display on the block it self.
Tried to create a new menu and CSS it to get it display the submenu
.submenu{
display:none;
}
.companymenuli:hover > ul{
display:block;
}
but it never shows the submenu. I realise that it might be something I'm just not doing right, but I cann't find the solution.
The HTML on the Drupals Website shows like this
HTML from chrome developer
I think that it might be some kind of restriction on the theme itself.
I really appreciate your help. If you have give mi a hint on where I might be able to find the solution.
Thank you.
Overflow: hidden. is added in below css:
#block-brainstorm-theme-main-menu
Once you remove overflow property from here and also remove display: none. from
#block-brainstorm-theme-main-menu ul ul
Submenu will display. But you have to work on css and js for proper look and feel. Instead I suggest to use some jquery for this.Also you can use modules like Nice menu or Superfish menu for the same. Let me know if i can help you in this.
I have created this CSS drop down menu. The menu works flawless as it should, my only question
is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them?
My code is at this link,
http://fiddle.jshell.net/NJ4UP/
I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!
All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.
Thanks in advanced.
In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO.
li:hover:before {
content:'';
position:absolute;
width:100px;
height:200px;
background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}
In CSS you may delay transition to close your menu DEMO.
do not use display to hide/show the submenu
Use a rule that handles number value.
#menu ul > li ul {
position:absolute;
margin-left:-9999px;
transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
#menu ul > li:hover > ul {
margin:0;
transition:0s 0s;/* show ! don't wait */
}
You could check this out, maybe it helps:
http://www.w3schools.com/css/css3_transitions.asp
In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .
pointer-events to control mouse events hover <a> in <li> first level.
tabindex for <li> first level , so it can be focused via click & tab.
The idea is:
to shortcut the click events on so <li tabindex="0"> can take the :focus and apply
same rule as :hover.
then once <li> has focus , to give back to ability to receive mouse events.
DEMO - CSS click open/close menu
it alows to open close menu via the key tab
At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.
It can be done somehow for a two level menu too
I am not sure how to best describe the problem I am having here. I got a CSS driven menu online and adapted it to my needs. It works perfectly in all browsers but in IE it appears that the when you move over from the main navigation to the dropdowns list a items, it does not always capture the movement and then "closes" the dropdown.
I suspect that when you move to over to the dropdown that the list a item does is not a block element thus it closes the dropdown, this only happens if you're not moving to the dropdown and not completely over the text of the list a item.
Here is the link: http://www.tepgtests.co.za/decorex/2012/new_site/ - if you move over from "Shows" to "Durban" and not entirely move your mouse cursor over the word but rather over to the dropdown you will see what it does.
Thank you in advance :)
There's a 1px of white space,
hovering that space closes the submenu because your not hovering the menu anymore...
try removing it by moving the submenu just below the menu:
.navigation_bar .first_level_menu_block {
left: 0;
top: 50px;
}
tested in IE9 , it works
It sounds like your CSS is using the inline-block directive, which is not well supported in IE.
I think this answer may solve your problem, rather than repeat it: Inline block doesn't work in internet explorer 7, 6
I am trying to create a menu bar that has 2 levels of menus. The top menu is is the main one. Then the second level underneath it has some sub category items. Right now you need to click on the main menu first and load that page to get see the sub category menu items for that section because they are just hard coded into the page. I want to make it so that when you hover over the main menu items that it will load the sub menu.
Here is a jsFiddle of the navigation area and CSS
Here are a couple of screenshots of what it looks like
What would be my best method of accomplishing this. I'm not the most experienced but I got a pretty good grasp of HTML and CSS. Any help in the right direction would be great. Thanks.
I've made this type of menu in the past, I've created a copy of the code you can find here http://jsfiddle.net/PWFGd/24/
The property you want to use is:
selector{
display: none;
}
selector:hover{
display: block;
}
Hope it helps.
Aymeric.
You can use a general sibling combinator (~) with your current structure to accomplish something like this. Use the hover pseudo element to toggle the display state (or visiblity) of the submenu.
http://jsfiddle.net/PWFGd/25/
/* on hover of mainmenu, find subnav and show it */
.mainMenu:hover ~ ul.subNav {
display: block;
}
ul.subNav{
display: none; /* hide submenu */
font:normal 11px/12px Arial, Helvetica, sans-serif;
padding:4px 0 0 0;
}
There are plenty of examples on the net of css based navigation menus. I think you might want to rethink your html structure and use one of those. Google
# Aymeric answer is good one, its also called "2 level horizontal navigation in CSS" i often use them in my projects,
here is demo what u looking for
complete tutorial link