How To Make A Decent Drop Down Menu? - javascript

I am trying to add a dropdown navigation on my navigation links so far it has been great but the only issue now which I can't work out the contact is not staying next to the Community instead it's going down one line how can i force it to stay inline with everything else?
and the drop is floating to the left for some reason so how can I bring that under the dropdown (I plan to add multiple drop downs)
<style>
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
float:right;
z-index:1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
</style>
<style type="text/css">
ul {
list-style: none;padding: 0px;margin: 0px;
}
ul li {
display: block;position: relative;float: left;border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block; position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>
<body>
<div id="navigation">
Home
About
Social
Community
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</div>
</body>
I added everything on one page so you can easily look at it and help with the problem
Thanks ;)

Add display: inline-block to your <li>.
JSfiddle Example

Well, if you are sure about width of navigation then dont go with "width:100%; " try to give width exactly where it supposed to be fit. Ex. Width: 900px;

You should put the all navigation links inside li tags,
<body>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Social
</li>
<li>Community
</li>
<li>Contact
<ul>
<li>General Inquiries
</li>
<li>Ask me a Question
</li>
</ul>
</li>
</ul>
</div>
</body>
JSFiddle Example

Related

class text-content set into class slider but it is pushed down?

I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.
I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.
For the #slider div, use display:inline-block:
#slider{display:inline-block}

Navigation Bar has extra space on the right side

I am currently creating my first website and I created a navigation bar. But I have noticed that there is some extra space on the right side of the bar. So when I highlight over the last thing on my bar there is a little bit of space that does not change colors (when I hover over things on the tab it changes the background color). So I was wondering if anyone has a solution to this problem?
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
Give flexbox a try.
display: flex on the ul, and flex: 1 on the li:
To align the dropdown menu with the button, relative position the button, 100% width on the dropdown div, and remove overflow hidden from the ul
Also, you don't need to add left and right padding to the a elements because you display them as block.
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
/*overflow: hidden;*/
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
display: flex;
}
ul.tab li {
flex: 1;
/*float: left;*/
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 0;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
You've set the width of your nav bar to 742px. The combined width of all your items (your li's) doesn't add up enough to fill the whole bar.
Try:
ul.tab li {
float: left;
padding: 0px;
width: 25%;
}
4 items at 25% total 100% of the container.
The width of the nav bar is greater than the width of then nav items. Unless you declare a hard width on the items that adds up to the same as the width of the nav bar, you shouldn't use a fixed width.
What I would do is change ul.tab to be display:inline-block; so that it will only take up as much space as needed and will shrink to match the size of it's direct descendents, and add text-align: center; to that element's parent (body in this case) to center the element.
Here's a demo - http://codepen.io/anon/pen/JEdywM
Your li elements all have dynamic widths which are rendered as float values for the pixels and eventually rounded to full pixels. That's where that margin comes from. To prevent that:
In the CSS rule for ul.tab remove the width setting alltogether and add display: inline-block;.
PLUS: Wrap the ul in a container div which has text-align: center:
(view the snippet in full page mode to see the result)
.listcontainer {
text-align: center;
}
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
display: inline-block;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<div class="listcontainer">
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</div>
</body>
</html>
Try this, it may help.
*body {
overflow-x :hidden;
}

Show drop down menu under link

I try to show a dropdown menu after the user hovers over the link with id galerie. I solved it like this:
$("#gallerie").mouseover
(
function()
{
$("#gallerie_drop").css("display","block");
}
);
$("#gallerie_drop").mouseleave
(
function()
{
$("#gallerie_drop").css("display","none");
}
);
#header {
text-align: right;
padding:20px;
}
#header a {
padding: 20px;
}
#gallerie_drop {
display:none;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
Galerie
Videos
Photos
Foo
Bar
</div>
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
But how can i let the box appear directly under the link?
JSFIDDLE: https://jsfiddle.net/c544es76/2/
If you are creating Menu, please use UL, LI.
Here is demo, with hoverable item. All without JS:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Need changes.
You HTML Should be like this,
<div class="yourclass">
Galerie
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
</div>
And CSS,
.yourclass{
position: relative;
}
#gallerie_drop{
position: absolute;
top: 10px;
left: 10px;
}
And the script is correct to show/hide the element.
Add position:relative to .gallery_drop
#gallerie_drop {
display:none;
position:relative;
}
and change your mouseover callback to
$("#galerie").mouseover
(
function()
{
$(this).append($('#gallery_drop'));
$("#gallerie_drop").css("display","block");
}
);
This will append the div to your hover link. You have size it appropriately.
Use Like This
Javascript is not needed
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
float:right;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
Galerie
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<li><a class="active" href="#Videos">Videos</a></li>
<li> <a href="#photos" >Photos</a></li>
<li> <a href="#Foo" > Foo</a></li>
<li> <a href="#Bar" > Bar </a></li>
</li>
</ul>
</body>
</html>

Why is my scroll bar doing the opposite of what I want?

