I am new to CSS, building this calendar i made this, i need this calendar to fit into a JSP page.
This spans the whole page. can anyone suggest how to make resizable
Also when i have to make boxes empty to move the 1st of the month to
the day of the week as the boxes move up and down. What can be done
to fix that
Is there a better way to do this, need this a in this way with tool
tip. Thanks for looking.
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
height: 75px;
text-align: center;
margin-bottom: 20px;
font-size: 17px;
border: 3px solid #73AD21;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width:720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
#media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
#media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head/>
<body>
<h1>CSS Calendar</h1>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
August<br>
<span style="font-size:18px">2016</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li> </li>
<li>1<br><br>$1.25
</li>
<li>2<br><br>$1.25
</li>
<li>3<br><br>$1.25
</li>
<li>4<br><br>$1.25
</li>
<li>5<br><br>$1.25
</li>
<li>6<br><br>$1.25
</li>
<li>7<br><br>$1.25
</li>
<li>8<br><br>$1.25
</li>
<li>9<br><br>$1.25
</li>
<li>10<br><br>$1.25
</li>
<li>11<br><br>$1.25
</li>
<li>12<br><br>$1.25
</li>
<li>13<br><br>$1.25
</li>
<li>14<br><br>$1.25
</li>
<li>15<br><br>$1.25
</li>
<li>16<br><br>$1.25
</li>
<li>17<br><br>$1.25
</li>
<li>18<br><br>$1.25
</li>
<li>19<br><br>$1.25
</li>
<li>20<br><br>$1.25
</li>
<li>21<br><br>$1.25
</li>
<li>22<br><br>$1.25
</li>
<li>23<br><br>$1.25
</li>
<li>24<br><br>$1.25
</li>
<li>
<div class="tooltip">25<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">26<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">27<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">28<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">29<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">30<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">31<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
</ul>
</body>
</html>
I am not sure if this is what your are looking for.
Used vertical-align: bottom to fix the box alignment.
Horizontally centered the calendar in the page using margin: 0 auto.
https://jsfiddle.net/yxhgq1tz/3/
.wrapper {
width: 500px;
margin: 0 auto;
}
To center it vertically. there are couple of options.
Using css3 flexbox.
Using vertical-align: middle along with display: table
Related
I am trying to code a menu with a mega menu option.
The top level links have an underline animation.
If the top level nav has a mega class, the mega menu container shows, but the underline animation does not.
If I lower the mega menu container, the animation does show, but as soon as the mouse moves off the top link into the container, the container hides as there is a gap because the un-hover switches it off.
Also, moving right from the top level from Option1 to Option 2, nav hides the mega container and the animation shows(correct), but moving right to the Sign In link does not hide the mega container or do the animation.
body #mainMenu {
background-color: #fff;
height: 80px;
position: absolute;
top: 0px;
left: 0;
width: 100%;
padding: 10px;
align-items: center;
display: flex;
padding-left: 40px;
padding-right: 40px;
}
#menuOptions {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
position: relative;
width: 100%;
padding: 0;
list-style-type: none;
font-size: 12px;
font-weight: 400;
}
#menuOptions li {
display: flex;
}
#menuOptions li a {
color: #000;
}
#menuOptions li a:link {
text-decoration: none;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: red;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.mega-container {
display: none;
position: absolute;
top: 0px;
left: 0;
height: 120px;
width: 100%;
}
.mega:hover .mega-container {
display: block;
padding-top: 30px;
}
.mega-menu {
background-color: yellow;
height: 100px;
padding: 60px;
}
<html>
<head>
<title>Mega Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id='mainMenu'>
<ul id='menuOptions'>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Sign In</a></li>
<li class='mega'><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 1</a>
<div class='mega-container'>
<div class='mega-menu'>
<p>This is mega menu 1</p>
</div>
</div>
</li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 2</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 3</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 4</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 5</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 6</a></li>
</ul>
</nav>
</body>
</html>
try below code for animation with mega menu using css only.
set column in menu using float and width property of css or you can use table also.
you can use font.awesome style or html entity for icon of submenu.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: skyblue;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h4>Mega Menu</h4>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>
I have menu that open inline block links
this menu work fine in all browser except IE11
in chrome appear like this
in IE11 appear link this
this snippet
.rlist--inline {
list-style: none;
padding: 0;
margin: 0;
}
.rlist--inline li{
display:inline-block;
padding:10px;
border:1px solid black;
}
.dropdown__menu li{
padding:5px;
}
.dropdown__menu a {
white-space: nowrap;
padding: 12px 20px 8px;
}
* {
box-sizing: border-box;
}
.dropdown:hover>.dropdown__menu {
display: flex;
background: #ed1c24;
left:-100%;
}
.dropdown {
display:inline-block;
position: relative;
background:red;
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
<ul class="rlist--inline">
<li class="menu-item"><a><span>Topics</span></a></li>
<li class="dropdown menu-parent" >
<a title="Journal" class="dropdown__toggle">
<span>Journal</span>
</a>
<ul class="rlist dropdown__menu">
<li>
<a title="Current Issue"">
<span>Current Issue</span>
</a>
</li>
<li>
<a>
<span>Archive</span>
</a>
</li>
<li>
<a >
<span>Article Series</span>
</a>
</li>
</ul>
</li>
</ul>
how I can fix it in IE11?
I tried to make clearfix & make right:-100% , but still there is problem.
any help ............................................................
First, there is issue in your HTML with double quote here
<a title="Current Issue"">
Second, it looks like when you display flex in a row in IE it does not compute new width and instead keeps the same width from when flex box was a column. I am not exactly sure what you want to accomplish but if you are trying to make submenues red you can apply red color and shadow directly to your list items like so:
.rlist--inline {
list-style: none;
padding: 0;
margin: 0;
}
.rlist--inline li {
display: inline-block;
padding: 10px;
border: 1px solid black;
}
.dropdown__menu li {
padding: 5px;
}
.dropdown__menu a {
white-space: nowrap;
padding: 12px 20px 8px;
}
* {
box-sizing: border-box;
}
.dropdown:hover>.dropdown__menu {
display: flex;
/* background: #ed1c24; */
left: -100%;
}
.dropdown {
display: inline-block;
position: relative;
background: red;
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
}
ul.rlist > li {
background: #ed1c24;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
<ul class="rlist--inline">
<li class="menu-item"><a><span>Topics</span></a></li>
<li class="dropdown menu-parent">
<a title="Journal" class="dropdown__toggle">
<span>Journal</span>
</a>
<ul class="rlist dropdown__menu">
<li>
<a title="Current Issue">
<span>Current Issue</span>
</a>
</li>
<li>
<a>
<span>Archive</span>
</a>
</li>
<li>
<a>
<span>Article Series</span>
</a>
</li>
</ul>
</li>
</ul>
I am wanting to align a vertical sub-submenu that is horizontal to a submenu, like this:
I am able to achieve this, as the picture shows, but I have to make the position absolute. The problem with that is I would want the top part of each sub-submenu to line up with the top of the submenu it is attached too. For instance, the artist sub-submenu would be exactly the same as the one shown, but would have A to Z lined up with Artist.
In order to do that the way I am doing it now, I would have to create many different css sections, rather than being able to select multiple submenus with one section (for instance #sortsongmenu, #sortartistmenu { styling }. I would like to find a way to have the sub-submenus in the position shown without having to position each sub-submenu separately, but rather have a styling approach that could apply to all sub-submenus that have relative or some other positioning.
HTML code:
<-- CSS code-->
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
#sortsongmenu li, #sortartistmenu li{
display: inline;
}
#sortsongmenu li a:hover, #sortartistmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home
</li>
<li>
Search
</li>
<li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Artist</a>
<ul id="sortartistmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Album</a>
</li>
<li>
<a href='#'>Genre</a>
</li>
<li>
<a href='#'>BPM</a>
</li>
<li>
<a href='#'>Release Date</a>
</li>
</ul>
</li>
<li>
Add Song
</li>
<li>
Contant Us
</li>
</ul>
</div>
</div>
Try:
Change
#sortmenu li {
display: block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
to
#sortmenu > li {
display: block;
position: relative;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
top: 0;
width: 100px;
}
EDITED:
Change top to -5px, as your sub submenu have a border top of 5px. It will look better that way.
When I hovering over the menu the color changes properly but the link will activate only when i hovering over the text i want it to be activate at the time when i just touch the block or when it changes its color.Please help me any help would be appreciated
a {
text-decoration: none;
color: #fff;
}
#navbar {
background: #204d86;
border-radius: 5px;
}
#navbar>ul {
list-style: none;
margin: 0;
padding: 0;
height: 40;
margin-left: 300px;
}
#navbar>ul>li {
float: left;
padding: 10px 35px;
border-radius: 5px;
}
#navbar>ul>li:hover {
background: #5cadff;
border-radius: 5px;
}
#navbar>ul>li>ul {
display: none;
padding: 0;
position: absolute;
background: #204d86;
border-radius: 5px;
}
#navbar>ul>li>ul>li {
padding: 0 20px;
line-height: 40px;
display: block;
background: #5cadff;
}
#navbar>ul>li:hover>ul {
display: block;
}
#navbar>ul>li>ul>li>ul {
display: none;
padding: 0 30px;
position: absolute;
}
#navbar li:hover > a {
color: #000;
}
#navbar>ul>li>ul>li:hover {
background: #204d86;
}
#navbar:after {
content: "";
clear: both;
display: table;
}
<div id="navbar">
<ul>
<li><a class="active" href="../index/myindex.html">HOME</a>
</li>
<li>STAYING HEALTHY
<ul>
<li>Diet & Weight loss
</li>
<li>Exercises
</li>
<li>Physical Activity
</li>
<li>Healthy Eating
</li>
</ul>
</li>
<li>DISEASES
<ul>
<li>Stock
</li>
<li>Osteoporosis
</li>
<li>Diabetes
</li>
<li>Heart Disease
</li>
</ul>
</li>
<li>MIND&MOOD
<ul>
<li>Depression
</li>
<li>Anxiety
</li>
<li>Addiction
</li>
<li>Stress
</li>
</ul>
</li>
</ul>
</div>
a {
text-decoration:none;
color:#fff;
display: block;
}
THEN, move any padding you had on the li to the links themselves. Adjust as required.
body {
background: #000;
}
a {
text-decoration: none;
color: #fff;
display: block;
}
#navbar {
background: #204d86;
border-radius: 5px;
}
#navbar>ul {
list-style: none;
margin: 0;
padding: 0;
height: 40px;
}
#navbar>ul>li {
float: left;
border-radius: 5px;
}
#navbar>ul>li>a {
padding: 10px 35px;
}
#navbar>ul>li:hover {
background: #5cadff;
border-radius: 5px;
}
#navbar>ul>li>ul {
display: none;
padding: 0;
position: absolute;
background: #204d86;
border-radius: 5px;
}
#navbar>ul>li>ul>li {
line-height: 40px;
display: block;
background: #5cadff;
}
#navbar>ul>li>ul>li>a {
padding: 0 20px;
}
#navbar>ul>li:hover>ul {
display: block;
}
#navbar>ul>li>ul>li>ul {
display: none;
padding: 0 30px;
position: absolute;
}
#navbar li:hover > a {
color: #000;
}
#navbar>ul>li>ul>li:hover {
background: #204d86;
}
<div id="navbar">
<ul>
<li><a class="active" href="../index/myindex.html">HOME</a>
</li>
<li>STAYING HEALTHY
<ul>
<li>Diet & Weight loss
</li>
<li>Exercises
</li>
<li>Physical Activity
</li>
<li>Healthy Eating
</li>
</ul>
</li>
<li>DISEASES
<ul>
<li>Stock
</li>
<li>Osteoporosis
</li>
<li>Diabetes
</li>
<li>Heart Disease
</li>
</ul>
</li>
</ul>
</div>
You should also validate the CSS as I spotted a couple of errors.
You have to set this in your a-tag style:
display: block
width: 100%
height: 100%
and the padding of li should be 0 px,
have a look here.