I am trying to create a simple sub menu which appears when u hover over the main menu.
Can anyone see where i am going wrong?
I have created this fiddle for example.
Try this: http://jsfiddle.net/KSeph/11/
It is not layouted but it works.
This css basically provides a very simple way to realize dropdowns:
.subMenu {
float: right;
}
.subMenu ul li {
float: left;
}
.subMenu ul ul {
display: none;
position: absolute;
}
.subMenu ul li:hover ul {
display: block;
}
.subMenu ul ul li {
float: none;
}
Hey now add two style in your css as like this
.subMenu li{
position:relative;}
.subsubmenu {
position:absolute;
top:22px;
left:0;
}
Live demo
on .subsubmenu add left: 0; top: 0; and remove float: right !important;
on .subMenu ul li add position: relative;
Related
I've got a simple menu that should show a sub-menu vertically. However, i changed this menu to be in order to center it, and it now doesn't show vertically but horizontally.
Here is my codepen :
http://codepen.io/anon/pen/NGwmGq
.navitem{
height: 30px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
background-color:black;
display: inline-block;
padding: 0;
vertical-align: middle;
}
#menu li a {
display:block;
width:125px;
color:white;
text-decoration:none;
line-height:30px
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
margin-top: 30px;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
margin: 0 30px;
}
/* Fin MENU */
As you can see, the "portfolio" actually shows the sub-menu but this sub-menu should be vertically aligned.
You seem to have deleted the positioning context on the li
#menu li {
background-color: black;
display: inline-block;
padding: 0;
vertical-align: middle;
position: relative; /* add this */
}
For li you have given display as inline-block that,s why they are coming in one line. so for portfolio submenu Write this css in your css file
#menu ul li ul li {
display: block;
}
In your css, you're making all main menu items inline using #menu li selector, which is also applied for lis in sub menu.
So you've to explicitly specify display: block for sub menu lis
Change your code as given below.
#menu li:hover ul li {
float:none;
display:block;
}
Just Add display:block to your sub menu li.
#menu li:hover ul li {
float:none;
display:block; /* Add This */
}
UPDATED : EXPLANATION
1) display:block; property is a block property in HTML. So every element with such property takes a new line(Elements views Vertically).
2) display:inline-block; property is a block but inline property. So elements which such property appears on same single line(Elements views Horizontally).
Working : Fiddle
http://jsfiddle.net/KsR5K/
#nav {
position: absolute;
font-family: digital_techregular;
font-size: 24px;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display:block
}
#nav ul {
background: #000;
list-style: none;
position: relative;
padding: 0px;
}
#nav ul:after {
content:"";
clear:both;
display:block
}
#nav ul li {
float:left
}
#nav ul li:hover {
background: #757575;
}
#nav ul li:hover a {
color:#fff
}
#nav ul li a {
display:block;
padding-top: 3px;
padding-left: 20px;
padding-right:20px;
color:#fff;
text-decoration:none
}
#nav ul ul {
background: #000;
padding:0;
position:absolute;
top:100%
}
#nav ul ul li {
float:none;
position:relative
}
#nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
#nav ul ul li a {
padding-left: 20px;
padding-right: 20px;
color:#fff
}
#nav ul ul li a:hover {
background:#757575;
}
Right now, I have two drop down menus. One under Browse Models, and another under Tutorials.
If you look at the sub menus, the items' widths adjust accordingly depending on what is typed. If you look at tutorials, under the Printers sub menu, you will see Test, and Test 2. Only on Test 2, the 2 is placed underneath the word Test.
Basically, the sub sub menus aren't properly adjusting based on the width of the items in the same way that the sub menus are. If you were to type "Model Finishing" where Test 2 is, it would stack the words. But the "Model Finishing" item in the sub menu is all on one line.
I'm still pretty new at this. This is the first time I've tried to create a nested menu like this, I'm pretty much just going off of tutorials, so any advice would be appreciated.
Thanks for your time.
Edit: Changed the JSfiddle and code to reflect what I'm currently working with.
http://jsfiddle.net/S5cYJ/6/
#nav ul ul ul {
/* add this */
width:100%;
}
also remove width:100% from below
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
display:block;
}
you should look into bootstrap. It has a nice menu already built so that you can concentrate and doing other things http://getbootstrap.com/components/#navbar
Fixed this by adding:
white-space: nowrap;
to #nav ul.
i'm trying to get a horizontal navigation bar, but I can't get it to work right.
http://jsfiddle.net/2fkxx/
nav {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
display: block;
width: 80px;
}
Set your li to inline-block rather than inline.
nav ul li {
display: inline-block;
}
Fiddle
FIDDLE
nav ul li {
float: left;
}
Simple solution:
Set 'float:left' for the list element and also do 'display:inline-block'
nav ul li{
float:left;
display:inline-block;
}
Let me know if it worked. I have had the same problem recently. I can help you out more.
Or you could try using inline-block instead of block
nav ul{
display: block;
overflow: hidden;
margin: 0 auto;
}
nav ul li{
display: inline-block;
}
You need float:right on nav ul li visit link
nav ul li {
float:left;
display: inline;
}
I have been trying quite a few guides on getting sub-menus to work. Some which include JS. Now I'm trying a just css approach but I'm kinda stuck on getting the submenu to work for me.
My code is on fiddle here: http://jsfiddle.net/PLb5K/
To do a basic test I have done
#nav ul li ul {
display: none; }
#nav ul li:hover ul {
display: block;
position: absolute; }
UPDATE
#nav ul:hover .sub {
display: block;
position:absolute;
}
fixes the "not working on hover" issue but any list item will show the sub menu. Please could anyone help on how to make it so only the single parent will show the submenu.
here is a basic html/css example for you:
the fiddle
css
ul {
margin: 0;
padding: 0px 100px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
ul li {
background-color:grey;
display: inline-block;
*display: inline;
padding:4px 8px;
margin:0;
zoom: 1;
}
ul li a{
color: white;
text-decoration:none;
}
ul li ul.sub{
display:none;
position:absolute;
margin-top:4px;
margin-left:-8px;
}
ul li:hover ul.sub{
display:block;
}
I have some serious problem with my menu and its hover effect.
I have a very basic menu, which has a submenu:
<ul id="menu">
<li>Menu1</li>
<li>Menu2
<ul>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>Menu3</li>
</ul>
Here is the CSS I'm using:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
width: 200px;
height: 100px;
background: #000;
}
Okay, so my problem is, that when I hover my mouse the Dropdown menu and gets my mouse on the Submenus, the Hover effect of the Parent menu item (in this case Menu2) is disappearing. So it will not have black BG when I hover the mouse on the submenu items.
Is there anything I could do to make that hover effect stay on the partent menu (Menu2)?
First problem: your selectors are wrong.
#menu IS an ul , then #menu ul ul means
an ul descendant of an ul descendant of my #menu, that is an ul
You don't have three levels of uls, so...
change ul ul to li ul.
The second problem is that you are affecting a tag on hover, but a tag is a sibling, not an ancestor (or parent) of your submenu ul.
You should then target your li, not your a.
Demo: http://jsfiddle.net/mSrkn/ (with tons of problems still there, but with the two above resolved)
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li:hover {
background: #000;
}
#menu li ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
width: 200px;
height: 100px;
background: #000;
}
The problem is with yout selectors:
#menu ul li:hover > ul {
display: block;
}
This says that any element with ID that has a child ul with lis that's hovered with a child ul should be selected. Your markup is different from this, the UL itself is the ID #menu so you have to remove the first ul from the selectors themselves:
#menu li:hover > ul {
display: block;
}
http://jsfiddle.net/V7Ltw/
You might try adding the following to your CSS
#menu li:hover{
background-color: #000;
}
By hovering over the sub-menu, you're still hovering over the parent list item.
And you should follow Kyle's answer as well as you do need to remove the first UL selector from your css.
You have to change a lot of stuff to make this work, the basic idea is to put the submenu inside your menu items :
CSS:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul.submenu {
display: none;
float: left; // For viewing purpose
}
#menu ul.submenu { padding: 20px; }
#menu ul.submenu:hover {
display: block;
}
#menu li:hover > ul.submenu {
display: block;
}
ul.submenu:hover + a { background: #000; }
#menu ul {
width: 500px;
height: 100px;
background: #000;
}
HTML:
<ul id="menu">
<li>Menu1</li>
<li>
<ul class='submenu'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
Menu2
</li>
<li>Menu3</li>
</ul>
Demo here : http://jsfiddle.net/V7Ltw/