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;
}
Related
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;
}
I am currently learning CSS and HTML and I wanted to build a basic dropdown menu using CSS only. There are some things that I don't understand if someone could help me figure out what is going on.
Here's how it looks
http://liveweave.com/eTdt7V
Why is my Menu 1 being pushed at the top of the nav? How can I avoid that?
Why is my Submenu 1 to the right of the Menu 1? How do I fix it?
The height of my submenu is overflowing over the first UL. Is that supposed to be?
Hopefully someone can help me understand what's going on here that would be a valuable lesson for myself. I know I could find an online tutorial but I feel that starting from scratch is a better leaning opportunity, but right now I am stuck.
Thanks!
Ok here are some point (i still suggest you find some page like w3chool or here or whatever page you can find to learn more or fully understand your problem)
Menu 1 pushed away because you set your 2nd ul with visibility:hidden - it hidden but still take same space (width and height), so if you change that to display:none and remove height:100px in your 1st ul it will become one line and smooth (don't set height to ul, especially when it have 1 or more ul inside, it will ruin your menu)
Your Submenu 1 to the right of the Menu 1 because, uhm not sure how to say so i skip to solution to solve this. To position your submenu, i suggest use position:absolute with margin to position your submenu (beside your main menu if vertical menu or below if horizontal)
This is your new CSS after i modify a bit
body {margin: 0; padding: 0;}
nav {background-color: pink; margin: 0; padding: 0; height: 100px;}
ul {list-style: none; width: 50%; background: yellow; margin: 0 auto}
li {display: inline-block; background-color: green; width: 100px; height: 50px}
a {text-decoration: none;}
ul > li > ul {display: none; position: absolute; margin: 35px 0 0 -40px;}
ul > li:hover > ul {display: block;}
ul > li > ul li {display: block;}
And this the new DEMO
Hope you lucky with learning HTML and CSS!
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'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}
My list is not display when I hover over it. For the top navigation when I hover over English it should display more languages. http://jsfiddle.net/gTdsX
You could add in your CSS to make the ul submenu be visible on mouseover of the menu item li.
#main-nav ul li:hover ul {
display:block;
}
You didn't have a :hover style for your "main-nav". Simply add this:
#main-nav ul li:hover > ul {
display:block;
}
… and it will work (tested it in your link).