I am trying to create a new website for my mom, and I am working on the navigation bar right now. I have the dropdown menu etc working, but it is not properly aligned.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style type="text/css">
ul {
list-style: none;
padding-left: 400px;
width: auto;
margin-left: auto;
margin-right: auto;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #878E63
}
li ul {
display: none;
}
ul li a {
display: block;
background: #878E63;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #F1F0D1;
}
ul li a:hover {
background: #111;
}
li:hover ul {
display: block;
position: absolute;
right: -100px;
}
li:hover li {
float: none;
text-align: center;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>
Services
<ul class="hidden">
<li>Threading</li>
<li>Waxing</li>
<li>Mehndi/Henna</li>
<li>Facial</li>
</ul>
</li>
<li>Media</li>
<li>Testimonial</li>
<li>Career</li>
<li>Client</li>
<li>Contact Us</li>
</ul>
</body>
</html>
The dropdown bar for the services is not properly aligned.
You want the dropdown to be aligned with the left end of it's parent container so instead of right:-100, just make the dropdown ul left:0; on hover. Also it's inheriting 40px of padding so set this to 0 and everything looks good.
li:hover ul {
display: block;
position: absolute;
left: 0px;
padding:0px;
}
You can add a new class for your hidden element and set an absolute position:
Something like this:
.hidden{
position:absolute;
left:-54%;
}
Have a look at this
https://jsfiddle.net/9e43Lbx9/
The dropdown ul you have is inheriting the padding-left of the following css :
ul {
list-style: none;
padding-left: 400px;
width: auto;
margin-left: auto;
margin-right: auto;
margin: 0px;
}
So just making that padding go away for the dropdown ul using :
li:hover ul {
display: block;
position: absolute;
padding:0px;
}
Related
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
I am having trouble with my drop down menu, the second level items overlap each other and each item has a different width. I have searched this site and tried fixes to similar problems, but haven found anything that works. I am not a programer, but am trying to add this to my website. Here is my code:
#menu ul,
#menu li,
#menu span,
#menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu ul {
list-style: none;
position: absolute;
top: 1.1em;
}
#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul > ul > li
{
float: left;
}
#menu ul ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
width: 100px;
text-align: left;
*width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
display: block;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
/*#menu ul li a:hover
{
text-decoration: none;
}*/
#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top
left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Department
<ul>
<li>Patrol </li>
<li>Investigations</li>
<li>Records </li>
<li><a href="#" class="active">Prosecution
</a></li>
</ul>
</li>
<li>Forms</li>
<li>Gallery</li>
<li>Media</li>
<li>Contact</li>
</ul>
</div>
<br>
</body>
</html>
Fiddle
Created a class submenu and added display:block. This allows us to assign a width and height value DOM objects and stops your menu items from overlapping. In your case I assigned the class submenu to the malfunctioning menu items to avoid any conflicts with preexisting code.
Simplified version fiddle
Since you're not a programmer I took the liberty to polish up your code and remove the lines that weren't doing anything. The simplified link above has the same functionality as your code (with solution) but with less confusing classes. It may make it easier for you to continue working on your site!
To fix alignment on your website, replace the CSS for ul#menu ul with:
ul#menu ul {
display: none;
position: absolute;
top: 28px;
margin-left: 70px;
width: 100px;
text-align: left;
}
To address the submenu appearing behind your content add z-index:10 to #menu
Give the sub nav links more line-height.
Add this rule to your styles:
#menu ul li ul li {
line-height: 2em;
}
Then, to close the gap created between the main nav and the sub nav (which will prevent you from hovering over sub nav links) add a bit of padding-bottom to your existing main nav rule:
Adjust this rule in your styles:
#menu ul li a
{
/* original */
/* padding: 0.5em 1.0em 0.9em 1.0em; */
/* new */
padding: 0.5em 1.0em 1.1em 1.0em;
color: #fff;
text-decoration: none;
}
The solution above is a straight answer to your question and solves the problem you raise.
However, I would suggest you consider a better overall solution for your navigation development. Currently, it seems a bit disjointed and patched together.
Here's a great video tutorial for building clean, elegant and robust nav menus.
https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN
Try this style,
<style>
#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}
#menu li:hover {
text-decoration: none;
background: #171e35;
}
#menu .active{
background: #171e35;
}
#menu li{
position: relative;
}
#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}
#menu li li{
float:none;
}
#menu li:hover > ul{
display:block;
}
</style>
Just add this css on your style
#menu ul ul li a {
width:100%;
float:left
}
Okay I am making a sample of navigation bar it's all fine except whenever the nested li is hovered the background doesn't fully cover the space.
My HTML code goes as :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>NavBar</title>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li><li>
About</li><li>
Contact
<ul>
<li>Email</li>
<li>Phone</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
My CSS code goes as :
html, body {
margin: 100px;
padding:0px;
}
#nav {
margin: 0px;
padding: 0px;
background-color: #909090;
font-familY: Courier;
font-size: 19pt;
color: #afc0ff;
}
#nav ul ul {
display: none;
background-color: #909090;
}
#nav ul li:hover > ul{
margin: 0px;
padding:0px;
display:block;
position:absolute;
top: 100%;
left: 0px;
width: 100%;
}
#nav ul li:hover {
background: #808080;
}
#nav ul li {
margin: 0px;
padding: 10px 5px 10px;
list-style: none;
display: inline-table;
position: relative;
}
#nav ul li a {
text-decoration: none;
color: #260026;
}
My problem is:
I am not being able to make my nested li's background color cover up the whole area like you can see in Email that whole area is not hovered!
JSFiddle
Add this to your CSS:
#nav ul ul li {
display:block;
}
Check JSFiddle Demo
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
I'm having some problems with a css dropdown menu that I've been working on.
Here is a link to the site: rpg.vacau.com
There are 2 problems:
When you hover over the cog wheel, it not only drops down a small menu, but it drops down a black bar that takes up the rest of the space to the right.
The cog wheel is right next to the title, and I want it on the right side without absolute positioning, because the menu is relatively positioned.
So pretty much, how do I fix that weird black bar that drops down along with the menu, and how do I move the cog wheel and menu to the right side? Thanks in advance, and hope this makes sense.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lite RPG</title>
<link rel="stylesheet" type="text/css" href="/css/web.css" />
<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
</head>
<body>
<nav>
<ul>
<li><a id="title" href="#">iON»</a></li>
<li><a id="settings" href="#"><img src="/images/settings.png" height="20"
width="20" /></a>
<ul>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
web.css
body, ul {
margin: 0;
padding: 0;
}
nav ul {
background-color: #1b1b1b;
display: table;
position: relative;
list-style: none;
top: 0;
height: 50px;
width: 100%;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: "Champagne & Limousines";
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #1b1b1b;
}
nav ul li a:hover {
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
}
nav #settings {
top: 0px;
left: 1000px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
Replace the following 2 conditions in your CSS file
nav ul ul {
display: none;
position: absolute;
top: 100%;
right: 0px;
width: auto;
}
nav ul ul li {
float: left;
position: relative;
clear: both;
}
And to the li you want to send to right, add a float: right; CSS rule. Eg:
<li style="float: right;">
EDIT
To keep the icon highlighted while the mouse is inside submenu,
nav li:hover #menu {
background-color: #292929;
}
Just give a float: right to the LI.
<li style="float: right;">
Check out the screenshot.