Alright, so here's what I'm trying to do. I have a dashboard with a list of items (Dashboard 1, Dashboard 2,..., etc.). I'm trying to make them each have a dropdown bar come down whenever I click on one of them. Here's what I got:
Here is a.html
<html>
<head>
<title>Database</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="dashboard.css"/>
<script src="scripts/jquery-1.12.0.min.js"></script>
<script src="scripts/general.js"></script>
</head>
<body>
<div id="header">
<div class="logo">
<img src="/images/whatever.png"/>
</div>
</div>
<div id="container">
<div class="sidebar">
<ul id="nav">
<li><a class=selected href="#">Dashboard</a></li>
<li>Dashboard 1</li>
<li>Dashboard 2</li>
<li>Dashboard 3</li>
<li>Dashboard 4</li>
</ul>
</div>
<div class="content">
some content yay
<div id="box">
<div class="box-top">News</div>
<div class="box-panel"> This is simple news lalal</div>
</div>
</div>
</div>
</body>
</html>
Here is dashboard.css (note, styles.css isn't really important in this and is mainly meant for different pages, so I'm not including it):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div#dbheader {
width: 100%;
height: 50px;
background-color: #010101;
margin: 0 auto;
}
.logo a {
margin-left: 5px;
}
div#container {
width: 100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #171717;
float: left;
}
.content {
width: auto;
height: 100%;
margin-left: 250px;
background-color: #222;
padding: 15px;
}
ul#nav li{
}
ul#nav li a{
text-decoration: none;
color: #aaa;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid;
border-color: #111;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
ul#nav li a:hover,
ul#nav li a:active{
background-color:#030303;
color: #fff;
padding-left: 20px;
/* margin-left: 5px;*/
}
ul#nav li a.selected {
background-color: #030303;
color: #fff;
}
div#box {
margin-top: 15px;
}
div#box .box-top {
color: #fff;
text-shadow: 0px 0px 1px #000;
padding: 5px;
padding-left: 15px;
background-color: #2980b9;
font-weight: 300;
}
div#box .box-panel {
padding: 15px;
background-color: #fff;
color: #999;
}
and finally, here's my general.js file:
$(document).ready(function(){
$("ul#nav li a.selected").click(function(){
$("ul#nav li").slideToggle('fast');
});
});
What happens is that I want to click on the a.selected part of my sidebar menu, and then I want the sidebar I already have (just to see if it works) to slide down fast. What happens though is that when I click on a.selected (aka Dashboard 1), the whole sidebar retracts back into Dashboard 1 and the dashboard side bar just disappears. So it essentially did the opposite of what I wanted.
Does anyone know how I can fix this?
If I understood your intent correctly, this code should do the job:
$(document).ready(function(){
$("ul#nav li a.selected").click(function(){
$("ul#nav li:not(:first-child)").slideToggle('fast');
});
});

HTML or CSS navigation bar issue

Basically, I have created a navigation bar that has an underline when hovered and also when it is active. I also have a line spanning the page. When the cursor is hovered over the list, the 4px line appears under the word but it also pushed the line spanning the page down by 4 pixels. Can someone help please.
Here's the HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href="new1.css">
</head>
<body>
<nav id="ddmenu">
<div class="menu-icon"></div>
<ul>
<li class='top-heading'><a href='#'><span>New in</span></a>
</li>
<li class='top-heading'><a href='#'><span>Homeware</span></a>
</li>
<li class='top-heading'><a href='#'><span>Decorating</span></a>
</li>
<li class='top-heading'><a href='#'><span>DIY</span></a>
</li>
<li class='top-heading'><a href='#'><span>Furniture</span></a>
</li>
<li class='top-heading'><a href='#'><span>Bathroom</span></a>
</li>
<li class='top-heading'><a href='#'><span>Garden</span></a>
</li>
<li class='top-heading'><a href='#'><span>Offers</span></a>
</li>
</ul>
</nav>
</body>
</html>
Here's the CSS
#ddmenu {
zoom: 1;
width: 100%;
background: #FFF;
padding: 0px 0;
}
#ddmenu:before {
content: '';
display: block;
}
#ddmenu:after {
content: '';
display: block;
clear: both;
}
#ddmenu ul {
list-style-type: none;
position: relative;
display: block;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0px;
padding-top: 4px;
border-bottom: 1px solid #EAEBEB;
border-top: 1px solid #EAEBEB;
zoom: 1;
}
#ddmenu ul:before {
content: '';
display: block;
}
#ddmenu ul:after {
content: '';
display: block;
clear: both;
}
#ddmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
#ddmenu li a {
float: left;
color: #000;
text-decoration: none;
height: 20px;
padding: 1px 50px 0;
font-weight: normal;
}
#ddmenu li:hover, #ddmenu .active {
text-decoration: none;
border-bottom: 4px solid #EAEBEB;
colour: #000
}
#ddmenu .active a {
font-weight: 700;
}
When you add a border you're increasing the height of the element so naturally it affects items below it.
Without a set height the optimal solution is to have the border already there but transparent and just change the color on hover.
#ddmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
border-bottom:4px solid transparent;
}
JSfiddle Demo
Note: Just a suggestion but you have a lot of padding on the links there. As you can see it in the doesn't look quite so nice at smaller viewports...you might want to look into that.

Categories