I want to use this style
Site > Then choose the Zerus theme.
The CSS for Zerus is as follows:
#charset "utf-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* Fonts */
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, #content a, ul.lw-hmenu a, .lw-hmenu li span.nav-header, #lw-topnav ul a, #lw-topnav ul li span.nav-header {
font-weight: 600;
}
#content a::after {
content: "→";
padding-left: 5px;
}
#content div.pagination ul li a::after {
content: "";
padding-left: 0;
}
/* End Fonts */
/* Colors */
:root{
--primary: #24b47e;
--accent: #6772e5;
--accent2: #b76ac4;
--ux: rgba(255, 255, 255, 0.95);
--ux-border: #6b7c93;
}
.lw_svg_logo {
fill: var(--primary);
}
#masterPage {
background-color:#F6F9FC;
}
#contentPage {
background-color: #F6F9FC;
}
body {
color:#6b7c93;
}
a, span.nav-header {
color: var(--accent);
}
/* End Colors */
#media screen and (min-width: 768px) {
#lw-topnav {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
border-bottom: 9px solid var(--ux-border);
}
#lw-topnav ul>li:hover {
background-color: rgba(0, 0, 0, 0.05);
}
#lw-topnav ul li ul {
border-radius: 15px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
margin-top:15px !important;
}
#lw-topnav ul li ul::before {
display:block;
content: "";
width:20px;
height:20px;
background-color: var(--ux);
position:relative;
left:50%;
margin-top:5px;
transform: translateX(-50%) rotateZ(45deg);
z-index:1;
top:-15px;
}
#lw-topnav ul li ul::after {
display:block;
content: "";
height:9px;
background-color: var(--ux-border);
z-index:1;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
#lw-topnav ul li ul li ul {
border-radius: 8px;
margin-top: 0px !important;
}
#lw-topnav ul li ul li ul::before {
display:none;
}
#lw-topnav ul>li:hover:after{
content:"";
position:absolute;
left:0;
right:0;
top:0px;
height:120%;
z-index:-1;
}
}
I would like to lower the menu that appears when you hover over the top navigation by about 15px. If I do however, then I can't actually get to the sub-menu because the mouse leaves the <li> that contains the hover effect to make it visible, so the menu disappears.
You can see the effect I want by adding this:
#lw-topnav ul li ul {
margin-top:15px !important;
}
I think this can be achieved by using a transition-delay, but no matter where I put it, it doesn't seem to have any effect. I'd like to avoid using javascript if I have to. Can anyone help on where to add the transition-delay?
Thanks
The problem you have is, that your mouse leaves the <li> of the top list, so the hover-event is not working anymore. You have to seperate the display of the sublist and the area where the list item is considered as "hovered".
These are two things, while you see the list itself, you cannot see the area where the program accepts the item as "hovered".
I created a little example by copying and modifying code from SelfHTML where I point out the problem you face.
If you modify the values I highlighted you see the difference.
<html>
<head>
<style>
nav {
border: 1px solid black;
height: 2em;
padding: 0.8em;
width: 50em;
}
nav ul {
margin: 0;
padding: 0;
text-align: center;
}
nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
/* important here */
nav ul ul {
font: 0/0 serif;
margin-top: 40px; /*this changes the display of the sublist*/
padding: 0;
position: absolute;
top: 0em;
/*change this to shift the space where your cursor stays with the sublist*/
z-index: -1;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
nav ul li:hover ul {
font: inherit;
z-index: auto;
color: red;
}
nav ul ul li {
float: none;
margin-bottom: 0.2em;
}
nav a,
nav span {
background-color: royalblue;
border: 1px solid blue;
border-radius: 10px 10px 0 0;
box-shadow: 0px 5px 10px white inset;
color: gold;
display: block;
font-weight: bold;
margin: 0.6em 0 0 0;
padding: 0.4em;
width: 6.4em;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
nav ul ul a,
nav ul ul span {
border-radius: 10px;
}
nav a:focus,
nav a:hover,
nav span
{
color: royalblue;
background-color: gold;
}
nav a:focus,
nav a:hover {
margin-top: 0;
padding: 1em 0.4em 0.4em;
}
nav ul ul a:hover {
margin: 0.6em 0 0 0;
padding: 0.4em;
}
nav ul ul span {
background-color: maroon;
color: gold;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Seite 1</li>
<li>Seite 2
<ul>
<li>Seite 2a</li>
<li>Seite 2b</li>
</ul>
</li>
<li>Seite 3</li>
<li>Seite 4
<ul>
<li>Seite 4a</li>
<li><span>aktuelle Seite</span></li>
<li>Seite 4c</li>
</ul>
</li>
<li>Seite 5</li>
</ul>
</nav>
</body>
</html>
Make sure that your mouse is always hovering the selected list item by modifying the top:0em to 0 or even below 0. To balance the fact that your menu will move upward, simply adjust the margin-top in the same frame! This all has to happen in the sublist itself nav ul ul and of course with another level of depth if you create a list like that! :)
I fixed it by adding an invisible div behind it.
#lw-topnav ul>li:hover:after{
content:"";
position:absolute;
left:0;
right:0;
top:0px;
height:120%;
z-index:-1;
}
That being said. I think S.M.'s solution is better. I'll play around with it more.
Related
Navigation bar presently drops down, 1st sub menu expands left, 2nd sub menu expands right so that it's on top of the primary menu. Trying to get the 2nd sub menu to continue expanding left, but any tweaks I make don't change it. Tried to get the ul last child to pull right without success, would appreciate any help. Here's the code I've currently got.
HTML:
<li {{#id}}id="{{id}}"{{/id}}
class="wsite-menu-subitem-wrap {{#is_current}}wsite-nav-current{{/is_current}}"
>
<a
{{^nonclickable}}
{{^nav_menu}}
href="{{url}}"
{{/nav_menu}}
{{/nonclickable}}
{{#target}}
target="{{target}}"
{{/target}}
class="wsite-menu-subitem"
>
<span class="wsite-menu-title">
{{{title_html}}}
</span>{{#has_children}}<span class="wsite-menu-arrow">></span>{{/has_children}}
</a>
{{#has_children}}{{> navigation/flyout/list}}{{/has_children}}
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
{{#children}}{{> navigation/flyout/item}}{{/children}}
</ul>
</div>
CSS:
/* Navigation Menu*/
#nav {position: relative;}
#nav ul {
text-align: right;
overflow: hidden;
}
#nav ul li {
list-style: none;
display: inline-block;
}
#nav ul li a {
display: block;
color: #8e8e8e;
padding: 30px 15px;
font-size: 14px;
text-transform: uppercase;
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-o-transition: all 240ms linear;
-ms-transition: all 240ms linear;
transition: all 240ms linear;
}
.minimize #nav ul li a {
padding: 15px;
}
#nav > ul li:first-child a {
padding-left: 30px !important;
}
#nav > ul li:last-child a {
padding-right: 0 !important;
}
#nav ul li#active a,
#nav ul li a:hover {
color: #primary;
text-decoration:none;
border: 0;
}
#mobile-nav, #mobile-input, #nav-trigger, #mobile-cart {
display: none;
}
/* Navigation Submenu*/
#wsite-menus {
position: relative;
z-index: 14;
}
#wsite-menus .wsite-menu {
padding: 10px 0;
background: #headerBg;
-webkit-box-shadow: 0px 0px 3px rgba(99, 99, 99, .1);
box-shadow: 0px 0px 3px rgba(99, 99, 99, .1);
}
#wsite-menus > .wsite-menu-wrap > .wsite-menu .wsite-menu-wrap {
position: absolute !important;
top: 0 !important;
margin-top: -10px !important;
}
#wsite-menus .wsite-menu li a {
font-family: 'Roboto', sans-serif;
color: #8e8e8e;
background: transparent !important;
font-size:13px;
text-transform: uppercase;
border: 0;
padding: 10px 20px;
}
#wsite-menus .wsite-menu li a > span {
padding: 0;
}
#wsite-menus .wsite-menu li a:hover {
color: #primary;
}
#wsite-menus .wsite-menu-arrow {
right: 20px;
width: 10px;
overflow: hidden;
}
#wsite-menus .wsite-menu-arrow:before {
display: inline-block;
content: '\25b6';
font-size: 75%;
vertical-align: top;
line-height: 1.5;
}
Try setting the menu's container element to display: flex; and flex-direction: column;. This way child elements will never be one next to the other.
Edit:
Forget the flex.
I'll suppose you need to put your nav to the right (that's why you want submenus to the left), and you need submenus to display one at a time.
Assuming that, I've made an example so you can see it working.
Note: Just check the commented style, other things are just visuals to match your context and to be easy to scan.
* {
margin: 0;
padding: 0;
}
#root {
display: flex;
}
nav {
margin-left: auto;
margin-right: 100px;
background-color: rgb(30, 30, 30);
color: white;
width: 160px;
}
li {
list-style: none;
padding: 4px;
}
li:hover {
background-color: rgb(90, 90, 90);
}
a {
cursor: pointer;
}
/* dropdown box */
.dropdown {
position: relative;
}
/* dropdown button, it's just a span,
you can use whatever you want */
.dropdown .dropdown_btn {}
/* dropdown content default */
.dropdown .dropdown-content {
display: none;
position: absolute;
z-index: 1;
top: 0;
/* "left -100%" gives same result as "right: 100%"*/
left: -100%;
/* keep size to mach the "left -100%" */
min-width: 100%;
background-color: rgb(60, 60, 60);
}
/* while mouse hover, content will display */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="root">
<nav>
<ul>
<li><a>Item 1</a></li>
<li class="dropdown">
<span class="dropdown-btn">Item 2 / Drop A</span>
<ul class="dropdown-content">
<li><a>Drop A Item 1</a></li>
<li><a>Drop A Item 2</a></li>
</ul>
</li>
<li class="dropdown">
<span class="dropdown-btn">Item 3 / Drop B</span>
<ul class="dropdown-content">
<li><a>Drop B Item 1</a></li>
<li><a>Drop B Item 2</a></li>
</ul>
</li>
<li><a>Item 4</a></li>
</ul>
</nav>
</div>
I want to add a delay on mouse out from hover menu. Here is my codepen: http://codepen.io/anon/pen/MYjzVb
Please notice that I have used these lines for CSS transitions:
-webkit-transition: visibility 0.65s ease-in;
-moz-transition: visibility 0.65s ease-in;
But this doesn't works. I am using Chrome browser, tried to view it in Firefox too but that doesn't helps.
Please help!
1- WITHOUT ANIMATION:
/**RESETING BROWSER STYLE*/
*{box-sizing: border-box; padding: 0; margin: 0}
/**SETTING THE ROOT ELEMENT BACKGROUND*/
:root{background: #ccc}
/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/
[id=panel] li{
list-style-type: none
}
/**INIT OUR DROP MENU*/
.drop_menu {
background: #10BDF5;
height: 25px
}
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/
.drop_menu ul {
position: absolute;
left: 0;
top: 28px;
height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/
overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/
background:#51C7ED;
border-bottom: 5px solid transparent;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/
transition:opacity 0 5s linear, height 0 5s linear,border-bottom 0 5s linear/**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/
}
.drop_menu li:hover ul {
transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/
opacity: 1;
border-bottom: 5px solid #1292BB;
height: 76px /**SET THE HEIGHT ON MOUVE IN*/
}
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */
.drop_menu li { float:left; position: relative}
.drop_menu li a {
padding:3px 6px;
display:block;
color:#FFF;
text-decoration:none;
font-size: 11px;
line-height: 22px;
}
.drop_menu li:hover { position:relative; background:#51C7ED; }
.drop_menu ul a {
padding:1px 4px;
display:block;
width:150px;
font-size: 11px;
text-indent:11px;
background-color:#10BDF5;
}
.drop_menu li:hover ul li a {
padding:1px 4px;
display:block;
width:150px;
font-size: 11px;
text-indent:11px;
background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED }
#panel {
background: #10BDF5;
color: #FFF;
font-size: 11px;
text-align: left;
border: 1px solid #30B3DE;
padding: 3px 4px
}
<div id="panel">
<ul class="drop_menu">
<li>Upgrade Account</li>
<li>Link One
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li>Link Two</li>
</ul>
</div>
2- WITH ANIMATION
/**RESETING BROWSER STYLE*/
*{box-sizing: border-box; padding: 0; margin: 0}
/**SETTING THE ROOT ELEMENT BACKGROUND*/
:root{background: #ccc}
/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/
[id=panel] li{
list-style-type: none
}
/**INIT OUR DROP MENU*/
.drop_menu {
background: #10BDF5;
height: 25px
}
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/
.drop_menu ul {
position: absolute;
left: 0;
top: 28px;
height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/
overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/
background:#51C7ED;
border-bottom: 5px solid transparent;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/
transition:opacity 0.65s ease-out, height 0 0.68s linear /**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/
}
.drop_menu li:hover ul {
transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/
opacity: 1;
border-bottom: 5px solid #1292BB;
height: 76px /**SET THE HEIGHT ON MOUVE IN*/
}
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */
.drop_menu li { float:left; position: relative}
.drop_menu li a {
padding:3px 6px;
display:block;
color:#FFF;
text-decoration:none;
font-size: 11px;
line-height: 22px;
}
.drop_menu li:hover { position:relative; background:#51C7ED; }
.drop_menu ul a {
padding:1px 4px;
display:block;
width:150px;
font-size: 11px;
text-indent:11px;
background-color:#10BDF5;
}
.drop_menu li:hover ul li a {
padding:1px 4px;
display:block;
width:150px;
font-size: 11px;
text-indent:11px;
background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED }
#panel {
background: #10BDF5;
color: #FFF;
font-size: 11px;
text-align: left;
border: 1px solid #30B3DE;
padding: 3px 4px
}
<div id="panel">
<ul class="drop_menu">
<li>Upgrade Account</li>
<li>Link One
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li>Link Two</li>
</ul>
</div>
You could use JavaScript for handling mouseenter and mouseleave events and use setTimeout() for the delay(5s) on mouseleave event.
You could set the delay through the variable delay.
Updated CodePen
var items = document.querySelectorAll('.drop_menu > li');
var delay = 5000;
for (i = 0; i < items.length; i++) {
items[i].addEventListener('mouseenter', function() {
var c = this.children
for (j = 0; j < c.length; j++) {
if (c[j].localName == 'ul') {
c[j].style.display = 'block';
c[j].style.position = 'absolute';
}
}
});
items[i].addEventListener('mouseleave', function() {
mouseLeave(this, j);
});
}
function mouseLeave(el, j) {
setTimeout(function() {
var c = el.children;
for (j = 0; j < c.length; j++) {
if (c[j].localName == 'ul') {
c[j].style.display = 'none';
}
}
}, delay)
}
.drop_menu {
background: #10BDF5;
padding: 0;
margin: 0;
list-style-type: none;
height: 25px;
}
.drop_menu li {
display: inline-block;
}
.drop_menu li a {
padding: 3px 6px;
display: block;
color: #FFF;
text-decoration: none;
font-size: 11px;
line-height: 22px;
}
/* Submenu */
.drop_menu ul {
position: absolute;
display: none;
list-style-type: none;
}
.drop_menu > li {
position: relative;
}
.drop_menu li:hover {
background: #51C7ED;
}
.drop_menu li ul {
left: 0px;
top: 28px;
background: #51C7ED;
padding: 0px;
border-bottom: 5px solid #1292BB;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.drop_menu li ul li a {
padding: 1px 4px;
display: block;
width: 150px;
font-size: 11px;
text-indent: 11px;
background-color: #10BDF5;
}
.drop_menu li:hover ul li a:hover {
background: #51C7ED;
}
#panel {
background: #10BDF5;
color: #FFF;
font-size: 11px;
text-align: left;
border: 1px solid #30B3DE;
padding: 3px 4px;
}
<div id="panel">
<ul class="drop_menu">
<li>Upgrade Account
</li>
<li>Link One
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</li>
<li>Link Two
</li>
</ul>
</div>
I'm trying to keep the parent nav background active when on child page.
Example: Portfolio---->Programs
When my current page is Programs, I'd like to keep the Portfolio active on the navigation bar.
The code use in the CSS is:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
max-height: 200px;
}
#nav .container ul {
list-style: none !important;
}
#nav .container ul li {
list-style: none !important;
}
#nav .container ul span:last-child li,
#nav .container ul > li:last-child {
/*background: none;*/
background:url(surf_40.gif) no-repeat -12px;
}
#nav ul li a {
display: block;
font-size:30px;
line-height: 35px;
padding: 10px 0;
color: rgba(255,255,255,0.4);
padding: 2px 25px 2px 21px;
border: 0;
outline: 0;
list-style-type: none;
position:relative;
right:-4px;
z-index:1;
text-transform: uppercase;
font-family: 'Aller', sans-serif;
}
#nav ul li#active a {
background: url(surf_40.gif) no-repeat -12px;
}
#nav ul li#active a,
#nav ul li a:hover {
color: #fff;
border: 0;
}
/**Text modified added - for active parent while my current page is a sub-menu***/
#wsite-menus .wsite-menu li #active a #nav ul li a {
color: #fff;
border: 0;
}
/*---*/
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
color: rgba(0,0,0,0.4);
font-weight: bold;
background: #fff;
/*border: 0 px;*/
border: solid thick;
border-radius: 1em;
/* fine modifica*/
position:relative;
right: 0 px;
}
#wsite-menus .wsite-menu li a:hover {
color: #000;
background: #e3e3e3;
border: solid thick orange;
}
thank you for any help..
HTML code:
<div id="nav">
<ul class='wsite-menu-default'>
<li id='pg962547086691527768'><a href="/" data-membership-required="0" >Home</a></li>
<li id='pg623326219140352077'><a href="/about.html" data-membership-required="0">About</a</li>
</ul></div>
Put the :hover on li's instead of a:hover and alos add class active to li. if you provide html two then i will provide you the perfect solution thanks
I'm using ordered lists to create a menu, and I have run into two issues, the drop down does not align and the hover effect is applied to the drop downs and I don't want that to happen
Here is a JS Fiddle:
http://jsfiddle.net/HFMR5/
this is my HTML code:
<div id="menu">
<ul id="navigation">
<li>Home</li>
<li>Services
<ul>
<li>Residential</li>
<li>Buisiness</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
and this is the CSS for the menu:
/*Navigation CSS*/
#navigation
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
box-shadow: 0 8px 6px -6px black;
}
#navigation li
{
float: left;
}
#navigation li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FF6987;
border-right: 1px solid #ccc;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
#navigation ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#navigation li:hover ul {
display: block;
position: absolute;
}
#navigation li:hover li {
float: none;
font-size: 11px;
}
#navigation li:hover a { background: #f2f2f2; }
#navigation li a:hover
{
color: #FF6987;
background-color: #f2f2f2;
box-shadow: inset 0 8px 6px -6px black;
}
In order for the widths to be the same you need to actually set the width of the sub-menu (Not necessarily static) but if you let it be then it will just expand to the size of the contnent which obviously isn't desired, the CSS changes look like:
#navigation li{
float: left;
position:relative;
}
#navigation li:hover ul {
display: block;
position: absolute;
width: 100%;
}
The position: relative has the sub-menu know to use that element when determining what 100% width is instead of the body tag.
As for the hover effect showing up on sub-menu items all that you need to do is be more specific in your selector. The space you are using signifies that you will select and descendant of #navigation that is a li element. That includes the submenus. If you use a selector like the > which signifies a direct child then you will be able to bre more specific in targeting only top level menu items. CSS looks something like:
#navigation > li > a:hover{
color: #FF6987;
background-color: #f2f2f2;
box-shadow: inset 0 8px 6px -6px black;
}
A good reference for CSS selectors: http://www.w3schools.com/cssref/css_selectors.asp
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO