I want to know how to change the position of the second(child) dropdown when overflow the submenu. It now the right side when overflow the menu should be visible in left side.
In this below link visit the identify link before logout under the identify visit identify3 it displays another submenu it should be comes left side, If not overflow it should be in right side only...
http://demos.sanwebcorner.com/matex/
Thanks in advance!!
Put this in your css file:
menu ul ul ul li {
right: 170px;
left: initial !important;
}
just change left:170px to right :170px in my-style.css line 920
menu ul ul ul li {
right: 170px;
}
use this so that the style will be applied to the last second child(position where the overflow occurs):
menu ul ul ul li:nth-last-child(2)
{
right:170px;/* if you want the alignment to be left of the hovered list*?
}
OR
menu ul ul ul li:nth-last-child(2)
{
top:0;/* if you want the alignment to be bottom of the hovered list*/
left:0;/*not neccessary if style aren't used in parent class/elements*/
right:0;
}
Related
I have a dropdown menu and a main photo on the index.html of my website. However, when I hover over the dropdown menu, it hides behind the main photo and can be slightly seen only if the window is resized.
Here is the link to my website:
wanghenry79.github.io
The dropdown menu hidden behind the main photo should be seen when hovering over the "Resources" tab.
Thanks in advance for your help!
From .newest-review-cover just remove the position: relative;
.newest-review-cover {
position: relative; // REMOVE THIS LINE
z-index: 0;
display: none;
}
or give av ul li:hover ul a z index:
av ul li:hover ul {
display: block;
z-index: 1;
}
The problem is that the dropdown has a lower z-index than the image's z-index.
Add this to the dropdown menu <ul>:
style="z-index: 9;"
I'm pretty happy with my dropdown menu, but there's one part which I can't get right.
It's about last menu item (Switch City), the 2nd tier of the dropdown extends the background of the 1st tier.
I made a Pen of it: https://codepen.io/pascalgarrix/pen/byNLEM
I'm pretty sure the problem in the CSS lies just before the media queries in this part:
nav ul ul ul {
position: relative;
/* has to be the same number as the "width" of "nav ul ul li" */
top: -60px;
left: 270px;
}
If anyone could have a quick look, would be awesome!
P.S. The whole menu is based on this Pen: https://codepen.io/andornagy/pen/RNeydj
You need to give the 1st level nested li a max height to prevent it from growing, but still allow overflow
nav ul li ul li:hover, nav ul li ul li ul li:hover {
background-color: rgba(0,0,0,0.2);
max-height:70px;
}
I am developing a website. In the navbar the Menus are ok but the sub-menus are not working properly. All the submenus are dropping down from the first menu. And sub-menus are disappearing if cursor are not placed to the sub-menus very fast.
The site preview is here : http://ticketsbd.com/
jsfiddle link is here : Fiddle
Add this to the bottom of your stylesheet.
li.has-sub {position:relative;}
li.has-sub ul {top:17px;left:0;}
Man, if you make sub menu and menu, I recommend you for first use this css syntax:
ul > li > a{}
But not ul li a{}
Because all properties will go for all elements li and a in this parent ul.
It makes very cascading effect.
Just work with ul > li, than ul > li > a, than you can work with ul > li > ul, and so on.
It will help you do now something strange things.
For second, you should always set for parent ul and his child li next property
position: relative;
And for sub-menu ul you should always set this properties:
position: absolute;
top: 100%;
left: 0;
It is a minimum which you should know. So keep on this rules and you can styles menus as you like.
Just add display:inline-block to the following classes:
.wrap{
display:inline-block;
}
.nav_list li{
display:inline-block;
border-left: 2px ridge #3D3B3B;
}
fiddle
I have this CSS Menu:
http://jsfiddle.net/73GrF/
but i cannot work out what css code i need for the hover:
#nav li a:hover
trigger the hover on your li element. Don't forget to set your submenu position to absolute
#nav li:hover ul {
display:block;
}
http://jsfiddle.net/73GrF/4/ (edited fiddle with crude dropdown styling. ill leave the dressing up to you.)
http://jsfiddle.net/73GrF/5/ is what I came up with while McMastermind was at work.
The main thing I've done is taken the margins off, floated the menu headers, and made the submenus appear on hover
#nav>li {
float:left
}
#nav li:hover ul {
position:absolute;
display:block;
}
#nav li a {
margin:0;
}
I have a drop down menu that when I rollover a dropdown appears. The only problem is the background images of my main list also shows as the background of the submenu list.
Below is my css to assign the tab background on rollover. But I am assuming that since tech the user is still rolling over that <li> the tab background shows on all the sub <li>
CSS:
#main_menu ul li:hover a {
background: url(images/right_tab_bg.png) top right no-repeat;
color: #578ba0;
}
#main_menu ul li:hover a span {
background: url(images/left_tab_bg.png) top left no-repeat;
}
Is there a way to tell the above css to only effect the parent <a> or <span>?
Be more specific with your selectors via direct descendant selector (I am assuming that the ul that is the top level list is a direct descendant of whatever #main_menu is):
#main_menu > ul > li:hover > a /* select only the parent li's a */
#main_menu > ul > li li a /* select any child li's a, excluding the top level li */