Please see the capture. As you can see the first pulldown menu works properly, the sub-menu did show up and it displays in horizontally but not listing vertically.
CSS Code:
#topbanner {
width:100%; height:25px; margin:0;position:relative;background-color:#4c4e5a;display: block;}
.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { margin: 0; padding: 0; border: none; outline: none; }
.rightmenu { float: right; }
.rightmenu li a{
display: block; padding: 0 14px; margin: 3px 0;color: #f3f3f3;background-color: #4c4e5a;}
.rightmenu ul {
position: absolute;
opacity: 0;
background-color: #4c4e5a;
left: auto;
right:0;
width:180px;
}
.rightmenu ul ul {
position: absolute;
opacity: 0;
right: 100%;
top: 0%;
background-color: #4c4e5a;
width:180px;
}
.rightmenu li:hover > a { color: #8fde62; }
.rightmenu li:hover > ul { opacity: 1; }
.rightmenu ul li{
height:0;
overflow:hidden;
padding: 0;
}
.rightmenu li:hover > ul li {
height: 25px;
overflow: visible;
padding:0;
}
.rightmenu ul li a {
white-space: nowrap;
border: none;
}
I have omitted some styling in order to make the code short for you. (like shadow, border style, and round corner)
You are gonna wanna throw a
clear: both
on your ul ul li
Related
I'm having troubles with my horizontal menu-bar list items overlapping.
So the ul ul li of the nav div elements overlap, what can I do to stop that?
The jsfiddle
CSS:
body, html{
padding: 0px;
margin: 0px;
}
.nav {
font-family: 'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0;
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav{
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li{
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover{
background: #0d47a1;
}
.nav ul ul{
overflow:visible;
position: absolute;
visibility: hidden;
top: 100%;
width: 0%;
}
.nav ul ul li{
border:none;
display:block;
position: absolute;
left:0;
margin:0px;
}
.nav ul li:hover>ul{
visibility: visible;
}
.nav a{
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child{
border-bottom: 3px solid #0d47a1;
}
<div class="nav">
<ul>
<li><a>Hi there</a><ul><li><a>Here is the awesomeness</a></li>
<li><a>Awesome</a></li>
</ul>
</div>
fiddle Here are some modification in your code:
.nav ul ul li {
border: medium none;
display: block;
/*left: 0;*/
margin: 0;
/*position: absolute;*/
}
.nav ul ul {
overflow: visible;
position: absolute;
top: 100%;
visibility: hidden;
/*width: 0;*/
}
you can add below css not to wrap your text in 2 lines:
.nav ul ul {
white-space: nowrap;
}
Try like this Demo
CSS:
.nav ul li > ul {
position: relative;
display:none;
}
.nav ul ul li {
border:none;
display:block;
position: relative;
left:0;
margin:0px;
}
.nav ul li:hover>ul {
display:block;
}
body, html {
padding: 0px;
margin: 0px;
}
.nav {
font-family:'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0;
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li {
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover {
background: #0d47a1;
}
.nav ul li > ul {
position: relative;
display:none;
}
.nav ul ul li {
border:none;
display:block;
position: relative;
left:0;
margin:0px;
}
.nav ul li:hover>ul {
display:block;
}
.nav a {
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child {
border-bottom: 3px solid #0d47a1;
}
<div class="nav">
<ul>
<li><a>Hi there</a>
<ul>
<li><a>Here is the awesomeness</a>
</li>
<li><a>Awesome</a>
</li>
</ul>
</li>
</ul>
</div>
I have a drop down menu and when you hover over an option it shows the submenu, but then when you move the cursor down; sometimes the rest of the menu will hide. I have noticed there is a little bit of space (margin? border?) underneath that I am assuming is the culprit unless someone can tell me differently.
Below is an image to show what I mean; there is a small gap between the two options and I am assuming when you make the cursor go over that point it comes off "hover" and hides it
Any help would be greatly appreciated.
.menu ul { margin = ..;}
The above code makes the margin bigger, however even when it is set to 0 it still seems to be there..
This is my HTML for the menu
<td align="center" bgcolor="#666666">
<div class="menu" align="center">
<ul>
<li>Bar Equipment
<ul>
<li>Tills</li>
<li>Bar Furniture</li>
<li>Bar Sundries</li>
...
</div></td>
This is the Css for the menu class
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
margin: 0px;
text-align: center;
background: #efefef;
padding: 0px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration:none;
}
.menu ul ul {
background: #efefef;
padding: none;
position: absolute;
top: 100%; /* ?? */
}
.menu ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
see the jsfiddle: http://jsfiddle.net/p1kuzzdo/
try this css:
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
background: none repeat scroll 0 0 #efefef;
height: 50px;
line-height: 50px;
margin: 0;
padding: 0;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
height: 50px;
line-height: 50px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding: 0 10px;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #757575;
display: block;
text-decoration: none;
}
.menu ul ul {
background: none repeat scroll 0 0 #efefef;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
border-bottom: 0 solid pink;
border-top: 0 solid #6b727c;
float: none;
margin: 0;
padding: 0;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
i have this css code for my responsive css menu:
nav, ul, li, a {
margin: 0; padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
but i cannot get the menu items to align in the centre of the menu/page
here is a fiddle with the full code:
http://jsfiddle.net/5Z2QV/
Is THIS FIDDLE what you want?
If so, then you have to remove float from the lis and add display: inline-block to them. Then you have to add text-align: center to the .nav
.nav {
list-style: none;
background:#f36f25;
text-align: center;
border-top: 1px solid #104336;
}
.nav > li {
display: inline-block;
}
I also removed border-top from the li and put it in the .nav to remove the gaps between lis.
EDIT:
To keep sub-menu items aligned to the left, add this CSS:
.nav li {
text-align: left;
}
EDIT2:
You don't need this adjustMenu() javascript function. You can use media queries. Modify your #media section a bit. Add this style:
.nav {
border-top: none;
}
and replace style for .nav > li with this:
.nav > li {
display: block;
border-top: 1px solid #104336;
}
Also, I noticed that in the small range of resolution, one menu item breaks into new line. To prevent this, you can add this style to the .nav
white-space: nowrap;
overflow: hidden;
Here's the update fiddle: http://jsfiddle.net/5Z2QV/9/
Below is the code that I am writing in HTML and I'm getting what I want perfectly in FF, Opera. My friend is able to run in IE too but I'm not... Also I am not able to see output Chrome. Any reason??
<html>
<head>
<style>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
visibility: visible;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li>cat1<ul class="jaccordion">
<li>cat1.1<ul class="jaccordion"></ul></li>
<li>cat1.2<ul class="jaccordion">
<li>cat1.2.1<ul class="jaccordion">
<li>cat1.2.1.1<ul class="jaccordion"></ul></li></ul></li></ul></li>
<li>cat1.3<ul class="jaccordion"></ul></li>
</ul></li>
<li>cat2<ul class="jaccordion">
<li>cat2.1<ul class="jaccordion"></ul></li></ul></li>
</ul>
</body>
</html>
Thanks in advance...
You have a lot of duplicate styles in your css. Try to eliminate those. Especially the uls have a lot of rules which override each other. Try to use classes for the different levels of your uls to make to rules more specific.
EDIT:
all the css code you need: (test it)
#nav, #nav ul {
line-height: 1.5em;
list-style:none; /* <- shorthand declaration is enough */
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 80px; /* <- This defines the width, no need to declare elsewhere */
}
#nav ul {
display: none;
left: 100%; /* <- % makes you indepentent of declared with in li*/
position: absolute;
top:0;
}
#nav li:hover > ul{
display:block; /* <- does all the hovermagic for you, no matter how many ul-levels you have */
}
for several reasons, this code wont work in IE 6 (if you need to support it, you need some really nasty workarounds)
Part of the issue is that you have not declared a doctype in your HTML. No declared doctype will put IE into quirksmode and then it behaves differently than what you're expecting.
You're going to want to place <!DOCTYPE html> at the top of your document.
Quirksmode Explanation
Additionally I think there are a many robust solutions available that will work a little better than yours. As previously mentioned you have many duplicate styles declared, which is likely also causing you issues.
A quick google search game up with the following solution which works really well.
CSS3 Dropdown Menu
I did a quick modification of the code there and applied it to yours. Not sure if this will do exactly what you're looking for, but it's a start.
<style>
#nav {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.5em;
}
#nav li {
position: relative;
width: 100px;
}
/* main level link */
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
visibility: visible;
}
#nav a:hover {
background: #ffffff;
color: #333333;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top: 0;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
</style>
Hope that helps!
I have looked long and hard for the error in my CSS. I can't find it, I am sure it is something obvious, I just cant figure out what it is! The problem is i have a element. #nav li ul, that has a left margin that shouldn't exist. setting it's margin: 0px; doesn't work. Here is the CSS code and the html is located at http://www.letsmine.info/Sundalah. The #nav is the menu, I have only worked on the index, so don't bother browsing the other pages.
#nav {
height: 39px;
margin: 0;
width: auto;
}
.mainmenu {
background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent;
height: 39px;
line-height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 1024px;
}
#nav li, #nav li a {
display: block;
height: 39px;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
#nav li ul {
background-color: #F2EAD5;
box-shadow: 3px 3px 3px #CC8930;
color: #2A8AC6;
float: none;
font-family: "Arial";
font-size: 19px;
margin-top: 8px;
opacity: 0.9;
text-align: center;
}
body.index #nav li.menu1 {
width: 118px;
}
body.index #nav li.menu1:hover {
width: 118px;
}
body.index #nav li.menu2 {
width: 212px;
}
body.index #nav li.menu3 {
width: 161px;
}
body.index #nav li.menu4 {
width: 174px;
}
body.index #nav li.menu5 {
width: 193px;
}
body.index #nav li.menu6 {
width: 166px;
}
body.community #nav li ul {
background-color: #AECEAB;
}
body.kids #container #nav li ul {
background-color: #89BAB7;
opacity: 0.8;
}
body.market #nav li ul {
background-color: #FFD0CE;
}
body.sundays #nav li ul {
background-color: #E7DAB2;
}
body.index #nav li ul {
background-color: #E7DAB2;
}
body.contacts #nav li ul {
background-color: #E7DAB2;
}
#nav li ul li a:link {
text-decoration: none;
}
div#container div#nav li ul#sundays li {
width: 211px;
}
div#container div#nav li ul#market li {
width: 161px;
}
div#container div#nav li ul#kids li {
width: 174px;
}
div#container div#nav li ul#community li {
width: 193px;
}
#nav ul {
position: absolute;
top: 30px;
visibility: hidden;
}
#nav li:hover ul {
visibility: visible;
z-index: 9999;
}
#nav li:hover {
opacity: 1;
}
#nav li:hover ul li a:hover {
opacity: 1;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#nav #holder ul li {
display: inline;
}
Assuming that you're talking about this page:
http://www.letsmine.info/Sundalah/
(I found a highly likely link on a previous question of yours)
The reason that margin: 0 is not working is because it's not margin - it's padding. This will fix it:
#nav li ul {
padding: 0
}