Basically I want the list to have its sub-list displayed next to it, and the other list elements move aside nicely (transition) but if i set overflow it vertically aligns the sublist and if i set display: none then transitions don't work at all.
I just want the list to work like
Test Test Test
Then on hover with the first test and it pushes the last two tests aside smoothly and ends up
Test Test2 Test3 Test Test
I've tried searching and applying methods from other threads, but I can't find anything that will fit it, and work in IE nicely. I don't care for the transition to be working in IE, just that the list works.
http://jsfiddle.net/qohw1dxj/
<ul>
<li>
Test
<ul>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
<li>
Test
<ul>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
<li>
Test
<ul>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
</ul>
* {
padding: 0;
margin: 0;
-webkit-transiton: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li:hover ul {
max-width: 10000px;
max-height: 10000px;
}
ul li ul {
display: inline-block;
max-width: 0px;
max-height: 0px;
padding: 0;
list-style: none;
}
Did you mean something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style:none;
white-space:nowrap;
}
ul li {
display: inline-block;
}
ul li a {
background:red;
padding:10px;
display:inline-block;
}
.menu > li > a {
position:relative
}
ul li li a {
color:red;
background:green
}
ul li ul {
display: inline-block;
width:0;
height:0;
max-width:0;
visibility:hidden;
}
ul li:hover ul {
margin-left:0;
width:auto;
height:auto;
opacity:1;
max-width:1000px;
visibility:visible;
-webkit-transiton: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
</style>
</head>
<body>
<ul class="menu">
<li> Test A
<ul>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
<li> Test B
<ul>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
<li> Test C
<ul>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
</ul>
</body>
</html>
The transition rule cannot be applied to display style in CSS. This may be a solution you can try out:
Transitions on the display: property
Related
When I hover a Media, E-sport, Community I want to see <li> under them. I get it with the rgb opacity. But it's a pity that when I hover AN <li> element which is opacity 0 it appears. I only want to do it when I hover ol li a. Someone know's the answer?
Here's my code (Menu with lists)
.Menu ol {
display: inline-block;
padding: 0;
margin: 0;
line-height: 1;
}
.Menu ol>li>ul>li>a {
margin-left: 0;
padding: 0;
}
.Menu ol>li {
float: left;
padding: 0;
list-style-type: none;
}
.Menu ol>li>ul>li>a {
color: rgba(55, 255, 255, 0);
transition: .5s ease-in-out;
}
.Menu ol>li:hover>ul>li>a {
color: rgba(55, 255, 255, 1);
transition: .5s ease-in-out;
background-color: rgb(0, 0, 205, 1);
}
.Menu ol>li>ul>li {
clear: both;
margin-left: 90px;
}
.Menu ol>li>ul>li {
clear: both;
margin: 0;
list-style-type: none;
padding: 0;
}
.Menu ol>li>ul>li>a {
padding-left: 0;
margin: 0;
}
Article {
width: 1920px;
height: 957px;
}
<div class="Menu">
<ol>
<li>Media
<ul>
<li>Facebook</li>
<li>Facebook</li>
<li>Facebook</li>
</ul>
</li>
<li>E-sport
<ul>
<li>Facebook</li>
<li>Facebook</li>
<li>Facebook</li>
</ul>
</li>
<li>Community
<ul>
<li>Facebook</li>
<li>Facebook</li>
<li>Facebook</li>
</ul>
</li>
</ol>
</div>
To be honest I find the whole ".Menu ol>li:hover>ul>li>a.. " and so on pure madness, its messy and unclear, much better effects you will get when using pure divs and classes, also use display: none, so it actually takes away the elements unless you set it to something, here is the code:
Edited: Use opacity: 0 and overflow: hidden, it works with transtition
Edit2: Actually simple height: 0 + overflow hidden will give you nice transtition in AND out, it got to have fixed height on hover thou.
<div class="Menu">
<div class="Menu-item-container">
Media
<div class="hover-items">
<div>Facebook</div>
<div>Facebook</div>
<div>Facebook</div>
</div>
</div>
<div class="Menu-item-container">
E-sport
<div class="hover-items">
<div>Facebook</div>
<div>Facebook</div>
<div>Facebook</div>
</div>
</div>
<div class="Menu-item-container">
Community
<div class="hover-items">
<div>Facebook</div>
<div>Facebook</div>
<div>Facebook</div>
</div>
</div>
</div>
<style>
.Menu {
display: flex;
justify-content: space-around;
width: 300px;
}
a {
text-decoration: none;
}
.hover-items {
transition: .5s ease-in-out;
height: 0;
overflow: hidden;
}
.Menu-item-container {
width: 100px;
text-align: center;
}
.Menu-item-container:hover .hover-items{
height: 100px;
}
</style>
Codepen: https://codepen.io/Raitar/pen/QOZgoV?editors=1100
Dude i'm sorry but your code is madness. why combine ol and ul.
here i give you free mine :
body{
width:100%;
height:100%;
margin:0;
}
ul{
list-style:none;
padding:0;
}
a{
text-decoration:none;
}
.menu {
width:100%;
height: 33px;
background: #000;
position:relative;
}
.menu ul:not(.sub-menu):not(.micro){
margin:auto;
display:flex;
}
.menu ul li{
position:relative;
flex:1;
}
.menu a{
text-align:center;
display:block;
line-height: 33px;
margin-right: 40px;
color:#fff;
padding: 0 15px;
}
.sub-menu{
width:100%;
display:none;
position: absolute;
transform:translateY(0);
background: #ccc;
transition: all 300ms;
z-index:2;
}
.sub-menu a{
margin:10px 0;
}
.micro{
top:-10px;
width:100%;
opacity:0;
transform: translate(100%, 0);
position: absolute;
background: orangered;
z-index:1;
transition: all 300ms;
}
.micro a{
color:#fff;
}
.menu ul li a:hover + ul.sub-menu {
display:block;
}
.sub-menu:hover{
transform:translateY(5%);
display:block;
}
.sub-menu a:hover + ul.micro {
opacity:1;
}
.micro:hover{
opacity:1;
}
<div class="menu">
<ul>
<li>MEDIA
<ul class="sub-menu">
<li>FACEBOOK
<ul class="micro">
<li>TWITTER</li>
<li>TWITTER</li>
<li>TWITTER</li>
</ul>
</li>
<li>FACEBOOK</li>
<li>FACEBOOK</li>
</ul>
</li>
<li>E-SPORT
<ul class="sub-menu">
<li>FACEBOOK</li>
<li>FACEBOOK</li>
<li>FACEBOOK</li>
</ul>
</li>
<li>COMMUNITY
<ul class="sub-menu">
<li>FACEBOOK</li>
<li>FACEBOOK</li>
<li>FACEBOOK</li>
</ul>
</li>
</ul>
</div>
I'm trying to have the sub menu items disappear after a certain amount of time using CSS only. Sadly if I have more than one sub menu and hover over the next sub menu the other one has not yet disappeared. Any way to make the previous sub menu disappear when the next sub menu is show with CSS only?
It wouldn't be hard for me to write a JQuery script to achieve this but would nice if I could do it using css. Would there be any JS/JQuery plugins to recommend if this is not possible with CSS?
http://codepen.io/anon/pen/aBPBbj
nav > ul > li {
display: inline-block
}
nav > ul > li ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0.2s 1s;
}
nav > ul > li:hover ul {
visibility: visible;
transition-delay: 0s;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
width: 100px;
background: #eee;
margin: 2px;
position: relative;
padding: 10px;
}
nav a {
display: block;
}
body {
padding: 10px;
}
<nav>
<ul>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
</nav>
Try to remove transition: 0.2s 1s;
Just change the tarnsition time as shown below code.
nav > ul > li ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0.2s;
}
Try this example of code:
<ul id="mainNav">
<li>item 1
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
</ul>
</li>
<li>item 3
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
ul#mainNav {
float:left;
width:auto;
margin:0; padding:0;
color:white;
list-style-type:none;
}
ul#mainNav > li {
float:left;
display:inline;
position:relative;
padding:5px;
border:1px white solid;
background-color:black;
}
ul#mainNav > li:hover {
background:white;
color:black;
border:1px black solid;
}
ul#mainNav > li:hover ul {
visibility: visible;
opacity: 1;
transition-delay: 0s, 0s;
}
ul#mainNav li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding:10px;
margin:0;
visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: 1.4s, 0s;
transition-delay: 0s, 0s;
}
ul#mainNav ul li {
background-color:white;
border:1px black solid;
}
ul#mainNav ul li:hover {
background-color:black;
border:1px white solid;
color:white;
visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: 0s, 0s;
transition-delay: 0s, 0s;
}
Seeing as no one proposed a working CSS only solution apparently the only way to achieve this is through javascript/JQuery.
https://jsfiddle.net/jkanckr3/
<nav>
<ul>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</a></li>
</ul>
</li>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</a></li>
</ul>
</li>
</ul>
</nav>
var timeout;
$('nav > ul > li').on({
mouseenter: function () {
clearTimeout(timeout);
$('nav > ul > li > ul').hide();
$('ul', this).show();
},
mouseleave: function () {
var self = this;
timeout = setTimeout(function() {
$('ul', self).hide();
}, 500);
}
});
nav > ul > li {
display: inline-block
}
nav > ul > li ul {
display: none;
position: absolute;
top: 105%;
left: 0;
}
nav > ul > li:hover ul {
//visibility: visible;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
width: 100px;
background: #eee;
margin: 2px;
position: relative;
padding: 10px;
}
nav a {
display: block;
}
body {
padding: 10px;
}
Please see a menu I'm using on a site below. It works fine in most browsers but with IE10 (IE11 is fine) when you hover over a menu item then go to select a sub menu item, when the cursor goes into any of the small gaps between the vertical sub menu items the menu thinks the user has went outside the submenu and it closes.
Can anybody tell me what is causing this to happen in IE10 and nothing else?
Regards,
Marc
#nav-wrap {
height:28px;
position:relative;
top:-70px;
width:100%;
margin:0 auto;
z-index:10;
text-align:center;
}
#nav {
font-size:15px;
font-weight:400;
text-align:center;
position:relative;
display:inline-table;
}
#nav ul li:hover > ul {
display:block;
}
#nav ul {
padding:0px;
margin:0px;
list-style:none;
position:relative;
}
#nav ul:after {
content:"";
clear:both;
display:block;
}
#nav ul li { /* KEY - Changes main nav bar li style */
float:left;
margin-left:14px;
margin-right:14px;
}
#nav ul li a {
display:block;
color:white;
text-decoration:none;
background:#416b8f;
border-radius:2px;
padding:3px 15px 3px 15px;
}
#nav ul li a:hover {
background:#003768;
border-radius:0px;
-webkit-transition: ease-in 0.2s;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition: ease-in 0.2s;
}
.selected {
background:#003768;
display:block;
color:white;
text-decoration:none;
border-radius:2px;
padding:3px 15px 3px 15px;
}
#nav ul ul {
position:absolute;
top:100%;
text-align:left;
margin:0;
display:none;
}
#nav ul ul li {
float:none;
position:relative;
margin:0px;
font-size:14px;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
}
#nav ul ul li:hover {
}
#nav ul ul li a {
border-radius:0px;
padding-top:5px;
padding-bottom:5px;
}
#nav ul ul li a:hover {
background:#003768;
-webkit-transition: ease-in 0.2s;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition: ease-in 0.2s;
}
#nav ul ul ul {
position:absolute;
left:100%; /* switch to left to change position of nested menus */
top:0;
}
li {
white-space: nowrap;
}
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT
<ul>
<li>ACET
<ul>
<li>ACET HELPS</li>
<li>ACCREDITATION</li>
</ul>
</li>
<li>FEATURES</li>
<li>WEB DASHBOARD</li>
<li>ACET 8</li>
<li>CLIENTS</li>
<li class="selected">NEWS</li>
</ul>
</li>
<li>SERVICES
<ul>
<li>TRAINING</li>
<li>SUPPORT
<ul>
<li>HELP DESK</li>
<li>USER GUIDE</li>
<li>ACET TECHNICAL PRACTICE</li>
</ul>
</li>
<li>DATA IMPORT</li>
<li>DEVELOPMENT</li>
</ul>
</li>
<li>ASSET INTEGRITY
<ul>
<li>INTEGRITY INFORMATION</li>
<li>INSPECTION & INTEGRITY MANAGEMENT</li>
<li>NON-DESTRUCTIVE TESTING
<ul>
<li>SPECIALIST INSPECTION SERVICES</li>
<li>INSPECTION METHOD CAPABILITY</li>
<li>INSPECTION METHOD SELECTION</li>
</ul>
</li>
<li>DATA SOLUTIONS</li>
</ul>
</li>
<li>DOWNLOADS
<ul>
<li>LATEST NEWSLETTER</li>
<li>ACET DATA SHEET</li>
<li>ASSET INTEGRITY BROCHURE</li>
<li>THE INSPECTION STANDARD
</li>
</ul>
</li>
</ul>
</div>
I've got a dropdownmenu for my site and I noticed only the words itself are clickable not the whole box the word (link) is placed in.
I already added display: block; to the a element but this seems to only work horizontal, still not the whole box.
Hope you can help me out! And Thank you in advance!
Here's de css code:
#dropdownmenu a {
color:inherit !important;
display:block;
text-decoration:none !important}
#dropdownmenu {
width:1050px;
background:#137cd7;
z-index:2;
position:relative }
#dropdownmenu ul {
text-align:left;
display:inline;
margin:0px;
padding:10px 4px 25px 0;
list-style:none }
#dropdownmenu ul li {
display:inline-block;
margin-right:10px;
position:relative;
padding:15px 15px 14px;
cursor:pointer;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;
color:#fff }
#dropdownmenu ul li:hover {
background-color:#ffffff;
color:#137cd7 }
#media screen and (-webkit-min-device-pixel-ratio:0)
#dropdownmenu ul li ul {
top:44px !important}
#dropdownmenu ul li ul {
padding:0px;
position:absolute;
top:47px;
left:0px;
width:170px;
display:none;
opacity:0;
visibility:hidden;
-webkit-transiton:opacity 0.2s;
-moz-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
-transition:opacity 0.2s }
#dropdownmenu ul li ul li {
background-color:#fff;
display:block;
color:#222;
border-left:1px solid #ccc;
border-right:1px solid #ccc;}
#dropdownmenu ul li ul li:hover {
color:#137cd7;
background:#222;
text-decoration:none !important }
#dropdownmenu ul li:hover ul {
display:block;
opacity:1;
visibility:visible;
border-bottom:1px solid #ccc; }
And HTML:
<div id="dropdownmenu">
<ul>
<li>
Home</li>
<li>
Menu 1
<ul>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></li>
<li>
</li>
</ul>
</li>
</ul>
fiddle here
Thanks everyone!
Thank you for the answer! This helped me a lot! Everything works excellent now!
On the image below, you can see your dropdown's anchor in blue, and your li padding in green.
When you click on the green area, the browser will not follow the anchor which is a normal behaviour.
To correct that, remove the li padding, and apply it to the anchor. As anchors are inline elements, you'll have to display them as block to apply padding.
#dropdownmenu a {
padding:15px 15px 14px;
display: block;
}
I also have done some CSS improvements, you can take a look on the updated Fiddle
I'm trying to create a css drop down menu on my own and I got it to work but there is a problem with the width. When I hover over one of the menu items the drop down starts at the left side of the home link. I want the link to start on the left side of the link I'm hovering over. I'm not sure if what I said makes sense, so here's a fiddle: http://jsfiddle.net/nikito2003/qtDvL/. Thanks in advance for your help.
The html that I have is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/musictemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div align="center">
<table width="75%" border="1">
<tr>
<td><img src="images/logo-for-country.gif" width="144" height="144" alt="logo" />
<!-- InstanceBeginEditable name="EditRegion4" -->EditRegion4
<!-- InstanceEndEditable -->
</td>
</tr>
<tr>
<td><div class="menu" align="center">
<ul>
<li id="menu_item">Home</li>
<li id="menu_item">Musicians
<ul>
<li id="menu_sub_item">Toby Keith</li>
<li id="menu_sub_item">Rodney Atkins</li>
</ul>
</li>
<li id="menu_item">Songs
<ul>
<li id="menu_sub_header">Toby Keith</li>
<li id="menu_sub_item">Should’ve Been A Cowboy</li>
<li id="menu_sub_item">American Soldier</li>
<li id="menu_sub_item">How Do You Like Me Now</li>
<li id="menu_sub_header">Rodney Atkins
<li id="menu_sub_item">Watching You</li>
<li id="menu_sub_item">If You’re Going Through Hell</li>
<li id="menu_sub_item">He’s Mine</li>
</ul>
</li>
<li id="menu_item">Concerts</li>
</ul>
</div></td>
</tr>
</table>
<!-- InstanceBeginEditable name="EditRegion3" -->EditRegion3<!-- InstanceEndEditable --></div>
</body>
<!-- InstanceEnd --></html>
And the css I have is:
#charset "utf-8";
/* CSS Document */
.audio {
float:right;
}
.menu {
margin:0;
padding:0;
width:100%;
}
.menu ul {
list-style:none;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu #menu_item {
list-style:none;
display:inline;
}
.menu #menu_item a {
background-color:#0CF;
margin:2px 2px;
padding:6px 6px 10px;
text-decoration:none;
font-size:1.25em;
display:block;
float:left;
}
#menu_item a:hover {
background-color:red;
}
#menu_item ul {
display:none;
}
#menu_item ul {
display:none;
float:right;
}
#menu_item:hover > ul {
display:block;
position:absolute;
clear:both;
float:none;
top:40px;
margin-top:0px;
//width:100%;
background-color:#F0F0F0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
padding:5px;
}
#menu_sub_item {
position:relative;
float:none;
}
.menu #menu_sub_header a{
background-color:#999;
}
Well i have done it for u in a simpler and a bit responsive way
Here goes the HTML please do tweak it based on your needs
<nav>
<ul class="cf">
<li>Home</li>
<li><a class="dropdown" href="#">Mucicians</a>
<ul>
<li class = "more">Barakados</li>
<li class = "more">FaceRadiation</li>
<li class = "more">kolto101</li>
<li class = "more">OmegaDeltaZD</li>
</ul>
</li>
<li><a class="dropdown" href="#">Songs</a>
<ul>
<li class = "more">Barakados</li>
<li class = "more">FaceRadiation</li>
<li class = "more">kolto101</li>
<li class = "more">OmegaDeltaZD</li>
</ul>
</li>
<li><a class="dropdown" href="#">Concerts</a>
<ul>
<li class = "more">Barakados</li>
<li class = "more">FaceRadiation</li>
<li class = "more">kolto101</li>
<li class = "more">OmegaDeltaZD</li>
</ul>
</li>
</ul>
</nav>
And the CSS to make the magic happen
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
Do add in the styles you need .. Check here DEMO
Your issue is with the relative containing item. You put it as "inline" and this won't let the absolute positioned stuff be relative to it. Change it to "inline-block".
.menu #menu_item {
list-style:none;
display:inline-block;