* {
margin: 0;
padding: 0;
}
/* Formats the Navigation bar */
nav {
width: 100%;
height: 60px;
background-color: #2a2a2a;
}
/* Formats the page title */
nav p {
font-family: arial;
color: #fff;
font-size: 24px;
line-height: 55px;
float: left;
}
/* formats the navlinks to the left */
nav ul {
float: left;
}
/* formats the navlinks to left */
nav ul li {
float: left;
list-style: none;
position: relative;
}
/* formats the text in the list for nav bar */
nav ul li a {
display: block;
font-family: arial;
color: #fff;
font-size: 14px;
padding: 22px 14px;
text-decoration: none;
}
/* styles the drop down */
nav ul li ul {
display: none;
position: absolute;
background-color: #2a2a2a;
padding: 3px;
border-radius: 0px 0px 3px 3px;
}
/* Displays when hovered */
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: grey;
}
<nav>
<ul>
<li>Home</li>
<li>Teams
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
Hi guys i cant seem to understand whats going on. I've tried everything i can but i can get the text to align to the left like in default html. I have a home page that looks like this:
<?php include ("navBar.php") ?>
home
Thats it and for some reason "home" ends up half way across the page, i have included the defaults margin and padding to the top of the stylesheet but its not working. Any help will be great thanks.
I see there is nav ul li a class, and it has a display value block. Try doing it to inline-block instead and see if it works.
Related
I am a beginner to web development, and I am trying to make a dropdown menu.
The problem is when I hover on particular element, it consumes more than the expected space.
I want it to appear below the "shop" element. I do not understand where I am going wrong.
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Set position: relative on shop-link and position: absolute on dropdown. Then align dropdown with top, left, bottom, transform what would you like.
With transform it would look like this:
.link {
position: relative;
}
.dropdown {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%)
}
I think the issue is with the way you organized these elements. Personally, when I make drop down menus, I use <button> for each root of the drop down menu. It makes styling everything much easier.
Then, what I do is I put the main text in an <h2> or <h3>, and style that how I want the main part of the drop down to look. Everything inside of the drop down can be styled using the <button> class' settings. Here's how I modified your code to get what I assumed your looking for.
CSS Styling:
.nav2 a {
color: #000000;
text-decoration: none;
display: block;
}
.nav2 button {
margin: 20px 40px;
padding: 0 10px 0 10px;
border: 0px;
/* change this to the color you want the background of your website to be */
background-color: white;
border: 2px solid gold;
font-size: 0px;
}
.nav2 button:hover {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
background-color: white;
border: 2px solid greenyellow;
/* change this to the color you want the background of your website to be */
background-color: white;
font-size: 16px;
}
h2 {
color: #000000;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
And then the HTML body:
<div class="nav2">
<button>
<h2>Home</h2>
</button>
<button>
<h2>Shop</h2>
<br>Products
<br>Membership
</button>
<button>
<h2>Blog</h2>
</button>
<button>
<h2>News</h2>
</button>
<button>
<h2>Activity</h2>
</button>
<button>
<h2>Contact Us</h2>
</button>
</div>
The end result looked like this
I hope my response was helpful!!
Your CSS is a bit messy, but to get it working add the following:
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
position: absolute "removes" the element from the container so it is not contained in your parent's border. This will allow us to use the left, right, bottom, top CSS properties to position the sub-nav.
margin-top is used here to remove the intersection of shop and the sub-nav. However, you should be careful increasing this value greater than 1-2px since it will create empty space and hovering on the elements is required for your sub-nav to show.
Here is the working snippet:
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Position docs for a better explanation of absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here You have:
.nav{
position: relative;
display: flex;
justify-content: flex-end;
}
.nav ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li{
background-color: gold;
border: 1px solid gold;
color: #FFF;
}
.nav ul li:hover{
background-color: #FFF;
color: gold;
}
.nav ul li a{
padding: 1rem 2rem;
color: inherit;
text-decoration: none;
font-family: Verdana;
}
.nav ul li ul {
/* navigation sub-options disappear when not hovered */
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul {
/* navigation options appear when hover on elements */
display: flex;
opacity: 1;
visibility: visible;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact US</li>
</ul>
</div>
I found this CSS code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.
Have any idea? Your help would be greatly appreciated.
HTML :
<div id="menu">
<ul>
<li>Accueil</li>
<li>CV</li>
<li>Enseignement
<ul>
<li>Plans de cours</li>
<li>Leçons</li>
<li>Powerpoints </li>
</ul>
</li>
<li>Recherche
<ul>
<li>Italia</li>
<li>Livres</li>
</ul>
</li>
<li>Liens</li>
<li>Contact</li>
<li>English</li>
</ul>
</div>
And the CSS :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul a:hover {
color: #ffffff;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
Are you missing some code from your examples or is this the exact code, because I think you'r missing the close
</ul>
?
Having some trouble with my nav, i'm trying to create a dropdown menu when you hover over the "Match" link. every time I hover the mouse over the link, list will stay underneath said link and disrupt how the navigation bar looks. Any helps will be much appreciated
HTML
<nav>
<span class= "navbar-button"></span>
<ul class="navbar">
<li>Home</li>
<li>Gallery</li>
<li>Match
<ul>
<li>City</li>
<li>Coastal</li>
<li>Rural</li>
</ul>
</li>
</ul>
</nav>
CSS
body{
padding: 0;
margin: 0;
font-family: 'main';
}
.navbar {
list-style: none;
background-color: #333;
color: #fff;
margin: 0;
text-align: center;
}
.navbar > li {
display: inline-block;
padding: 1.3% 2%;
}
.navbar > li:hover {
background-color: #585858;
}
.navbar > li > a{
text-decoration: none;
font-size: 30px;
color: #fff;
}
.navbar li ul {
display: none;
}
.navbar li:hover ul{
display: block;
}
you need to use absolute positioning to break it out of the container so it won't disrupt the rest of the elements:
.navbar li ul {
position: absolute;
display: none;
background-color: #333;
margin: 0;
text-align: center;
padding: 20px;
}
Be sure to set its parent to position: relative or the body will become its container:
.navbar > li {
position: relative;
display: inline-block;
padding: 1.3% 2%;
}
JSFIDDLE
Add position absolute to: .navbar li ul
I'm trying to code a drop down menu where the hovered over list item displays a list of links horizontally.
What is happening with my code right now is that all the links are right on top of each other, and I can't for the life of me figure out how to fix them.
I've tried adding height and width, and then adjusting the padding, margins, you name it. Somehow using display: inline; hasn't been enough to accomplish this.
If anyone could help me out with this, that would be much appreciated.
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><img alt="logo" src="logosmall.jpg" />
<strong>New Ideas</strong>Education
</h1>
<ul>
<li>about us</li>
<li>teachers
<ul>
<li>Literature</li>
<li>International</li>
<li>Staff</li>
</ul>
</li>
<li>lessons</li>
<li>reviews</li>
</ul>
</div>
</div>
</nav>
</header>
And the CSS:
ul {
list-style-type: none;
display: inline;
}
header nav {
}
header nav ul {
background: #fff;
padding: 2px 0 0 0;
list-style: none;
position: relative;
float: right;
display: inline;
}
header nav ul:after {
content: "";
clear: both;
display: block;
}
header nav ul ul:after {
content: "";
clear: both;
display: inline;
margin: 0 20px 0 0;
}
header nav ul li {
float: left;
padding: 10px 20px;
text-transform: uppercase;
color: #757575;
display: inline;
}
header nav ul li:hover > ul {
color: #06cbe2;
display: inline-table;
padding: 5px 60px;
margin: 0 20px 0 0;
float: left;
position: absolute;
}
header nav ul li:hover a {
color: #06cbe2;
}
header nav ul li a {
display: inline;
color: #757575;
text-decoration: none;
text-transform: uppercase;
}
header nav ul ul {
background: #fff;
padding: 0px 20px 0px 0px;
list-style: none;
position: absolute;
float: left;
display: none;
}
header nav ul ul li {
position: absolute;
display: inline;
margin: 0 30px 0 0;
color: #757575;
text-transform: uppercase;
padding: 10px -60px;
font-size: 10pt;
}
header nav ul ul li a {
padding: 10px -60px;
color: #757575;
text-decoration: none;
text-transform: uppercase;
display: inline-table;
font-size: 6pt;
}
header nav ul ul li a:hover a {
color: #06cbe2;
}
firstly make sure where and how you wanted to display the controls, if you saying all controls are sitting on over the other then all those positions have same value, the css have same values for almost all ID and Class, I can give you and example to fix and it might help you to fix your problem
Imagine you need two dropdown list one is on left and one is on right side then do this
NOTE(its just an example)
<div id=Main>
<div id=left></div>
<div id=right></div>
</div>
now provide height and width as 100% to "Main", then provide css for "left" as below
#left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}
#right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}
and inside to those div's use your dropdown controls or any controls and modify the width if you want, Let me know if it works, will help you
I would like to have a dropdown sub- menu in the same style, I know it's simple but I'm still new to making websites and I can't figure it out by myself.
here's the top part of my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Startpagina</title>
<LINK href="../CSS/stylesheet.css" rel=stylesheet>
</head>
<body>
<div class="schikking">
<img src="../Images/bibram.png" alt="Logo van de bib" height="90" width="170">
<!-- navigatie -->
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
</nav>
and a big part of my CSS file:
.schikking {
margin: 0 auto;
padding: 30px 0px 0px 0px;
max-width: 1010px;
}
.content {
background-color: red;
background-color: rgba(147, 4, 0, 0.84);
border: 1px solid black;
}
nav li
{
display: inline;
padding-right: 8px;
}
nav {
text-align: center;
margin: -20px 0px 0px 0px;
}
nav ul{
background-color: rgba(126, 4, 0, 0.79);
border: 1px solid black;
}
nav ul li{
display: inline;
}
nav ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;
}
nav ul li a:hover{
color: #999999;
}
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
heres a picture of how it looks atm:
normal: http://gyazo.com/8f6553245b736feee8cc5ebf8d4a030c
while hovering over "catalogus": http://gyazo.com/662eee4bbbb2ea2318925be76b3722d2
You have nearly got it. I have only made some minor changes to the CSS to make it work.
nav ul li { display: inline-block; height: 100%; } instead of just display: inline is required so that the each <li> takes up all the height of the "menu" otherwise there is a small gap between the bottom of the <li> and the sub-menu which would cancel the :hover event since you are out of the <li>. inline elements do not have height (or width), so changed to display: inline-block.
The CSS at the end is where the other changes are. Your code is:
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
The display code doesn't need to be anything more than
nav ul li:hover ul {
display: block;
}
But to position the sub-menu outside of it's normal flow (which is currently appearing next to the parent menu item), you need to add an absolute position to the sub-menu `.
nav ul ul {
display: none;
position: absolute;
}
If you want a horizontal menu, that should be all the changes needed, since your rule nav ul li { display: inline-block; }will already apply to the sub-menu list-items. If you want a vertical menu, you need to reset the display back to the default list-item or block with:
nav ul ul li {
display: block;
}
See demo
Don't do it yourself. I use this jquery plug-in and its great:
Superfish
If you are having problems with anything I'd reccomend you to google them first. Here's a generator (just choose the one you want and follow the instructions):
Css drop down menu maker
I would also reccomend you to actually learning the language and expanding your knowledge, as well as googling questions before posting them here.
HTML :
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
CSS :
nav {
margin: -20px 0px 0px 0px;
text-align: center;}
nav ul ul {
display: none;
padding-right: 8px;}
nav ul li:hover > ul {
display: block;}
nav ul {
background-color: red;
border: 1px solid black;
list-style: none;
position: relative;
display: inline-table;}
nav ul:after {
content: ""; clear: both; display: block;}
nav ul li {
float: left;}
nav ul li:hover a {
color: #999999;}
nav ul li a {
display: block;
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;}
nav ul ul li {
float: none; position: relative;padding: 10px;}
nav ul ul li a {
color: #fff;}
nav ul ul ul {
position: absolute; left: 100%; top:0;}