Here is the menu I am working at:
I have added submenu items under a menu item.
But it does not work at all. How can I add submenu items? Or at least how do I check if the menu I am using can do that?
Here is the page I am working at: http://darnicgaz.md/?lang=en_us
Ok i have tested your site. submenu displaying fine in mobile and display none in web view.
style.css line no 1110
#primary-menu ul ul, #primary-menu ul li .mega-menu-content {
display:none
}
remove that display :none from this style
Related
I've implemented a simple CSS dropdown menu that works perfectly in every browser I've tried except for Safari (on Windows). My page can be seen here. Within my primary navigation list items, I have an <li> class called "drop" that is set to position:relative and a div labeled "drop-container" that contains the drop-down menu items and is positioned absolutely with respect to the parent list item. I'm changing visibility on hover-- in this case nav#primary ul li.drop .dropcontainer-- to visible and changing the opacity from 0 to 1 to enable a CSS transition.
I can't figure out for the life of me why this simple menu isn't working in Safari-- any help is greatly appreciated.
Try to operating with display.
nav#primary ul li.drop .dropcontainer {display:none;}
nav#primary ul li.drop:hover .dropcontainer {display:block;}
This seems like a fairly straightforward thing but can't find any tutorial on it.
I have a top menu that changes background colour then one of the menu items is selected. The CSS looks like this:
.nav > li > a:hover,
.nav > li > a.selected {
background-color: #F7A379;
}
However some pages have a side menu, with a class .left-nav and when I click on those links the background styling disappears from the parent nav. Is it possible to keep the styling above when the child page is selected? If so, what would the CSS need to be?
I came across this site http://northerly.com.au/ and I am wondering how it is possible to make an top menu li active while hovering over it's submenu. In this case it seems like there is no js script to add active class. How it is done then? Thank you
In fact, that's not the top menu li which is active when you're hovering on the sub menu. There is a sibling SPAN before submenu element, as a result of hovering to sub menu, you are also hovering the container li element.
top li has two elements:
a SPAN has top menu title
a Sub Menu
Use a CSS selector like this:
li:hover span {/*span is active!*/ }
See a simple demo here.
In my menu I use overflow:hidden and menu width to display my menu and hide text if the screen size becomes smaller. However it hides also the submenu at the same time
By submenu I mean the menu of level > 2
So if I hover an item in the menu bar, I can get the menu display but if that menu contains some subitems then they won't display at all. But when I delete overflow:hidden in my css that is being applied for ul/li elements to create the menu, they show up but the text looks ugly especially if it is longer than the menu width
I think using this should work:
ul{
overflow:visible;
}
ul.li{
overflow:hidden;
}
ul.li.ul{
overflow:visible;
}
ul.li.ul.li{
overflow:hidden;
}
Of course you will have to apply it to your own stylesheet. I am not totaly sure this will work, becouse i cant see your code/stylesheet from here.
I'm creating a side-bar menu for a site, which should only show sub-menus in a currently selected page. The site is in wordpress. I have managed to hide inactive sub-menu items for pages that are not selected using this css:
.sub-menu { display: none; }
.current_page_item .sub-menu, .current_page_parent .sub-menu { display: block;}
But how can I hide the main menu items but still display their sub-menus? Here's a link to the site NOTE: I want to hide ALL the main menu items so that I only have the sub-menus
Help would be much appreciated!
This will hide the current item anchor.
.current_page_item > a {display:none;}
(You may want to adjust the left margin on the sub items depending on the look you're going for.)