I would like to know the way in which i can set this navbar just at the bottom of the page. I've been trying everything but it does not seems to be set at the bottom. I've tried with bottom, margin-bottom, i also dont know if there is a configuration i already set in my css that does not let these commands mentioned before to work.
HTML
<!doctype html>
{%load staticfiles%}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="{%static 'index/css/index.css'%}">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
<script src="https://kit.fontawesome.com/b525a42bf1.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="logo"><h2>MediTracker</h2></div>
<nav>
<div class="menu">
<ul class="clear">
<li><i class="fa fa-home"></i><span class="link-text">Home</span></li>
<li><i class="fa fa-question-circle"></i><span class="link-text">About</span></li>
<li><i class="fa fa-money-bill-alt"></i><span class="link-text">Pricing</span></li>
<li><i class="fa fa-tools"></i><span class="link-text">Services</span></li>
<li><i class="fa fa-phone"></i><span class="link-text">Contact Us</span></li>
</ul>
</div>
</nav>
</body>
</html>
CSS
body{
background-color: #333;
background-size: cover;
background-position: center;
font-family: 'GlacialIndifferenceRegular';
overflow: hidden;
font-weight: 600;
height: 85vh;
}
a{
text-decoration: none;
}
.clear:after{
content: "";
display: block;
clear:both;
}
nav .menu{
text-align: center;
margin-bottom:0px;
width: 100%;
}
nav .menu ul{
list-style: none;
display: inline-block;
}
nav .menu ul li{
float: left;
width: 150px;
height: 150px;
background-color: white;
transition: background-color 0.2s linear 0s;
}
nav .menu ul li a{
display: table;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
nav .menu a i{
display: block;
vertical-align: middle;
color: #333;
font-size: 23px;
transform: all 0.2s linear 0s;
padding: 44px 0 10px;
}
nav .menu a i:before{
width: 41px;
display: inline-block;
height: 41px;
line-height: 37px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
line-height 0.2s linear 0s;
}
nav .menu a .link-text{
right: 45px;
color: #333;
font-size: 14px;
text-transform: uppercase;
transition: all 0.2s linear 0s;
}
nav .menu ul li:hover{
background-color: #42d3e3;
}
nav .menu ul li:hover + li:last-child{
border-right-color: blue;
}
nav .menu ul li:hover .link-text{
opacity: 0;
}
nav .menu ul li:hover i{
color: #333;
font-size: 50px;
}
nav .menu ul li:hover i:before{
border-color: transparent;
border-radius: 500px;
line-height: 40px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
line-height 0.2s linear 0s;
}
You can try position:fixed:
nav{
position:fixed;
bottom:0;
left:0;
width:100%;
}
You can set nav .menu as position: absolute; bottom:0;
nav .menu{
text-align: center;
margin-bottom:0px;
width: 100%;
position: absolute;
bottom:0;
}
JsFiddle https://jsfiddle.net/viethien/gxw0dacb/3/
In addition to margin-bottom: 0, try adding bottom: 0. The margin-bottom only creates no margin at the bottom of the element, but that doesn't make the element at the bottom of the user interface. The bottom: 0 property and value will make 0 space from the bottom to the element. That might've been confusing, but the code for the navbar should look like so:
nav .menu{
text-align: center;
margin-bottom: 0px;
bottom: 0;
width: 100%;
}
You can read more about the bottom property here.
Related
I am trying to create a smooth animation of my nav-bar in CSS here's my HTML Code-
<body>
<nav class="navbar">
<ul class="nav-list another">
<li><n>Engine</n></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<li><button type="button" id="mysearch">More</button></li>
</ul>
</nav>
<hr>
</body>
</html>
Here's my CSS Code-
*{
margin: 0;
padding: 0;
}
html{
background-color: white;
background-image: url("img/ManHattanImage.webp");
}
li{
align-items: left;
width: 100px;
height: 100%;
display: inline-block;
margin-right: 170px;
font-size: 20px;
/* background-color: black; */
color: black;
font-size: 20px;
}
hr{
color: black;
margin-top: 30px;
}
n{
/* background-color: black; */
color: white;
font-size: 40px;
font-style: bold;
font-family: "Lucida Console", "Courier New", monospace;
margin-left: 20px;
margin-top: 30px;
}
a {
text-decoration: none;
color: white;
}
a:visited { text-decoration: none; }
a:hover {
text-decoration: none;
/* background-color: black; */
}
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
nav:hover{
height:300px;
}
I want a clean Animation like of a good dropdown menu navbar and with clear overlaps, Also I may add some more elements inside the navbar (With Further Updates)?
This is how to make a dropdown menu but I'm not sure how to do an animation. I hope this is what you meant by the dropdown menu.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #ac0d0d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: rgb(18, 19, 85);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ac0d0d;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown menu</button>
<div class="dropdown-content">
first
second
third
</div>
</div>
</body>
</html>
Animation Drop down menu on hover
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
</style>
<body>
<nav>
<ul>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</body>
</html>
i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.
what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hover-nav {
background-color: tomato;
}
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
Try this code, I marked my edits on your css code.
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/*Edit starts here*/
li {
position:relative;
}
li::after {
content: '';
display: block;
width: 0;
position:absolute;
left:50%;
height: 2px;
background: #0077ff;
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover::after {
width: 80%;
left: 10%;
}
li {
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover {
background-color: tomato;
}
/*Edit ends here*/
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
You should apply the transition to the element, not its hover state. With transition you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.
Then use the :hover selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.
Also avoid using inline styles when possible.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
text-decoration: underline;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
box-sizing: border-box;
height: 100px;
}
li a:hover {
background-color: tomato;
border-bottom: 1px solid white;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
Add text-decoration:underline to your li:hover code like this...
li a:hover {
text-decoration:underline;
}
HTML Code Invalid you added <a> section in <ul> without <li> tag
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
changes to
<ul>
<li><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></li>
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
Edit in CSS:
ul {
width:100%;
display: flex;
align-items: center;
}
li {
width:100%; // remove padding and add to `li a`.
}
li a{
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover { // instead of .hover-nav
background-color: tomato;
border-bottom:4px solid #fff;
}
// remove #logo margin
Working Demo
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
background-color: #333;
height: 100px;
display: flex;
align-items: center;
}
li {
width:100%;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 1.5px;
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
border-bottom:4px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></li>
<li class="hover-nav">კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
</body>
</html>
Title says it all, I cannot figure out how to have an element stay the same width while the text inside it grows, if anyone knows how to do this, that would be great!
p.s, I've tried to use box-sizing, and position: relative, and all that.
.menu{
width: 100%;
position: fixed;
background-color: #333;
}
.menu nav ul{
list-style: none;
list-style-type: none;
padding: 0;
margin: 0;
}
.menu nav ul li{
display: inline-block;
}
.menu nav ul li button{
margin-left: 20px;
background-color: #d63031;
font-size: 22px;
color: #fffff7;
border-style: none;
border-bottom: 4px solid rgba(0,0,0,.3) !important;
padding: 15px 22px;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
outline: none;
border-radius: 6px;
}
.menu nav ul li a{
display: block;
padding: 30px 20px;
font-size: 22px;
color: #fffff7;
line-height: 12px;
text-decoration: none;
text-transform: uppercase;
}
.menu nav ul li a:hover{
transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
background-color: rgb(0,0,0,.8);
font-size: 26px;
}
Just share my code, using transform to scale text instead of font-size on a:hover, hope it meets your requirements or gives you inspiration:
a {
display: block;
padding: 30px 20px;
font-size: 22px;
}
a:hover {
-webkit-transform: scale(1.18); /* 22px * 1.18 = 26px */
-moz-transform: scale(1.18); /* 22px * 1.18 = 26px */
transform: scale(1.18); /* 22px * 1.18 = 26px */
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
border: 1px solid #ccc;
}
li a {
padding: 30px 20px;
transition: all .3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>link</li>
<li>another link</li>
</ul>
</body>
</html>
I am a bit new when it comes to web development.
I have created a menu but its buttons width are different depending on the browser (Firefox or Chrome)
In Firefox, we can see that the end of the last button of the menu is aligned with the div below. We can also appreciate that the width of the button is 136.5px
However, in Chrome the fonts are bolder and the menu end is pushed a bit forward. Here, the width of the button is 139.281px
This is the site, the menu is on the top: http://www.metagame.gg/champions/
This is the HTML and the CSS code for the menu
.navigator {
margin: 0;
padding: 0;
display: flex;
padding-left: 39px;
background: #8C9BAA;
}
.navigator li {
display: inline-block;
position: relative;
z-index:100;
}
.navigator li a {
text-decoration: none;
font-size: 15px;
display: block;
line-height: 50px;
padding: 2px 27.75px 0px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.navigator li a:hover, .navigator li:hover > a {
color:#fff;
background: #7AAFD1;
}
.navigator ul {
display: none;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
}
.navigator ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navigator ul li a {
font-size:12px;
font-weight:bold;
display:block;
color:#797979;
border-left: 3px solid #ffffff;
background: #fff;
line-height: 42px;
transition: 0s;
}
.navigator ul li a:hover, .menu ul li:hover > a {
background:#EFEFEF;
border-left:3px solid #83BEE4;
color: #12303D;
}
.navigator li:hover > ul {
display: block;
}
.navigator ul ul {
left: 149px;
top: 0px;
}
#in {
color:#fff;
background: #7AAFD1;
}
.sub-menu {
border:1px solid #ddd;
border-top:0px;
border-left:0px;
box-shadow: 3px 5px 5px -5px #3B3B3B;
}
.navigatorSecond {
margin: 0;
padding: 0;
display: flex;
padding-left: 39px;
background: #d1d1d1 ;
}
.navigatorSecond li {
display: inline-block;
position: relative;
z-index:80;
}
.navigatorSecond li a {
font-weight:600;
text-decoration:none;
font-size: 13px;
display:block;
color:#4a4a4a;
line-height: 40px;
padding: 0px 35.3px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
#ini {
color:#fff;
background: #7AAFD1;
}
.navigatorSecond li a:hover, .navigatorSecond li:hover > a {
color:#fff;
background: #7AAFD1;
}
.navigatorSecond ul {
display: none;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
}
.navigatorSecond ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navigatorSecond ul li a {
font-size:13px;
font-weight:bold;
display:block;
color:#797979;
border-left: 3px solid #ffffff;
background: #fff;
line-height: 42px;
transition: 0s;
}
<div class="menuWrap">
<ul class="navigator">
<li>HOME</li>
<li>CHAMPIONS</li>
<li>SOLO QUEUE <img class="iconMenu" src="/icon/expandir.png" alt=""/>
<ul class="sub-menu">
<li>Tier List</li>
<li>Basics & Tactics</li>
<li>Psychology</li>
<li>Picks & Bans</li>
<li>Division analysis</li>
</ul>
</li>
<li>PRO SCENE <img class="iconMenu" src="/icon/expandir.png" alt=""/>
<ul class="sub-menu">
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li>IN-DEPTH ANALYSIS</li>
<li>STATISTICS</li>
</ul>
</div>
I think it is because the font is a bit bolder in Chrome and that causes the button width to be higher.
Thanks in advance
Update: This is because each browser has its own font rendering engine.
I replicated your results with your current sans-serif font. The case also occurred when I changed the font to monospace.
I believe you're better off using a non-system font. For instance, I wanted to see what would happen with a typical Google font such as Open Sans, and I found that the issue did not exist when using it.
By the way, good work on that website. It looks nice. TSM! TSM! TSM!
*{margin:0; padding:0;}
put this line in top of your css file. It helps me for different browser. Just let me know that it helps you or not.
.navigatorSecond li {
display: inline-block;
position: relative;
z-index:80;
}
instead of display inline-block use float left. that will not be different. or use .navigatorsecond{font-size=0;}
I am learning css and I have created a vertical menu, hovering the mouse over the first menu item shows the sub-menu across. But my problem is, as soon as I move the mouse to the sub-menu, it disappears. How can I make it so it stays there until I clicked one of the sub-menu items? Please help.
Already searched through a lot of examples but none similar to this. I'm new to css and I'm not sure if my approach is the correct for this menu setup requirement. Please enlighten.
#charset "utf-8";
.navLeft {
width: 25%;
margin-top: 0%;
top: auto;
display: inline;
list-style-type: none;
margin-left: 5%;
position: relative;
z-index: 0;
/* [disabled]clear: none; */
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ~ ul{
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>STORY</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="mainMid">
<nav class="navLeft">
<ul>
<li class="about">ABOUT</li>
<ul>
<li class="navBeginning">BEGINNING</li>
<li class="navMnv">Mission<br>
<br>
Vision</li>
<li class="navPeople">People</li>
</ul>
<li class="projects">PROJECTS</li>
<li class="getinvolved">GET<br>
INVOLVED</li>
<li class="records">RECORDS</li>
<li class="donate">DONATE</li>
</ul>
</nav>
</section>
</body>
</html>
Refer this fiddle : http://jsfiddle.net/zt8ffu11/
html:
<section class="mainMid">
<nav class="navLeft">
<ul>
<li class="about">ABOUT
<ul>
<li class="navBeginning">BEGINNING</li>
<li class="navMnv">Mission<br>
<br>
Vision</li>
<li class="navPeople">People</li>
</ul>
</li>
<li class="projects">PROJECTS</li>
<li class="getinvolved">GET<br>
INVOLVED</li>
<li class="records">RECORDS</li>
<li class="donate">DONATE</li>
</ul>
</nav>
</section>
css:
.navLeft {
width: 25%;
margin-top: 0%;
top: auto;
display: inline;
list-style-type: none;
margin-left: 5%;
position: relative;
z-index: 0;
/* [disabled]clear: none; */
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ul{
display: block;
}
and for list structure check is question Proper way to make HTML nested list?