I've been looking around for a solution and didnt find anything. Therefore I am asking a question.
The drop down menu works in Chrome in my computer and other devices (computers and laptops) at home. Except in Firefox and IE.
#menu {
position: absolute;
left: 50%;
bottom: 85.125%;
z-index: 100;
height: 100px;
margin-top: -200px;
width: 300px;
margin-left: -150px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul#nav li {
background: #fff;
float: left;
}
ul#nav li a {
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
}
ul#nav li a:hover {
background: #aaa;
}
ul#nav li ul li {
float: none;
}
ul#nav li ul {
position: absolute;
display: none;
}
ul#nav li:hover ul {
display:block;
}
body {
margin: 0px;
padding: 0px;
}
<body>
<header>
<!-- input for header text-->
</header>
<div id="menu">
<!-- input for the navigation menu -->
<ul id="nav">
<li>Hem</li>
<li>
Browsers
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE</li>
<li>Opera</li>
</ul>
</li>
<li> Data</li>
<li>Synpunkt</li>
</ul>
</div>
</body>
Two reasons,
1) Your HTML has an error, these lines --
<li><a>href="chrome.html">Chrome</a></li>
<li><a>href="firefox.html">Firefox</a></li>
should be
<li>Chrome</li>
<li>Firefox</li>
And
2) Your ul has id navbar, but in css you're using #nav as the selector. So either change the id or change the selector in css.
Check the Test Link
EDIT: Screenshots !! :)
Firefox:
IE9:
if this is not correct, please explain what is not correct.
Your HTML is broken:
<li><a>href="chrome.html">Chrome</a></li>
<li><a>href="firefox.html">Firefox</a></li>
should be
<li>Chrome</li>
<li>Firefox</li>
But I can't get this working in Chrome anyway. Can you replicate the issue in a JSFiddle?
Try using this code for css, in ie press f12 and make sure that browser mode and document mode is both set to ie9.
EDIT: Header should look like this.
<!doctype>
<html>
<head>
<meta charset=utf-8>
<title>Index</title>
<link rel="stylesheet" href="css/style.css">
</head>
#menu
{
position: relative;
top: 50px;
left: 800px;
display: inline-block;
}
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
ul#nav li
{
background: #fff;
float: left;
position: relative;
}
ul#nav li a
{
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
}
ul#nav li a:hover
{
background: #aaa;
}
ul#nav li > ul li
{
float: none;
}
ul#nav li > ul
{
left: 3px;
position: absolute;
top: 29px;
display: none;
}
ul#nav li:hover ul {
display:block;
}
body
{
margin: 0px;
padding: 0px;
}
Related
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
}
This is a website I designed the last two tags don't actually go through
I tried everything, but I am lost I need help. In this last two are not performing well. I am not able to understand the problem exactly.
<HTML>
<head>
<title>
ggwa
</title>
<style>
div header {
width: auto;
height: 48px;
}
div img {
display: block;
width: 100%;
}
div li {
height: 30px;
background: #FF5000;
}
div ul {
margin: 0;
padding: 0;
}
div nav ul li {
list-style: none;
}
div.nav ul li a {
text-decoration: none;
float: left;
display: block;
padding: 10px 20px;
color: black;
}
div.nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<div class="header">
<img src="../Images/Header1.png" alt="Smiley face">
</div>
<div class="nav">
<ul>
<li> Home
</li>
<li> LLPs
</li>
<li> IP?
</li>
<li> Blank
</li>
<li> GabeN
</li>
</ul>
</div>
</body>
</html>
It should be
div.nav ul li a:hover {
color: white;
}
of simply
.nav ul li a:hover {
color: white;
}
https://jsfiddle.net/michaelyuen/bfa0u7gb/12/
To declare a class on your css, use .classname example div.header or .header
To declare an id on your css, use #idname example div#header or #header
So your style sheet would be
.header {
width: auto;
height: 48px;
}
.header img {
display: block;
width: 100%;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
height: 30px;
background: #FF5000;
list-style: none;
float: left;
padding: 10px 20px;
}
.nav ul li a {
text-decoration: none;
display: block;
color: black;
}
.nav ul li a:hover {
color: white;
}
Now Check this fiddle Updated css rules..
fiddle
div li {
height: 30px;
width: 20%;
background: #FF5000;
float: left;
list-style: none;
}
I have a sub navigation which is placed in two different places on different browsers, and I'm unsure why. I do realise that using margin-top instead of top does fix this but the problem with that is that I have a jQuery slide animation when the sub navigation comes out and it doesn't look nice when I use margin-top since it comes out further up than it is. Here is a picture of the difference:
http://jsfiddle.net/eAqev/ <-- JS Fiddle
HTML:
<div id="navigation">
<ul>
<li><h1>01. About</h1><h2>Learn about us</h2></li>
<li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
<ul class="scrollDown">
<li><p>Kitchen Worktops</p></li>
<li><p>Upstands/Splashbacks</p></li>
<li><p>Gables/ Panels</p></li>
<li><p>Glass</p></li>
<li><p>High Gloss</p></li>
<li><p>Bathroom Tops</p></li>
<li><p>Sinks/ Taps</p></li>
</ul>
</li>
<li><h1>03. Contact</h1><h2>Contact us!</h2></li>
<li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
</ul>
</div>
CSS:
#navigation ul {
display: inline;
position: relative;
}
#navigation ul li {
float: left;
width: 200px;
height: 35px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
#navigation ul li:hover {
border-bottom: 6px solid #eee;
cursor: pointer;
}
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0;
padding: 0;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
You made everything clear Just add the below codes.It will fix your problem
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0 !important;
padding: 0 !important;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
#navigation ul {
display: inline;
z-index:10;
position: relative;
}
Most probably IE7 will have a buggy environment. This will work fine with IE8+.
Demo
Hi now define your ID #navigation ul display:inline-block; than adjects your id #navigation ul ul in top
As like this
#navigation ul {
display: inline-block;
position: relative;
vertical-align: top;
}
#navigation ul ul {
top:48px;
}
Live demo
Different browsers have different default margin & padding on ul/li elements.
Have you tried resetting these all to 0?
#navigation ul, #navigation li {
padding: 0px;
margin: 0px;
}
Might be you should try css-reset? Just put it at beginning of your css
But it may mess layout so you will need to set some values by yourself.
Try this:
#navigation ul li {float: left;
width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}