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
}
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;
}
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;}
I found a guide to make drop-down menus, and it said that when you would stopped hovering on the main menu item, the drop-down menus would stay fixed. However, my menu just disappears, making it impossible to press the items!
As you can see, it's the Music menu bit that has the drop-down (or in this case, "drop-right") menu.
Fiddle here:
http://jsfiddle.net/Gb2aS/
Code here:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div ID="menubox">
<ul>
<li>Home</li>
<li>Music
<ul>
<li>My music</li>
<li>The Joao Gilberto project</li>
</ul></li>
<li>Github</li>
<li>Pictures</li>
</ul>
</div>
<div ID="circle">
<p ID="title"> A <br> r <br> n <br> s <br> t <br> e <br> i <br> n </p>
</div>
</body>
</HTML>
CSS:
#menubox
{
width: 8%;
height: 30%;
border: 10% solid #C7D93D;
border-radius: 5%;
position: fixed;
margin-top: 12%;
margin-left: 18%;
font-family: Ubuntu, Lucida console, Futura;
list-style: none;
float: left;
}
#menubox ul li a
{
text-align: left;
font-size: 200%;
color: #FFF0A5;
}
#menubox ul li
{
color: #468966;
font-family: Ubuntu, Lucida console, Futura;
float: left;
margin-right: 10px;
position: relative;
}
#menubox ul
{
color: #468966;
font-family: Ubuntu, Lucida console, Futura;
}
#menubox ul ul
{
position: absolute;
left: -9999px;
list-style: none;
}
#menubox ul ul li
{
float: left;
margin-left: 40%;
position: relative;
font-size: 60%;
text-align: left;
}
#menubox ul ul a
{
white-space: nowrap;
}
#menubox ul li:hover a
{
text-decoration: none;
color: #FFB03B;
}
#menubox ul li:hover ul
{
left: 0;
}
#menubox ul li:hover ul a
{
text-decoration: none;
color: #FFB03B;
}
#menubox ul li:hover ul li a:hover
{
color: #FFB03B;
}
div p
{
color: #FFF0A5;
text-align: center;
position: relative;
vertical-align: middle;
display: inline-block;
margin-top: 300px;
line-height: 60px;
}
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 500px;
height: 500px;
display: block;
position: fixed;
margin-top: 9%;
margin-left: 52%;
text-align: center;
}
#title
{
text-color: #FFF0A5;
font-size: 350%;
display: inline;
text-align: center;
}
body
{
height: 100%;
width: 100%;
background-color: #468966;
font-family: Ubuntu, Lucida console, Futura;
}
.link
{
text-color: #FFF0A5;
text-decoration: none;
text-align: left;
}
The problem is because your sub list is offset, so there is deadspace that the cursor has to pass through from the main menu item, and the submenu. This will fix your issue:
#menubox ul li:hover ul
{
left: 0;
top: 0;
z-index:100;
}
As Daniel Gimenez was explaining above, the reason why the submenu stays visible is because it is a child of the main ul item, and so if you keep your cursor over the submenu the browser counts that as maintaining your cursor over the original menu item as well, and the :hover css persists.
It works pretty well for dropdown/popout menus because even if the child object is physically displayed outside of its parent, it is still "inside" the parent from a code-point-of-view. But if there is any physical gap between the two and the mouse crosses over that gap, the :hover rule is deactivated and the submenu disappears.
Your css was a lot to pour through. So I just boiled it down to the basics. I believe your issue has to do with a gap between your main link and submenu.
Explanation of CSS
* Anchors are block inline-block type's and have the exact width of the parent li and ul.
* Submenus are inside li's. So when li's are hovered over they are visible. The submenu is visible because it is a child of the li.
* Because the anchors are 100% and stretch the li, the abut the submenu, so when moving the mouse over, there is no gap, and so the submenu remains visible.
jsFiddle
#menubox {
position: absolute;
left: 100px;
top: 100px;
}
#menubox ul {
display:inline-block;
padding-left:0;
}
#menubox > ul {
width: 100px;
}
#menubox > ul ul {
position:absolute;
display: none;
width: 200px;
}
#menubox li {
list-style-type:none;
display:block;
}
#menubox li:hover {
background:red;
}
#menubox a {
display:inline-block;
width:100%;
}
#menubox ul li:hover ul {
display: inline-block;
background: orange;
}
I've added some padding to the list that pops up, essentially creating a block around it. While your mouse is on that block, it won't dissapear.
http://jsfiddle.net/Gb2aS/5/
#menubox ul ul
{
position: absolute;
left: -9999px;
padding: 100px;
list-style: none;
}
there is however the issue of the drawn circle being placed overtop of the list, but I'll leave that to you.
I DO however like Daniel's solution better. Giving the links their own class is a much better way of dealing with it. You're better off to look at his solution and adapt it to what you want.
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.
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;
}