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;
Related
I am trying to figure out why none of my css is being applied when previewing my code. I've checked my file tree and made sure everything is linked, but it just shows up as plain text. I am using html/css/bootstrap 3.0.2 and jquery CDN. I also tried changing the order of the links, but nothing I do seems to work. I've included a portion of my code to be as clear as possible as to what is going on. Any help or suggestions is greatly appreciated.
====================================================================
Fonts
====================================================================
***/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
#import url('font-awesome.css');
/***
====================================================================
Reset
====================================================================
***/
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: 'Open Sans', sans-serif;
font-size:14px;
color:#353535;
line-height:1.6em;
font-weight:500;
background:#ffffff;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration:none;
cursor:pointer;
color:#000000;
}
a:hover,a:focus,a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
margin:0px;
background:none;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
p{
font-size:14px;
line-height:1.6em;
}
/***
====================================================================
Sidebar
====================================================================
****/
#sidebar{
position:fixed;
left:0px;
top:0px;
width:250px;
height:100%;
padding:0px 20px;
border-right:2px solid #cccccc;
z-index:10;
}
#sidebar .mCSB_inside > .mCSB_container{
margin-right:12px !important;
}
#sidebar .mCS_no_scrollbar .mCSB_container{
margin-right:0px !important;
}
#sidebar .menu-box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:auto;
padding:0px 0px 30px;
background:rgba(0,0,0,0.80);
transition:all 1000ms ease;
-moz-transition:all 1000ms ease;
-webkit-transition:all 1000ms ease;
-ms-transition:all 1000ms ease;
-o-transition:all 1000ms ease;
}
#sidebar .menu-box .logo{
position:relative;
text-align:center;
margin-bottom:35px;
padding:30px 20px 10px;
}
#sidebar .menu-box .logo img{
position:relative;
display:inline-block;
max-width:100%;
}
#sidebar .menu-box .sticky-menu{
position:relative;
}
#sidebar .menu-box .sticky-menu > ul{
position:relative;
display:block;
margin:0px;
padding:0px;
border-top:1px solid rgba(255,255,255,0.20);
}
#sidebar .menu-box .sticky-menu > ul > li{
position:relative;
display:block;
padding:3px 0px;
border-bottom:1px solid rgba(255,255,255,0.20);
font-size:20px;
color:#ffffff;
text-align:right;
}
#sidebar .menu-box .sticky-menu > ul > li > a{
position:relative;
display:block;
padding:7px 30px 7px 0px;
color:#ffffff;
font-size:13px;
font-weight:600;
line-height:20px;
text-transform:uppercase;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li a .fa{
position:absolute;
right:-10px;
top:0px;
width:24px;
text-align:right;
color:#ffffff;
opacity:0;
font-size:12px;
display:block;
line-height:34px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li.current a .fa,
#sidebar .menu-box .sticky-menu > ul > li:hover a .fa{
right:6px;
opacity:1;
}
#sidebar .menu-box .sticky-menu > ul > li > a:hover,
#sidebar .menu-box .sticky-menu > ul > li.current > a,
#sidebar .menu-box .sticky-menu > ul > li.current-menu-item > a{
color:#cccccc;
}
#sidebar .copyright{
position:fixed;
left:0px;
bottom:5px;
width:250px;
height:30px;
font-size:13px;
color:#ffffff;
line-height:30px;
text-align:center;
}
#sidebar .copyright a{
color:#ffffff;
}
/***
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA=" crossorigin="anonymous"></script>
<title>Grest Fitness| Homepage</title>
<!-- Stylesheets -->
<link href="style.css/css/bootstrap.css" rel="stylesheet">
<link href="style.css/css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]
<[if lt IE 9]><script src="js/respond.js"></script>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloder -->
<div id="preloder" class="preloader">
<div class="loader"></div>
</div>
<!-- Εnd Preloader -->
<!-- Main Header-->
<header class="main-header header-style-one">
<!--Header-Upper-->
<div class="header-upper">
<div class="outer-container">
<div class="inner-container clearfix">
<!-- Logo Box -->
<div class="logo-box">
<div class="logo"><img src="https://via.placeholder.com/180x78" alt="" title=""></div>
</div>
<!-- Logo -->
<div class="mobile-logo pull-left">
<img src="https://via.placeholder.com/230x46" alt="" title="">
</div>
<!-- Header Social Box -->
<div class="header-social-box clearfix">
</div>
<div class="outer-box clearfix">
<!-- Hidden Nav Toggler -->
<div class="nav-toggler">
<div class="nav-btn"><button class="hidden-bar-opener">Menu</button></div>
</div>
<!-- / Hidden Nav Toggler -->
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon"><img src="images/icons/burger.svg" alt="" /></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li>Home</li>
<li class="dropdown">About Us
<ul>
<li>About Us</li>
<li>Time Table</li>
<li>Comming Soon</li>
<li>Section Page 01</li>
<li>Section Page 02</li>
</ul>
</li>
<li class="dropdown">Trainers
<ul>
<li>Trainer 01</li>
<li>Trainer 02</li>
</ul>
</li>
<li class="dropdown">Shop
<ul>
<li>Shop Left Sidebar</li>
<li>Shop Right Sidebar</li>
<li>Product Single</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</li>
<li class="dropdown">Blog
<ul>
<li>Our Blog</li>
<li>Blog Classic</li>
<li>Blog Detail One</li>
<li>Blog Detail Two</li>
<li>Not Found</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
I think you missed the comment at first line in css. See:
/***
====================================================================
Fonts
====================================================================
***/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
#import url('font-awesome.css');
/***
====================================================================
Reset
====================================================================
***/
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: 'Open Sans', sans-serif;
font-size:14px;
color:#353535;
line-height:1.6em;
font-weight:500;
background:#ffffff;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration:none;
cursor:pointer;
color:#000000;
}
a:hover,a:focus,a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
margin:0px;
background:none;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
p{
font-size:14px;
line-height:1.6em;
}
/***
====================================================================
Sidebar
====================================================================
****/
#sidebar{
position:fixed;
left:0px;
top:0px;
width:250px;
height:100%;
padding:0px 20px;
border-right:2px solid #cccccc;
z-index:10;
}
#sidebar .mCSB_inside > .mCSB_container{
margin-right:12px !important;
}
#sidebar .mCS_no_scrollbar .mCSB_container{
margin-right:0px !important;
}
#sidebar .menu-box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:auto;
padding:0px 0px 30px;
background:rgba(0,0,0,0.80);
transition:all 1000ms ease;
-moz-transition:all 1000ms ease;
-webkit-transition:all 1000ms ease;
-ms-transition:all 1000ms ease;
-o-transition:all 1000ms ease;
}
#sidebar .menu-box .logo{
position:relative;
text-align:center;
margin-bottom:35px;
padding:30px 20px 10px;
}
#sidebar .menu-box .logo img{
position:relative;
display:inline-block;
max-width:100%;
}
#sidebar .menu-box .sticky-menu{
position:relative;
}
#sidebar .menu-box .sticky-menu > ul{
position:relative;
display:block;
margin:0px;
padding:0px;
border-top:1px solid rgba(255,255,255,0.20);
}
#sidebar .menu-box .sticky-menu > ul > li{
position:relative;
display:block;
padding:3px 0px;
border-bottom:1px solid rgba(255,255,255,0.20);
font-size:20px;
color:#ffffff;
text-align:right;
}
#sidebar .menu-box .sticky-menu > ul > li > a{
position:relative;
display:block;
padding:7px 30px 7px 0px;
color:#ffffff;
font-size:13px;
font-weight:600;
line-height:20px;
text-transform:uppercase;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li a .fa{
position:absolute;
right:-10px;
top:0px;
width:24px;
text-align:right;
color:#ffffff;
opacity:0;
font-size:12px;
display:block;
line-height:34px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li.current a .fa,
#sidebar .menu-box .sticky-menu > ul > li:hover a .fa{
right:6px;
opacity:1;
}
#sidebar .menu-box .sticky-menu > ul > li > a:hover,
#sidebar .menu-box .sticky-menu > ul > li.current > a,
#sidebar .menu-box .sticky-menu > ul > li.current-menu-item > a{
color:#cccccc;
}
#sidebar .copyright{
position:fixed;
left:0px;
bottom:5px;
width:250px;
height:30px;
font-size:13px;
color:#ffffff;
line-height:30px;
text-align:center;
}
#sidebar .copyright a{
color:#ffffff;
}
/***
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA=" crossorigin="anonymous"></script>
<title>Grest Fitness| Homepage</title>
<!-- Stylesheets -->
<link href="style.css/css/bootstrap.css" rel="stylesheet">
<link href="style.css/css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]
<[if lt IE 9]><script src="js/respond.js"></script>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloder -->
<div id="preloder" class="preloader">
<div class="loader"></div>
</div>
<!-- Εnd Preloader -->
<!-- Main Header-->
<header class="main-header header-style-one">
<!--Header-Upper-->
<div class="header-upper">
<div class="outer-container">
<div class="inner-container clearfix">
<!-- Logo Box -->
<div class="logo-box">
<div class="logo"><img src="https://via.placeholder.com/180x78" alt="" title=""></div>
</div>
<!-- Logo -->
<div class="mobile-logo pull-left">
<img src="https://via.placeholder.com/230x46" alt="" title="">
</div>
<!-- Header Social Box -->
<div class="header-social-box clearfix">
</div>
<div class="outer-box clearfix">
<!-- Hidden Nav Toggler -->
<div class="nav-toggler">
<div class="nav-btn"><button class="hidden-bar-opener">Menu</button></div>
</div>
<!-- / Hidden Nav Toggler -->
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon"><img src="images/icons/burger.svg" alt="" /></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li>Home</li>
<li class="dropdown">About Us
<ul>
<li>About Us</li>
<li>Time Table</li>
<li>Comming Soon</li>
<li>Section Page 01</li>
<li>Section Page 02</li>
</ul>
</li>
<li class="dropdown">Trainers
<ul>
<li>Trainer 01</li>
<li>Trainer 02</li>
</ul>
</li>
<li class="dropdown">Shop
<ul>
<li>Shop Left Sidebar</li>
<li>Shop Right Sidebar</li>
<li>Product Single</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</li>
<li class="dropdown">Blog
<ul>
<li>Our Blog</li>
<li>Blog Classic</li>
<li>Blog Detail One</li>
<li>Blog Detail Two</li>
<li>Not Found</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
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 currently building a sidebar using bootstrap.
I have the bar built, however when I scroll down the page, a blank space appears between the sidebar and the navbar. Is there anyway that I can make the navbar stay stationary, or fill in the blank space when the page is scrolled down? I have included screenshots and code. Normal, before scrolling
After Scrolling
Code listed below:
<nav class = "navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button type = "button" class="navbar-toggle" data-
toggle="collapse" data-target="#myNavbar">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<a class = "navbar-brand" href="Home.html">Stephens Catering</a>
</div>
<div class = "collapse navbar-collapse" id="myNavbar">
<ul class = "nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li class="dropdown">
<a class = "dropdown-toggle" data-toggle="dropdown"
href="OurProducts.html">Our Products
<span class = "caret"></span></a>
<ul class = "dropdown-menu">
<li>Cookers</li>
<li>Fridges</li>
<li>Misc</li>
</ul>
</li>
<li>Contact us</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!--The sidebar for the products pages -->
<div id = "wrapper">
<!-- Sidebar -->
<div id = "sidebar-wrapper">
<ul class="sidebar-nav">
<li class = "sidebar-brand">
Categories
</li>
<li>
Cookers
</li>
<li>
Fridges
</li>
<li>
Misc
</li>
</ul>
</div>
<!-- Sidebar Wrapper -->
<!-- Page Content -->
<!-- Button to toggle sidebar menu -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class = "row">
<div class = "col-lg-12">
Toggle Menu
</div>
</div>
</div>
</div>
The stylesheet:
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s;
}
#wrapper.toggled {
padding-left:250px;
}
#sidebar-wrapper {
z-index: 1000;
position:fixed;
left:250px;
width:0;
height:100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width:250px;
}
#page-content-wrapper {
width:100%;
position:absolute;
padding:15px;
}
#wrapper.toggled #page-content-wrapper {
position:absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position:absolute;
top:0;
width:250%;
margin:0;
padding:0;
list-style: none;
}
.sidebar-nav li {
text-indent:20px;
line-height: 40px
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color:#999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color:#fff;
background:rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height:65px;
font-size:18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color:#999999;
}
.sidebar-nav > sidebar-brand a:hover{
color:#fff;
backround:none;
}
#media(min-width: 768px) {
#wrapper {
padding-left:0;
}
#wrapper.toggled {
padding-left:250px;
}
#sidebar-wrapper {
width:0;
}
#wrapper.toggled #sidebar-wrapper {
width:250px;
}
#page-content-wrapper {
padding:20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right:0;
}
}
I think your issue is using the position:fixed in the #sidebar-wrapper css class which causes it to stick to the positioned place on the screen without scroll affect. If you want it to stick right below the top navbar then change it to position:absolute and your problem will be hopefully resolved. And if you want it to stick to top and also keep the black background of the sidebar to follow through to the bottom then change #sidebar-wrapper position:relative.
The best way for you to understand this is to understand the effects of the values of the position property. Following is a link to the w3schools definition of position property and it's values with description.
https://www.w3schools.com/cssref/pr_class_position.asp
Hope this helps.
Try adding this to your actual sidebar-wrapper css rule:
.sidebar-wrapper{
top:0;
}
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
I am attempting to create a drop down menu bar for the "Our Collections" but my attempts are not working. Can anyone lend me a hand please. Below is my html and the css for it. I have removed my random trial and errors for it, and kept .menu ul ul {display:none}
* html .clearfix {
height: 1%;
overflow: visible;
}
* + html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
body {
margin: 0;
padding: 0;
}
.menu {
text-align: center;
background-color: #222;
}
.menu ul {
list-style: none;
height: auto;
padding: 40px;
width: 500px;
float: right;
}
.menu ul li {
float: left;
padding: 0 20px;
font-size: 20px;
font-family: Impact;
}
.menu ul ul {
display: none;
}
.menu ul li a {
color: white;
text-decoration: none;
transition: 350ms;
}
.menu ul li a:hover {
color: #ed702b
}
.title {
float: left;
font-size: 40px;
margin-left: -173px;
margin-top: 37px;
}
.title a {
text-decoration: none;
color: white;
}
.center {
width: 980px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="includes/site.css">
<title>Home</title>
</head>
<body>
<div class="menu">
<div class="center clearfix" style="height: 124px">
<h1 class="title">My first web</h1>
<ul class="clearfix">
<li>Home
</li>
<li>Our Collections
</li>
<ul>
<li>First Collection
</li>
<li>Second Collection
</li>
</ul>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
I got an old menu I made a long time ago.
I think you can work from this: Fiddle
Link 3 is the dropdown menu. Just look at the Fiddle
<div id="mainnav">
<nav>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>2011</li>
<li>2012</li>
<li>2013</li>
</ul>
</li>
<li>link4</li>
<li class="end">link5</li>
</ul>
</nav>
</div>
If you need more help just say so.
I threw this together really quick for you as well. It's nothing elegant, but it's a great starting point and uses your original skeleton for your menu
Link to the fiddle:
http://jsfiddle.net/Lgpapw2p/
<ul class='menu'>
<li>
Home
</li>
<li>
Our Collections
<ul>
<li>First Collection</li>
<li>Second Collection</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
.menu{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
.menu li{
float:left;
margin-right:10px;
position:relative;
}
.menu a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
.menu a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
.menu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.menu ul li{
padding-top:1px;
float:none;
}
.menu ul a{
white-space:nowrap;
}
.menu li:hover ul{
left:0;
}
.menu li:hover a{
background:#008;
text-decoration:underline;
}
.menu li:hover ul a{
text-decoration:none;
}
.menu li:hover ul li a:hover{
background:#333;
}