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.
Related
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
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 followed a guide to make drop-down menus, even though I wanted them to pop to the right, instead of down. It doesn't work, though.
I'll put both CSS and HTML here.
Edit: Forgot that I can easily indent all the code in Vim, which makes it a LOT easier to copy all the text and get it in a code block.
JSFiddle Demo
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
{
padding-top: 1px;
float: none;
}
#menubox ul ul a
{
white-space: nowrap;
}
#menubox ul li a:hover
{
color: #FFB03B;
}
#menubox ul li:hover ul
{
left: 0;
}
#menubox ul li:hover a
{
text-decoration: none;
}
#menubox ul li:hover ul li a:hover
{
text-decoration: none;
}
div p
{
color: #FFF0A5;
text-align: center;
position: relative;
vertical-align: middle;
display: inline-block;
margin-top: 300px;
line-height: 60px;
}
div ul ul
{
}
#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;
}
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</li>
<ul>
<li>My music</li>
<li>The Joao Gilberto project</li>
</ul>
<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>
You are closing li tag before ul, but since the only valid child of a ul is li, you need to close it after.
<li>Music
<ul>
<li>My music</li>
<li>The Joao Gilberto project</li>
</ul>
</li>
Jquery + JqueryUI. Look at the documentation. I used to be all about pure css and html. Trying to minimize javascript as much as possible. But, with so many modern sites (Facebook,Google) using javascript,jquery, etc... extensively. I'm moving towards using javascript to do most of my work, and css as to only set format.
I have a very strange padding on my menu. The padding appears both on the top of the menu buttons and below the second level menu buttons.
I have experimented with all sorts of combinations of margins, borders and padding but I just cannot get rid of this extra bit of color!
*JUST A NOTE: people have recommended (and deleted their comment) I delete the CSS:
margin-top: -0.5em;
However, I would like this to stay put if possible.*
Unfortunately, I cannot post a picture as I need more reputation points (am a new to coding and even newer to Stackoverflow) but if anyone can take a look at my code below and see where I have gone wrong that would be great!
My HTML Code:
<ul id="menu" >
<li style="margin-left: 3em;">Home</li>
<li class="sub">
Our Services
<ul>
<li>Solar PV</li>
<li>Air Tightness Testing</li>
<li>Thermal Imaging</li>
<li>Wind Turbines</li>
<li>Energy Consultancy</li>
</ul>
</li>
<li>Recent Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
My CSS code:
#menu {
margin: 0;
padding: 0;
background: #201f5f;
height: 3em;
list-style: none;
font-family:arial;
}
#menu > li {
margin-right: 3em;
margin-top: -0.5em;
background:#201f5f;
vertical-align: bottom;
}
#menu > li > a {
height: 3em;
color: #ffffff;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
}
#menu > li > a:hover {
color: #41A044;
text-decoration: underline;
}
#menu > li.sub {
position: relative;
}
#menu > li.sub ul {
font-size:15px;
margin: 0;
padding: 0;
list-style: none;
background: #000000;
position: absolute;
top: -1000em;
width: 649px;
left:-87px;
}
#menu > li.sub ul li {
display: inline-block;
}
#menu > li.sub ul li a {
height: 100%;
display: inline;
float: left;
padding-left: 0.4em;
padding-right: 0.4em;
padding-top: 0;
padding-bottom: 0;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#menu > li.sub ul li a:hover {
background: #41A044;
text-decoration: underline;
position: relative;
}
#menu > li.sub:hover ul {
top: 2.15em;
}
#menu{
text-align:center;
}
li{
display:inline-block;
}
I thank you in advance for your help!
I removed a margin value you had set DEMO http://jsfiddle.net/gSCr4/4/
margin-top: -0.5em; //Removed