I try to build a horizontal menu. I want absolute positioning of the second level:
Parent 1 | Parent 2 | Parent 3
Child 2.1 | Child 2.2
It works in Firefox but not in IE 8, the padding-top is ignored there and the second line overlaps the first one.
Here is the fiddle:
http://jsfiddle.net/oe8wksax/
Here is the markup:
<ul id="#top" class='nav'>
<li><a href='#'>Parent 1</a>
<ul>
<li><a href='#'>Child 1.1</a></li>
<li><a href='#'>Child 1.2</a></li>
</ul>
</li>
<li><a href='#'>Parent 2</a>
<ul style="display:block">
<li><a href='#'>Child 2.1</a></li>
<li><a href='#'>Child 2.2</a></li>
</ul>
</li>
<li><a href='#'>Parent 3</a>
<ul>
<li><a href='#'>Child 3.1</a></li>
<li><a href='#'>Child 3.2</a></li>
</ul>
</li>
<ul>
Here the CSS:
nav, .nav ul
{
list-style:none;
clear: both;
}
.nav > li
{
float:left;
margin-right:10px;
}
.nav ul
{
position:absolute;
left:5px;
display:none;
padding-top:5px;
}
Try this.
.nav, .nav ul
{
list-style:none;
clear: both;
}
.nav{position:relative;padding: 0;}
.nav > li{margin-right: 15px;}
.nav ul li{margin-right: 10px;}
.nav > li,.nav ul li
{
float:left;
}
.nav ul
{
position:absolute;
display:none;
top: 25px;
left: 0;
padding: 0;
width: 100%;
}
Related
I am doing horizontal navigation with css only.
I can’t position first submenu to the middle of it’s parent of the smaller width.
I'm not using display: because I need transitions. Also first submenu's min-width must be the same of it's parent.
Thanks in advance!
Here's a codepen link!
It needs to be like this http://i.stack.imgur.com/G4sUV.jpg
CSS
nav {
position:relative;
border: 1px solid #222;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
height:40px;
margin:50px auto;
padding:0;
width:90%;
z-index:10;
}
nav ul,
nav ul ul {
list-style:none;
padding:0;
margin:0;
}
nav>ul {
clear:left;
display:flex;
justify-content:center;
align-content: stretch;
text-align:center;
font:12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
nav ul li {
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
height:40px;
padding:0;
margin:0;
position: relative;
text-align: center;
}
nav ul li:last-child {
border:none;
box-shadow:none
}
nav ul li a {
display:block;
text-align: center;
color: #ccc;
text-decoration: none;
padding:13px 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav ul li a:hover {
background-image: linear-gradient(#04acec, #0186ba);
color: #fafafa
}
nav ul li ul {
background: linear-gradient(#444, #111);
border-radius: 3px;
transition: all 1s ease-in-out;
text-transform:none;
opacity: 0;
visibility: hidden;
font-size: 12px;
}
nav ul li:hover>ul {
opacity: 1;
visibility: visible;
margin: 0;
width:auto;
}
nav ul li>ul {
position: absolute;
min-width: 100%;
}
nav ul li ul li ul {
min-width: 0px;
}
nav ul li ul li {
border:none;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
float:none;
margin:0;
}
nav ul li ul li:last-child {
box-shadow: none;
}
nav ul li ul li a {
padding:10px 8px;
border:none
}
nav ul li ul li ul {
left: 90%;
right: auto;
top: 10%;
margin: 0% 0 0 20%;
box-shadow: -1px 0 0 rgba(255,255,255,.3);
z-index:20;
}
nav ul li:last-child ul li ul {
left: auto;
right: 90%;
margin: 0 20% 0 0%;
}
HTML
<nav class ="topusermenu">
<ul class="first">
<li><a href=#>Home Veryyyyy LOOOOONNNNGGGGGGG Home Veryyyyy LOOOOONNNNGGGGGGG</a>
<ul>
<li><a href=#>Home 1Sub 1</a>
<ul>
<li><a href=#>Home 2Sub 1</a></li>
<li><a href=#>Home 2Sub 2</a></li>
<li><a href=#>Home 2Sub 3</a></li>
</ul>
</li>
<li><a href=#>Home 1Sub 2</a></li>
<li><a href=#>Home 1Sub 3</a>
<ul>
<li><a href=#>Home 2Sub 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#>News Very LONG</a>
<ul>
<li><a href=#>News 1Sub 1 Very very bvery Long</a></li>
<li><a href=#>News 1Sub 2</a>
<ul>
<li><a href=#>News 2Sub 1</a></li>
<li><a href=#>News 2Sub 2 long</a>
<ul>
<li><a href=#>1</a></li>
<li><a href=#>2</a>
<ul>
<li><a href=#>1</a></li>
<li><a href=#>22</a>
<ul>
<li><a href=#>1333</a></li>
<li><a href=#>2333</a></li>
<li><a href=#>3333</a></li>
</ul>
</li>
<li><a href=#>333</a></li>
</ul>
</li>
<li><a href=#>3</a></li>
</ul>
</li>
<li><a href=#>News 2Sub 3</a></li>
</ul>
</li>
<li><a href=#>News 1Sub 3</a></li>
</ul>
</li>
<li><a href=#>Contact</a>
<ul>
<li><a href=#>Contact1</a></li>
<li><a href=#>Contact2 long</a></li>
<li><a href=#>Contact3</a></li>
</ul>
</li>
<li><a href=#>About Lonoooooo o o o o</a>
<ul>
<li><a href=#>About1 Very Long</a></li>
<li><a href=#>About2 Long</a>
<ul>
<li><a href=#>subAbout2</a></li>
<li><a href=#>subAbout2</a>
<ul>
<li><a href=#>subAbout2</a></li>
<li><a href=#>subAbout2</a>
<ul>
<li><a href=#>subAbout2</a></li>
<li><a href=#>subAbout2</a>
<ul>
<li><a href=#>22</a></li>
<li><a href=#>22</a>
</li>
<li><a href=#>s22</a></li>
</ul>
</li>
<li><a href=#>subAbout2</a></li>
</ul>
</li>
<li><a href=#>subAbout2</a></li>
</ul>
</li>
<li><a href=#>2</a></li>
</ul>
</li>
<li><a href=#>About3</a></li>
</ul>
</li>
</ul>
</nav>
The following coding gives an output of a list in a vertical manner. How do I adjust this to make it in horizantal list? For example like this: http://www.nol.com.sg/wps/portal/nol
<body>
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History</li>
<li>News</li>
</ul>
<li><a class="menu" href="">Contact Us</a></li>
</ul>
</body>
DEMO
HTML
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home
</li>
<li>About
</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History
</li>
<li>News
</li>
</ul>
<li><a class="menu" href="">Contact Us</a>
</li></li>
</ul>
CSS
#mainmenu li {
float:left;
list-style-type:none;
margin-right:1px;
width:80px;
text-align:center;
}
#mainmenu li li {
float:none;
padding:0;
}
#mainmenu li ul {
display:none;
padding:0;
}
#mainmenu li:hover ul {
display: block;
}
In css use the following code:
#mainmenu li{
display:inline;
}
http://css.maxdesign.com.au/listutorial/horizontal_master.htm
CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
HTML
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
To affect this only on li that are childs of #mainmenu
#mainmenu > li {
float:left
}
DEMO
HTML
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home
</li>
<li>About
</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History
</li>
<li>News
</li>
</ul>
<li><a class="menu" href="">Contact Us</a>
</li></li>
</ul>
CSS
#mainmenu li {
float:left;
list-style-type:none;
margin-right:1px;
width:80px;
text-align:center;
}
#mainmenu li li {
float:none;
padding:0;
}
#mainmenu li ul {
padding:0;
}
#mainmenu li:hover ul {
display: block;
}
I'm using float: right for my horizontal menu (.drop_menu li) as I want the menu to be aligned to the right side of the screen (and logo to the left side). It works OK, the only issue is that my menu items are now in the wrong order (Link 3 then Link 3 then Link 1 instead of the opposite). Is there a way to fix that?
Many thanks
http://jsfiddle.net/eLSbq/
<div class="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
.header {
width: 100%;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
height: 120px;
display: table;
position: fixed;
z-index: 999999;
opacity: 0.7;
background: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}
.drop_menu {
padding:0;
margin:0;
list-style-type:none;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
.drop_menu li { display: table-cell;
vertical-align: middle; float: right;}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
Remove float:right from li which prevent the reverse order.
Add float:right to the ul's .dropdown class which put your entire menu at right side.
Add float:left to the li which helps your sub-menu to stay align.
.drop_menu {
float: right;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
float:left;
}
Js Fiddle Demo
flex solution:-
This is what worked for me:
ul {
display: flex;
justify-content: flex-end;
}
ul li {
outline: 2px violet solid;
display: list-item;
list-style: none;
padding: 10px;
margin: 0 5px;
}
ul li:hover {
outline: 2px deeppink solid;
cursor: pointer;
}
<div>
<h1>Hello World....</h1>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
Here is the fiddle: https://jsfiddle.net/appsparkler/emjst7f3/4/
Good Luck...
Add one more div around menu items and set float to right
<div style='float:right'>
<!-- put menu controls here -->
</div>
Remove float right from following class
.drop_menu li { display: table-cell;
vertical-align: middle;}
for demo click on jsfiddle link
Try this...
.drop_menu li { display: table-cell;
vertical-align: middle; float: left;
}
It results in LINK 1 LINK 2 LINK 3 order and reduce the width of submenu links.
It works.
Float the <ul> to the right, then float its <li> elements to the left.
I'm experiencing 4 issues with my current code that I cannot fix (every time I fix something it creates a collateral issue):
http://jsfiddle.net/88zNs/1/
The logo text is slightly (1 or 2px) lower than the menu items
The blue and the red DIVs should both have a fixed height of 80px and be
vertically centered in the #header DIV which has a height of 120px.
But for some reason the blue and red DIVs have both a height of 120px and we can't
see the black #header DIV behind.
My menu items are aligned to the left side of the red DIV but I'd like them to be aligned
to the right side (can't use float right if I want to keep the same
link order (Link 1, Link 2, Link 3)
The sub-menu items (sub-link1, sub-link2, etc) are floating next to each other whereas I'd like them under each other like on a normal drop down menu
I know it's a lot of question... Many thanks for you help
EDIT: thanks to salsaturion everything's almost fixed http://jsfiddle.net/88zNs/9/ Remaining issue is that the items order are now in the wrong order due to float: right
HTML:
<div id="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a>
</li>
<li><a href='#'>Sub Link 2</a>
</li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a>
</li>
<li><a href='#'>Sub Link 2</a>
</li>
<li><a href='#'>Sub Link 3</a>
</li>
<li><a href='#'>Sub Link 4</a>
</li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a>
</li>
<li><a href='#'>Sub Link 2</a>
</li>
<li><a href='#'>Sub Link 3</a>
</li>
<li><a href='#'>Sub Link 4</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#header {
width: 100%;
height: 120px;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
display: table;
background: #000;
position: fixed;
}
.logo {
background: aqua;
display: table-cell;
vertical-align: middle;
left:0;
height:80px;
}
/* ==========================================================================
Site Navigation
========================================================================== */
/* CSSTerm.com Simple Horizontal DropDown CSS menu */
.drop_menu {
background:red;
padding:0;
margin:0;
list-style-type:none;
height:80px;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
.red {
background:red;
}
.green {
background:green;
height: 60px;
-webkit-transition-duration: 400ms;
-webkit-transition-function: linear;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover {
position:relative;
background:#5FD367;
}
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover {
background:#005555;
}
.block {
width:100%;
height: 500px;
}
Quickly looked at issue 2 and the reason is because of the table-cell. The following should have the same effect and leave the div as 80px in height:
.logo {
background: aqua;
vertical-align: middle;
line-height: 80px; /* this is set to same height as the div */
left:0;
height:80px;
margin: 20px 0;
}
Will have a look at the other questions when I get a chance
EDIT:
1) Don't see the issue - they all look like they are aligned
2) As per above
3 and 4) Adding float: right to .drop_menu li should fix both issues
I have a horizontal ccs dropdown menu which isn't working in IE. the colors doesn't hover and the dropdown won't come down. It works in the other browsers like Safari, firefox etc. I have IE 10.
What have i done wrong?
Here is my HTML:
<ul class="nav">
<li><a href = '#'><img src="images/house.png"/></a></li>
<li class="menu"><a href = '#'><span>Je Studie</span></a>
<ul>
<li><a href='#'>Programma</a></li>
<li><a href='#'>Begeleiding</a></li>
<li><a href='#'>Locaties</a></li>
<li><a href='#'>Open dag</a></li>
<li><a href='#'>Toelatingseisen</a></li>
<li><a href='#'>Aanmelden</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Voor ouders</span></a>
<ul>
<li><a href='#'>Studiekeuzeproces</a></li>
<li><a href='#'>Studiekeuzeactiviteiten</a></li>
<li><a href='#'>Het puberbrein</a></li>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Begeleiding</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Voor decanen</span></a>
<ul>
<li><a href='#'>Advies</a></li>
<li><a href='#'>Studiekeuzeactiviteiten</a></li>
<li><a href='#'>Decanennieuws</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Voor bedrijven</span></a>
<ul>
<li><a href='#'>Opleiding</a></li>
<li><a href='#'>Opdrachtstages</a></li>
<li><a href='#'>Afstudeeropdrachten</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Contact</span></a></li>
</ul>
and my CSS:
.nav , .nav ul {
list-style-type:none;
background:#d70047;
}
.nav {
position:relative;
height:37;
background:#d70047;
}
.nav a {display:block;
color:white;
font-family:Myriad Pro;
font-size:16px;
}
.nav li{
float:left;
margin:3px 0px 0px 0px;
padding:3px 10px;
}
.nav .menu{
padding:11px 47px 7px 47px;
margin:0px 0px 0px 0px;
}
.nav .menu:hover{
background:#e3e1e1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav ul{
visibility:hidden;
top:100%;
left:0;
position:absolute;
background:#e3e1e1;
width:920px;
height:33;
}
.nav ul li a{
font-family:Myriad Pro;
font-size:15px;
color:black !important;
}
.nav .menu:hover a{
color:#1882a5;}
.nav ul li{
background:#e3e1e1;
padding:5px 50px 5px 5px;
}
.nav ul li:hover{
}
.nav ul li:hover a{
text-decoration:underline;
font:bold;
}
.nav li:hover>ul{
visibility:visible;
}
Have you tried changing your heights to px values, i.e. height: 37px; and height: 33px;? If that's it, it's possible that the other browsers are assuming that you meant px where IE might not.
Have you tried em instead of px.