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
Related
I am learning how to work with basic html code and page layouts. I have the following html and css code. I want the nav bar to be aligned centered on the top of the page. If I run it now, it looks close to what I want, but it is stuck to the left.
HTML:
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="nav">
<ul>
<li><a>A</a></li>
<li><a>B</a>
<ul>
<li><a>BA</a></li>
<li><a>BB</a></li>
</ul>
</li>
<li><a>C</a>
<ul>
<li><a>CA</a></li>
<li><a>CB</a></li>
<li><a>CC</a></li>
<li><a>CD</a></li>
</ul>
</li>
<li><a>D<a></li>
</ul>
</div>
</body>
</html>
CSS:
body{
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
.nav ul{
padding: 0px;
list-style: none;
}
.nav ul li{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
.nav ul li a{
text-decoration: none;
color: white;
display: block;
}
.nav ul li a:hover{
background-color: green;
}
.nav ul li ul li{
display: none;
}
.nav ul li:hover ul li{
display: block;
}
I tried changing the display and float values based on various articles, but i did not find anything that worked. Thanks for any help.
There is a really sweet solution with margin auto. In your css file, just add these two properties to .nav class
.nav {
margin: 0 auto;
width: fit-content;
}
it will make the width of your nav div to just fit content and then position it to center because of that auto margin. Cheers
instead
.nav ul li{ float: left; }
use
.nav ul li{ display: inline-block; }
and add
.nav{ text-align: center; }
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;
}
Probably one noob question, but I can't understand positioning in css very good. Yesterday I had a problem with background and drop-down menu, so I decided to start again from scratch. The problem persists.
My h1 couldn't be in position I wanted so I made its position:relative and then I could move it, but because of that I can't click on my drop-down menu or even on logo. Just half of it.
HTML:
<link rel="stylesheet" type="text/css" href="./style2.css" />
</head>
<body>
<div id="stajl">
<ul>
<li>Home Page </li><li>
Services <span class="arrow">▼</span>
<ul><li>
Trades </li><li>
Exchanges </li><li>
Business to Business </li>
</ul>
<li>About </li><li>
Contact </li>
</ul>
</div>
<div id="img">
<img src="pfslogo2.png" />
</div>
<div id="header">
<h1>We're here to help! </h1>
</div>
</body>
</html>
CSS:
body {
overflow-y: scroll;}
#stajl ul {
list-style-type: none;
margin:0;
padding:0;
float: right;
}
#stajl ul li:hover a{
background-color: #d7e6fa;
}
#stajl ul li {
display: inline-block;
}
#stajl ul li a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
background-color: #0099cc;
}
#stajl ul ul {
display: none;
position: absolute;
margin-left: -105px;
}
#stajl ul li:hover ul {
display: block;
}
#stajl ul ul li {
display: block;
color: white;
width: 352px;
}
#stajl ul li li a:hover {
color: cyan;
}
.arrow {
font-size: 10px;
vertical-align: middle;
}
#img img {
margin: 0;
padding: 0;
height: 50px;
width: 100px;
top: 0;
left:0;
}
#header h1 {
padding: 0;
margin:0;
text-align: center;
position: relative;
top: -40px;
left: -60px;
color: #0099cc;
}
Codepen created by Dorvalla for my problem: codepen.io/anon/pen/VeXyRY
Any advice will be appreciated! Thanks
The H1 is Blocking the Cursor, you need to set the H1 to be a bit shorter:
#header {
text-align:center;
}
#header h1 {
display:inline-block;
}
http://codepen.io/niorad/pen/EPEQxJ
Set the z-index of your menu higher than that of the div.
Put a z-index: -1; on your h1, then your navigation will work again.
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
}
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;
}