I'm trying to create a mega drop down menu just like the one from the following link : http://i48.tinypic.com/2ln97ip.png
I have created this fiddle but the things aren't going well because of positioning and border of second ul is not ok :(
http://jsfiddle.net/H8FVE/16/
<ul id="firstUl">
<li><a>mainSimple</a></li>
<li>
<a>MainMenu</a>
<ul id="secondUl">
<li>
<a>SecondLevel1</a>
<ul id="lastLevel">
<li>
<a>LastLevelX</a>
</li>
<li>
<a>LastLevelY</a>
</li>
</ul>
</li>
<li>
<a>SecondLevel2</a>
<ul id="lastLevel">
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
#firstUl{height:42px; position:relative; background:#ccc;}
#firstUl li{ float:left; border:1px solid #fff; padding:10px; border:1px solid red;}
#secondUl{display:none; background:#fafafa; }
#secondUl li{
float:left;
display:block;
border:1px solid #eaeaea;
}
#lastLevel{
display:none;
}
#firstUl li:hover> #secondUl{
border:1px solid red;
display:block;
position:absolute;
top:100%;
}
#firstUl li #secondUl li:hover> #lastLevel{
display:block;
position:absolute;
top:100%;
left:0;
}
#firstUl li #secondUl li #lastLevel li{
float:none;
}
Can someone help me with this pls.
Try setting the #secondUl li to position:relative so that the child's (UL) position depends on it:
#secondUl li {
...
position: relative;
}
Related
I have a problem. I can't crate my droppable menu.
https://probapro2.blogspot.com/
I work on Menu 1, but I don't know what to add to make the drop menus to move on right.
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css' />
<div class="nav">
<ul class="menu" id="menu">
<li> home </li>
<li class=""> <a class="drop-ctg" href="#">category</a>
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1072; opacity: 0;">
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
</ul>
</li>
<li class="">
Menu 1
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1069; opacity: 0;">
<li class="dir">
Menu 2
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1070; opacity: 0;">
<li style="margin-left:50px;"> Menu 3 </li>
<li> Menu 3 </li>
<li> Menu 3 </li>
</ul>
</li>
<li class=" "> Menu 2 </li>
<li> Menu 2 </li>
<li> Menu 2 </li>
</ul>
</li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li> Menu 4 </li>
<li> 404 Error Page </li>
</ul>
</div>
Here JS fiddle: https://jsfiddle.net/0ugodkb3/2
I want to make Menu 1 to have a droppable menu with menu 2 and on first menu 2, I want to show menu 3.
You can use for that css rule transform with translate value like this:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
.menu > li > ul {
display: none;
}
.menu > li > ul > li > ul {
transform: translate(100%,0);
display: none;
margin-top: -37px;
}
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}
<div class="nav">
<ul class="menu">
<li>
home
</li>
<li class="">
<a class="drop-ctg" href="#">category</a>
<ul>
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>
Category 3
</li>
<li>
Category 4
</li>
</ul>
</li>
<li>
Menu 1
<ul>
<li class="dir">
Menu 2
<ul>
<li>
Menu 3
</li>
<li>
Menu 3
</li>
<li>
Menu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 2
</li>
<li>
Menu 2
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
<li>
Menu 4
</li>
<li>
404 Error Page
</li>
</ul>
</div>
The main thing is to use > selector when defining the display rule for nested menus. This is all what I've added to your css code:
.menu > li > ul {
display: none;
}
/* Position for the 3rd level menu */
.menu > li > ul > li > ul {
transform: translate(100%,0);
display: none;
margin-top: -37px;
}
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}
There are a few things that go into making a dropdown menu. It sounds like you're trying to make a dropdown menu that opens up nested menus.
Each pop-out menu will need to:
1) Know the position of the parent that is opening the menu to know where it should be appended.
2) Calculate where the nav should pop up based on where there user is on the browser/screen
You need to append the nav on the right of the menu header you want to open. I'm not sure what your restrictions are but there are vanilla js options:
https://gomakethings.com/how-to-insert-an-element-after-another-one-in-the-dom-with-vanilla-javascript/
that you can use, and also use a mix of position: relative; and position: fixed; to add your nested menus to the right of it's parent.
I would strongly urge you to consider if creating a custom, nested dropdown menu is the right option for you. There are many options out there that have been battle-tested through time. Normally these will also let you style the menu header, and also it's children.
Let me know if you have any more questions :)
Here yellow is <li> which is child of <ul> at the moment <li> or <ul> don't have float:left or display:inline as soon as I apply either float or display on <li> or <ul>
pink <li> which is child of nested <ul> changes it's appearance to this
<ul class="top_nav">
<li>name
<ul class="sub_nav">
<li>name1 icnkdn ndkcnks kkncksn </li>
<li>name2</li>
<li>name3</li>
</ul>
</li>
<li>home</li>
</ul>
.top_nav{
list-style-type:none;
padding:0;
}
.top_nav > li {
padding:1em 2em;
background:yellow;
position:relative;
}
.sub_nav{
position:absolute;
z-index:1;
background:green;
}
.sub_nav li{
display:block;
background:pink;
padding:1em 3em;
}
https://codepen.io/labeeb/pen/zRxoOR
Your .sub_nav has position: absolute; that's why your <li> element is collapsed. Remove this property and everything will be ok.
I am trying to implement a menubar with submenus using CSS.
Demo http://jsfiddle.net/kgu/skg3ctu5/
HTML
<div class="menu">
<ul id="navmenu">
<li> Item1 </li>
<li> Item2 </li>
<li>
Item3
<ul class="sub1">
<li> Item3.1 </li>
<li>
Item3.2
<ul class="sub2">
<li> Item3.2.1 </li>
<li> Item3.2.2 </li>
<li> Item3.2.3 </li>
</ul>
</li>
<li> Item3.3 </li>
</ul>
</li>
<li> Item4 </li>
</ul>
</div>
CSS
* {
margin:0px;
padding:0px;
}
body {
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li {
list-style-type:none;
}
#navmenu li {
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1 {
position:absolute;
top:27px;
left:0px;
}
.sub2 {
position:absolute;
left:126px;
top:0px;
}
#navmenu a {
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
I want my (submenu 1) .sub1 to appear horizontally below the nav menu. When hovering over the item 3 the submenu item 3.1 should appear below item 1, item 3.2 should appear below item 2, and item 3.3 should appear below item 3.
Could anyone help? thanks!
Here is a complete CSS solution. Change part of your css to this:
*{
margin:0px;
padding:0px;
}
body{
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li{
list-style-type:none;
}
#navmenu li{
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1{
position:absolute;
top:27px;
left:0px;
display:none;
}
.sub1:hover, .sub1:focus {
display:block;
}
.sub2:hover, .sub2:focus {
display:block;
}
.sub2{
position:absolute;
left:126px;
top:0px;
display:none;
}
#navmenu a{
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
#navmenu a:hover + .sub1{
display:block;
}
#navmenu a:hover + .sub2{
display:block;
}
I gave your sub menu classes display:none. Then if you hover or focus them they will display, this work with the bottom 2 new selectors styles I made which check if an a tag is next to .sub1 or sub2 on hover display block them. All these components together allow for the drop down to work. You can animate with css animations on hover and focus if you want. Note the new selector I used " + " this allows you to select siblings (elements next to each other).
Adding more you can also try using this instead of the css above just add it to the bottom of your css
ul#navmenu li:hover > ul {
display:block;
}
I use this code below to show up right column on my wordpress blog. (List structure is generated by wp_list_categories.)
<div class="rcolumn">
<li class="categories">Categories
<ul>
<li class="cat-item1">
Cat1
</li>
</ul>
<ul>
<li class="cat-item2">
Cat2
</li>
</ul>
</li>
</div>
The thing is, that the contents of this column ignore div and are actually outside of it. Whole li categories goes outside of rcolumn.
.lcolumn {
display:inline;
float:left;
}
.rcolumn {
float:left;
display:inline;
padding:0 5px;
}
.categories {
margin-top:10px;
border:1px solid #aaa;
list-style:none;
}
What am I missing?
.rcolumn {
float:left;
display:inline;
padding:0 5px;
overflow: hidden; <-- try this?
}
i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me
css:
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 85px 0px 85px;
border:2px solid #4c4c4c;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<html>
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >Home</li>
<li class="menu">contact us</li>
<li class="menu">pay</li>
<li class="menu" id="menuitem4" >plans</li>
</ul>
</div>
</div>
</body>
</html>
jsfiddle
Set the width of the .menu in percentage so the li's are responsive.
JSFIddle
HTML
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >
Home
</li>
<li class="menu">
contact us
</li>
<li class="menu">
pay
</li>
<li class="menu" id="menuitem4" >
plans
</li>
</ul>
</div>
</div>
</body>
CSS
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 0px 0px 0px;
border:2px solid #4c4c4c;
width:20%;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
You can try using percentage width values for width of your li elements.
.some-class {
width: 25%
}
I've made some changes on jsfiddle just to show it is possible with this kind of implementation.
If you are concerned about mobile devices. Take a look at meta tags with device-width.
You can add:
ul {
white-space: nowrap;
}
to prevent wrapping -> jsfiddle