When I hover over the menu item "support" the text start wont appear in the drop down menu.
I've checked my css over and over again. But i can't seem to find where it is going wrong.
HTML Code
<body>
<div class="site_header">
<div class="header_container">
<div class="header_logo">
</div>
<nav>
<ul class="header_menu">
<li>Home</li>
<li>Support
<ul class="header_sub_menu">
<li>Lorum ipsum</li>
<li>Anime</li>
<li>Gundam Seed</li>
<li>Fairytail</li>
</ul>
</li>
<li>Forums</li>
<li>Ask Question</li>
<li>Help</li>
<li>Feedback</li>
</ul>
</nav>
</div>
</div>
CSS Code
body {
line-height: 1;
background-color: brown;
font-family: Century Gothic;
}
ol, ul {
list-style: none;
}
.site_header{ background-color: black; height: 50px; position: relative; }
.header_container{
height: 50px;
width: 1100px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.header_menu {
left: 90px;
position: relative;
cursor: pointer;
}
li a {
color: #f2f2f2;
display: inline;
float: left;
padding: 12px 10px 22px 11px;
margin: 0px 0px 0px 6px;
font-size: 0.831em;
text-decoration: none;
}
li a:visited{
color: #f2f2f2;
}
ul li a:hover {
background-color: #dadada;
color: black;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
position: absolute;
color: green;
}
ul li:hover ul li a{
background-color: #f2f2f2;
color: red;
display: block;
width: 200px;
}
ul li:hover ul li a:hover {
background-color: #989898;
}
Look at this fragmet:
<ul class="header_sub_menu">
<li>Lorum ipsum</li>
<li>Anime</li>
<li>Gundam Seed</li>
<li>Fairytail</li>
</ul>
I think you meant this:
<ul class="header_sub_menu">
<li>Lorum ipsum</li>
<li>Anime</li>
<li>Gundam Seed</li>
<li>Fairytail</li>
</ul>
The problem is not with the CSS - it's with the HTML. You have placed the contents of the anchor tags of the sub menu outside the 'a' tag and as a direct child of the 'li' tag. Correcting that should fix your error.
You can checkout the fiddle below:
http://jsfiddle.net/E4G3Z/
This is corrected copy:
<div class="site_header">
<div class="header_container">
<div class="header_logo">
</div>
<nav>
<ul class="header_menu">
<li>Home</li>
<li>Support
<ul class="header_sub_menu">
<li>Lorum ipsum</li>
<li>Anime</li>
<li>Gundam Seed</li>
<li>Fairytail</li>
</ul>
</li>
<li>Forums</li>
<li>Ask Question</li>
<li>Help</li>
<li>Feedback</li>
</ul>
</nav>
</div>
</div>
Replace this (your code):
<ul class="header_sub_menu">
<li>Lorum ipsum</li>
<li>Anime</li>
<li>Gundam Seed</li>
<li>Fairytail</li>
</ul>
With this (corrected):
<ul class="header_sub_menu">
<li>Lorum ipsum</li>
<li>Anime</li>
<li>Gundam Seed</li>
<li>Fairytail</li>
</ul>
Related
I'm tring to make a simple drop-down menu, which would be triggered on hover event over some element and stay active as long as the cursor is over that element or is over the dropdown list.
Sample code:
HTML
<div class="header">
<div class="items">
<div class="item">
<span>Caption</span>
</div>
<ul class="items_hidden">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<input type="text">
CSS
.items {
float: right;
position: relative;
}
.item {
text-align: right;
}
.items_hidden {
display: none;
margin-top: 7px;
list-style: none;
z-index: 2000;
width: 80px;
border: 1px solid #f2f2f2;
text-align: left;
padding: 10px;
color: #333;
line-height: 30px;
border-bottom: 3px solid #f2f2f2;
}
input {
width: 100%;
}
JS
$(function() {
$('.items').on('mouseenter', function(e) {
$('.items_hidden').show();
});
$('.items').on('mouseleave', function(e) {
$('.items_hidden').hide();
});
});
I got that working, when the dropdown list is positioned relative, but the problem is once the list is displayed, it causes all following content to move down.
Here is an example: https://jsfiddle.net/2ya06aLo/
Another way would be to position the list absolute, so it wouldn't affect the content below. But in that case the list disappears as soons as I move the cursor out of 'Caption' (in contrast with the first fiddle).
Here is the second example https://jsfiddle.net/8L6ojqLm/
What would be a solution to make the list behave like in 1 and at the same time do not affect the rest of the content like in 2 ?
You can don't use JS
Example
.items {
float: right;
position: relative;
}
.item {
text-align: right;
padding: 10px;
}
.items_hidden {
position: absolute;
right: 0;
top: 20px;
display: none;
margin-top: 7px;
list-style: none;
z-index: 2000;
width: 80px;
border: 1px solid #f2f2f2;
text-align: left;
padding: 10px;
color: #333;
line-height: 30px;
border-bottom: 3px solid #f2f2f2;
}
input {
width: 100%;
}
.items:hover .items_hidden{
display: block;
}
<div class="header">
<div class="items">
<div class="item">
<span>Caption</span>
</div>
<ul class="items_hidden">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<input type="text">
Live JSFiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/
Couldn't it be done via pure css?
https://www.w3schools.com/howto/howto_css_dropdown.asp
Maybe this would help.
.navigation {
width: 100%;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
}
.mainmenu a:hover {
background-color: #D90000;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 400px;
}
.submenu{
max-height: 400px;
}
.submenu a {
background-color: #FF4D4D;
}
.submenu a:hover {
background-color: #D90000;
}
.submenu{
overflow:hidden;
display:none;
}
<nav class="navigation"><!-- pocetak navigacije -->
<ul class="mainmenu">
<li>Link</li>
<li class="start">Link
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Home</li>
</ul>
</nav>
To take up the comment of CBroe: The problem seems to be the "gap" between the and the element. To remove it you could either
give the "item"-Element a height so that it "reaches down" to the ul-element or
or remove the margin-top of the ul-element
This error is part of my nav bar (below):
<nav>
<ul>
<div class="vr"></div>
<li><a href="index.html" >Welcome</a></li>
<div class="vr"></div>
<li><a href="services.html" >Services</a></li>
<div class="vr"></div>
<li>Guestbook</li>
<div class="vr"></div>
<li><a href="locations.html" >Locations</a></li>
<div class="vr"></div>
<li>Contact Us</li>
<div class="vr"></div>
</ul>
And is styled with (below):
nav {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 20px;
background-color: rgba(7, 7, 8, 0.85);
border: 1px solid white;}
ul {
list-style-type: none;
position: relative;
right: 10px;}
li {
display:inline-block;
width: 19%;
margin:auto;
text-decoration: none;
font-size: 1.2em;}
a{
color: white;
font-size: 1.2em;
text-decoration: none;}
.vr{
display: inline-block;
width: 1px;
background-color: white;
height: 20px;
margin: auto;
position: relative;
top: 1px;}
Which creates a vertical line effect between each nav item.
Note: I tried to post a picture of the navbar effect but as this is my first post I don't have enough reputation, but I will email to anyone if you can help
My question is does anyone know how to replicate this without causing the validation error?
Element <div> not allowed as child of element <ul> in this context.
Alternatively, you could just axe the extra markup and place the .vr line styles directly on
the <li> like so
li {
border-left: 1px solid white;
}
# http://jsfiddle.net/cYxvw/
Place the inside the list elements like so:
<ul>
<li><div class="vr"><a href="index.html" >Welcome</a></div></li>
<li><div class="vr"><a href="services.html" >Services</a></div></li>
<li><div class="vr">Guestbook</div></li>
<li><div class="vr"><a href="locations.html" >Locations</a></div></li>
<li><div class="vr">Contact Us</div></li>
</ul>
I've looked at all of the questions already posed on this subject, but can't find anything wrong with my coding. I need another person's eye to find what's wrong. There must be something I am just not seeing, as I've successfully made drop down menus before...
Here is my html5 coding for my menu:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
And here is my CSS styling that is attempting to make a drop down menu:
/**** Main Menu ****/
#menu {
background-image: url(../images/paintbanner.png);
height: 55px;
width: 793px;
margin-left:125px;
margin-top: -25px;
}
#menu ul a {
color: #f7f5f1;
}
#menu ul a:hover {
color: #635ccb;
}
#menu ul {
margin-left: 75px;
}
#menu ul li {
float: left;
margin-right: 60px;
font-family: "Bell MT",
serif;
font-size: 1.1em;
margin-top: 20px;
}
#menu ul ul {
display: none;
position: absolute;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul li {
float: none;
margin-top: 0;
margin-right: 0;
position: relative;
background-image: url(../images/dropdown.png);
height: 100%;
width: 120px;
}
#menu ul ul a {
color: #1e1b1b;
font-size: .9em;
}
You closed a <li> before I think you meant to. Look here:
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
Should probably be:
<li>
Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
This happens because the li:hover should enable <ul> with display:block's out of <li>
Try this:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
example: http://jsfiddle.net/9zfsr/
I've programmed a css dropdown menu that seems to be working correctly in every browser but Internet Explorer (at least in IE7).
Here's a link to a picture of how it looks when it behaves correctly (not enough rep to post pictures yet):
http : // img535imageshack.us/i/chromeexample.png/
Here's a link to how it looks in IE:
http : // img299.imageshack.us/i/ieexample.png/
If you want to view the whole website, it's at urbanpromise.org
Here's the css menu coding:
.menu{
width: 40em;
height: 2em;
background: #63089C;
float: left;
font-family: helvetica, arial, sans-serif;
}
.menu ul{
list-style: none;
float: left;
padding: .4em .75em;
margin: 0;
text-align: center;
font-weight: bold;
color: white;
}
.menu a{
text-decoration: none;
color: white;
}
.menu ul:hover{
color: black;
background: white;
}
.menu a:hover{
color: black;
background: white;
}
.menu ul ul{
position: absolute;
z-index: 500;
text-align: left;
}
div.menu ul ul{
display: none;
font-weight: normal;
}
div.menu ul li:hover ul{
display: block;
background: #63089C;
border: 0px solid black;
border-width: .125em 0;
}
Thanks in advance for the help.
Edit: Here is the HTML code for the menu:
<div class="menu">
<ul>
<li><span class="h2">Home</span></li>
</ul>
<ul>
<li>Information <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>Staff and Board</li>
<li>History and Mission</li>
<li>Media</li>
<!--<li>Speaker Information</li>-->
<li>Contact Us</li>
</ul>
</li>
</ul>
<ul>
<li>Calendars <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>UrbanPromise School</li>
<li>Summer/Afterschool</li>
<li>Volunteer/Supporter</li>
</ul>
</li>
</ul>
<ul>
<li>Programs <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>StreetLeader</li>
<li>Afterschool Programs</li>
<li>UrbanPromise School</li>
<li>Summer Camps</li>
<li>Internship</li>
</ul>
</li>
</ul>
<ul>
<li>Get Involved <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>Donate</li>
<li>Volunteer</li>
<li>Workgroups</li>
<li>Store</li>
</ul>
</li>
</ul>
<ul>
<li> Blog
</li>
</ul>
</div>
I tried adding display: inline to .menu with no effect, and when I added it to .menu ul or added it to both this was the result in IE7:
http://img830.imageshack.us/img830/9855/ieresult.png
Edit #2: SOLUTION: I fixed the problem using someone's project on Google Code that uses javascript to make IE behave like a more standard browser. Here's a link!
http: //code.google.com/p/ie7-js/
You probably have either a double margin float bug or a collapsed parent with floats bug.
I'd add display: inline; to .menu and/or .menu ul.
This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance.
Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML style="zoom: 100%; ">
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY class="bodyclass" style="background:#BCE2F1; height: 100%;">
<DIV id="maincontainer" style="min-height: 100%;">
<STYLE type="text/css">
#cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
#cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid;
background-color: white; text-align: center; }
#cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; }
#cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; }
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; text-decoration: none; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 15px; }
#cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; }
/* #cssdropdown a { color: #CCE9F5; } */
#cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: white; }
#cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; }
</STYLE>
<SCRIPT language="JavaScript">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</SCRIPT>
<DIV class="navigation_box" style="border: none;">
<DIV class="innercontent">
<DIV style="background: white; float: left; padding: 5px; border: solid 1px black;">
LOGO
</DIV>
<DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;">
<SPAN>Logged in as user#example.com</SPAN><BR>
<UL id="cssdropdown">
<LI class="headlink">
One
<UL style="display: none; ">
<LI>Option One</LI>
<LI>Option Two</LI>
<LI>Option Three</LI>
<LI>Option Four</LI>
</UL>
</LI>
<LI class="headlink">
Two
<UL style="display: none; ">
<LI>Option Two-One</LI>
<LI>Option Two-Two</LI>
<LI>Option Two-Three</LI>
</UL>
</LI>
<LI class="headlink" style="width: 80px;">
Three
</LI>
<LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;">
<FORM action="http://localhost:3000/search" method="post">
<P>
Search:
<INPUT id="searchwords" name="searchwords" size="20" type="text" value="">
<INPUT name="commit" type="submit" value="Find">
</P>
</FORM>
</LI>
<LI class="headlink" style="width: 60px;">
Four
</LI>
<LI class="headlink" style="width: 60px;">
Logout
</LI>
</UL>
</DIV>
</DIV>
</DIV>
<DIV id="contentwrapper" style="clear:both">
<DIV class="innercontent" style="margin: 0px 20px 20px 20px;">
<H1>Some test content here to fill things out a little bit.</H1>
</DIV>
</DIV>
</DIV>
<DIV id="footer" style="clear: both; float: bottom;">
<DIV class="innercontent" style="font-size: 10px;">
Copyright 2008-2010
</DIV>
</DIV>
</BODY>
This is a pretty bad case of unnecessary Javascript to do what can be done via CSS itself. One way or another all you have to do is change:
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;}
to:
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;position:absolute;}
Here's an example of an extremely simple and clean drop down menu. Hope it helps you out a bit. I added a lot of comments to help you figure out what the CSS is doing to the HTML.
<style type="text/css">
/* Get ride of default margin's and padding */
ul, li {
margin: 0;
padding: 0;
}
/* Display parent unordered list items horizontally */
ul li {
float: left;
list-style: none; /* Get rid of default Browser styling */
margin-right: 10px; /* Add some space between items */
}
/* Hide inset unordered Lists */
ul li ul {
display: none;
}
/* Un-Hide inset unordered Lists when parent <li> is hovered over */
ul li:hover ul {
display: block;
position: absolute;
}
/* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
ul li:hover ul li {
clear: left;
}
</style>
<ul>
<li>
Link 1
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
<li>Link 1.4</li>
<li>Link 1.5</li>
<li>Link 1.6</li>
</ul>
</li>
<li>
Link 2
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
<li>Link 2.5</li>
<li>Link 2.6</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
<li>Link 3.4</li>
<li>Link 3.5</li>
<li>Link 3.6</li>
</ul>
</li>
</ul>