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>
Related
How can I fix the width of the dropdown menu items?
.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}
.menu ul {
max-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
One
<ul class="menu vertical">
<li>One One One One One very long title</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
As you can see I have fixed the dropdown menu items to 200px but the item with the long text is running outside the box. How can I fix the width so that the text is always inside the box? What is the correct way doing it? If the text is very long, then it should break the text into multiple lines.
Is this possible?
Try adding this class "ul.vertical li a"
and add title to the a tag
.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}
ul.vertical li a {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden!important;
text-overflow: ellipsis;
}
.menu ul {
max-width: 100px;
}
.dropdown.menu>li.opens-right>.is-dropdown-submenu{
min-width: 100px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
One
<ul class="menu vertical">
<li>One One One One One very long title</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
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
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>
When the menu "product" is clicked or mouse over, the another list of menus appear.. but the image block which is below the menu bar, moves away from the position. if i use css [ position:absolute;], then the image box remains static and the product's sub-menu overlaps the image block, which is what i wanted. but the image blocks width & height settings change drastically, thereby spoiling the alignment.
pls chk the codings in jsFiddle
.home_menu {
border: 1px solid black;
width: 98%;
height: 3.3%;
margin-right: auto;
margin-left: auto;
}
div#menuDemo {
clear: both;
//border:1px solid black;
height: 78%;
width: 100%;
position: relative;
left: 0;
top: 0;
background-color: #A55927;
/*Remove this next one in production - Used for demo purpose only*/
margin-bottom: 0.1%;
padding-top: 0.7%;
z-index: 4;
}
div#menuDemo ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #A55927;
}
div#menuDemo > ul > li {
float: left;
text-align: center;
}
div#menuDemo ul li {
width: 25%;
//border: 5px solid purple;
}
div#menuDemo ul li a {
text-decoration: none;
font-weight: bolder;
text-align: center;
}
div#menuDemo > ul > li > ul {
display: none;
text-align: center;
}
div#menuDemo > ul > li:hover > ul {
display: block;
text-align: center;
}
.sub1 {
width: 100%;
//border:1px solid green;
}
.colouring {
color: black;
font-weight: bolder;
}
.colour {
//border:1px solid blue;
color: black;
text-align: center;
//width:100%;
}
.wrapper {
border: 5px solid pink;
width: 98.8%;
height: 82%;
margin-top: 1%;
z-index: 2;
}
.uniform_block {
border: 5px solid green;
width: 100%;
height: 40%;
cursor: pointer;
}
.uniform_block img {
width: 100%;
height: 100%;
}
<body>
<div class="home_menu">
<div id="menuDemo">
<ul>
<li id="homeMenu">About Us
</li>
<!-- <li >About Us</li> -->
<li>Products
<ul class="sub1">
<li> Uniforms
<ul>
<li>  
</li>
<li> Automobile Industry Uniforms
</li>
<li> Pharmaceutical Uniforms
</li>
<li> Food Industry Uniforms
</li>
<li> Government Sector Uniforms
</li>
<li> School/College Uniforms
</li>
<li>  
</li>
</ul>
</li>
<li>Shoes
<ul>
<li>  
</li>
<li> Industrial Shoes
</li>
<li> Safety & Security Shoes
</li>
<li> Executive Shoes
</li>
<li>  
</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="uniform_block">
<img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" />
</div>
<div class="home_footer">
<div class="footer_contents"></div>
</div>
</div>
</body>
kindly help. My requirement is, when i mouse over the "product menu", the drop down menu should be viewed above the image block which is below the menu bar.
Add position:absolute to the css of your ul menu (in your case, the sub1 class), and remove the width:100% so it can inherit the default width of its parent. Absolute positioning will prevent your browser from trying to put your ul element after the previous element on the page.
ul.sub1 {
position:absolute;
}
http://jsfiddle.net/C2YXp/2/
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.