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!
Related
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 used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
I'm new so don't mind if I ask some pretty dumb questions, I've been trying to create a navigation menu that has links that pop up once the mouse hovers over, it's been great so far, the only problem I have is that the spaces between the links appear to be uneven.
Now I've searched high and low (I'm bad with google) for an answer but just can't seem to find one.
I've tried the following CSS.
padding: 0;
margin: 0 0 0 0;
TL:DR; space between an unorganised row of vertical multiline links is uneven.
Here's the http://jsfiddle.net/1f9b0h6p/ , help please? ;-;
Best regards,
Vernon
Remove unwanted line-height from the ids #top, #top li li, #top li li a and height from the id #top li:hover li
Fiddle Demo
In #top li:hover li{ change the height from 33px to auto. here is the jsfiddle
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;
}
I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }