I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
Related
I am trying to make a navigation bar with drop down menus. I've created the navigation bar and used bootstraps "pull-left" class to move it to the left. But the dropdown menu I have created using jQuery is now also moved the left since the HTML code is contained in the div marked as "pull-left" I have googled and tried out stuff for a few hours, but I couldn't quite find a solution.
The HTML for the Navigation bar
<div id = "nav">
<div class = "container" >
<div class = "pull-left ">
<img class = "logo-image" src = "Logo2.png" />
</div>
<ul class = "pull-left">
<li class "logo">Home</li>
<li>About</li>
<li>
Projects
<ul>
<li>Stealth Game </li>
</ul>
</li>
<li>Gallery</li>
<li>Tutorials</li>
</ul>
<ul class = "pull-right">
<li> Follow me</li>
</ul>
</div>
The CSS
#nav li{
display:inline;
padding-right : 5px;
}
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
#nav li li {
float: auto;
}
#nav li a {
width:150px;
display: inline-block;
text-align:center;
color:#000;
margin-right:5px;
height:35px;
line-height:35px;
text-decoration:none;
font-size:80%;
border:1px solid #ccc;
}
#nav ul{
list-style-type:none;
margin:0;
padding:0;
}
#nav li li a {
background:#EBE7E6!important;
text-align:left;
height:auto;
line-height:1;
width:150px;
padding:8px 20px 8px 22px;
border:1px solid #D0D0D0;
border-top:none;
margin-right:0;
}
And the JavaScript
$(document).ready(function() {
$("#nav li:has(ul)").hover(function(){
$(this).find("ul").slideDown();
}, function(){
$(this).find("ul").hide();
});
});
So the actual problem is, that the submenu, that is appearing doesn't appear under the menu it is opened from, but is also pulled to the left since I used this bootstrap class to move my navigation bar to the left.
Two things resolve this:
#nav li {
display:inline-block;
...
}
#nav ul ul {
position:absolute;
...
}
Demo
You have:
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
The position:fixed on the submenu is probably what is giving you positioning problems.
edit:
you want to use position: absolute instead.
another edit, set position: relative on the parent LI, you will also need to set the display to block and because they are no longer inline elements you will want to float them left:
#nav li{
position: relative;
display: block;
float: left;
padding-right: 5px;
}
Fiddle with this working: https://jsfiddle.net/DTcHh/
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
I'm doin' a navigation bar for a website. I created it etc. but when I go to one of the sub menu's it disappears..
here's my HTML:
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
and my CSS:
/* nav */
nav{
text-align:center;
}
nav a:visited{
color:black;
}
nav a{
text-decoration:none;
color:black;
}
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
border:1px solid black;
margin-left:10px;
margin-top:5px;
border-radius:4px;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
color:orange;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:6px;
margin-right:1px;
padding: 2px;
}
/*#menu, #menu ul {
margin:0 auto;
padding: 0;
}*/
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
and a little JSFiddle for ya: http://jsfiddle.net/nv741s01/
If you hover your mouse over a menu option [that has a sub-menu] long enough and then do it, it works, but people won't be willing to wait three seconds every time they want to visit a sub menu, so how do I resolve it so that it works as soon as you go to it?
any help would be much appreciated, thanks in advance :)
It was because there was a little gap between the sub menu and the menu, here is the fixed JSFiddle:
http://jsfiddle.net/nv741s01/3/
And here is what I changed:
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top: 1px;
margin-right:1px;
padding: 2px;
}
I changed the margin-top to 1px.
The margin of an element doesn't capture hover events. Use padding instead. Make these changes:
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
padding-left:10px;
padding-top:5px;
margin:0;
}
/* add this rule */
#menu li a {
border:1px solid black;
border-radius:4px;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:0px;
margin-right:1px;
padding: 2px;
}
Fiddle: http://jsfiddle.net/nv741s01/2/
You are using margin to position the submenu away from the main item. Since margin isn't part of the actual element it doesn't trigger any hover behaviours. Instead, use padding on the child ul element, since padding is actually considered part of the child's box. This will make the hover behaviours trigger consistently when moving the mouse from parent to child.
You also describe that there's a 3 second delay somewhere - that's impossible from this code, and I cannot reproduce it obviously.
Your dropdowns are disappearing because as you move your mouse cursor down, there's a gap between the parent menu item and the child menu item.
When the mouse leaves the parent li space, it no longer applies to the hover state, and so the CSS rule is ignored, leaving the child menu hidden.
If it helps, I tend to use a combination of margins and padding, to 'bump together' the parent and child menus, to help navigation.
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
Have a look at http://www.habitatlandscape.co.uk/
In Firefox and even Internet Explorer (!!!) the pop-up menus appear perfectly, vertically centered in the white strip, and always starting on the far-left-hand-side.
In Chrome, the menus start horizontally under the parent li, and are not centered vertically. I can fix the vertical alignment by targetting webkit with a different position, but I can't fix the horizontal alignment.
Why is Webkit ignoring position:absolute;left:0;?
CSS:
#header #menu
{
margin:0;
padding:0;
}
#header #menu ul
{
list-style-type:none;
margin:0;
padding:0;
margin-top:28px;
height:24px;
}
#header #menu ul li
{
display:inline;
position:relative;
}
#header #menu ul li a
{
display:block;
float:left;
padding:7px;
padding-bottom:3px;
background:#fff;
margin-right:5px;
text-decoration:none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family:'museo', serif;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding-left:12px;
padding-right:12px;
background:#01973D;
position:relative;
z-index:2;
}
#header #menu ul li:hover a
{
background:#00BB4A;
}
#header #menu ul li ul
{
clear:both;
display:none;
position:absolute;
top:39px;
width:700px;
margin:0;
padding:0;
}
#header #menu ul li ul li
{
display:block;
}
#header #menu ul li ul li a
{
background:#fff !important;
color:#000;
font-weight:normal;
padding:7px;
padding-left:11px;
color:#01973D;
padding-top:10px;
margin:0;
float:left;
}
#header #menu ul li ul li a:hover
{
color:#000;
}
#header #menu ul li:hover ul
{
display:block;
}
HTML (CMS-generated):
<div id="menu">
<ul>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a>
<ul>
<li><span>Company History</span></li>
<li><span>Meet The Team</span></li>
</ul>
</li>
<li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a>
<ul>
<li><span>View before, during and after photos from recent projects</span></li>
</ul>
</li>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a>
<ul>
<li><span>Design</span></li>
<li><span>Patios</span></li>
<li><span>Decking</span></li>
<li><span>Turf</span></li>
<li><span>Ponds</span></li>
<li><span>Driveways</span></li>
<li><span>Fencing</span></li>
<li><span>Electrics</span></li>
<li><span>Structures</span></li>
</ul>
</li>
</ul>
// etc
</div>
You've created a mess by display:inline-ing your <li> elements but display:block-ing your <a> elements.
In HTML, it's invalid to nest a block-level element in an inline element:
<span><div>FAIL</div></span>
When you do something like this, you're going to have cross-browser problems. The same goes if you use CSS to change the display property:
<div style="diplay:inline"><span style="display:block">STILL A FAIL</span></div>
Which is what you've done:
#header #menu ul li {
display: inline;
/* ... */
}
#header #menu ul li a {
display:block;
/* ... */
}
That behavior is more or less undefined as far as the specs are concerned (since it makes no sense) so the browser reserves the right to do something insane or ridiculous - which is what you're seeing. It works in Firefox only because you're getting lucky and it works in Internet Explorer because Internet Explorer is inherently insane and ridiculous.
If you want those <li> elements to stack horizontally, float:left them instead of inlining them. Then you can display:block your <a> element without issue. Once that's done you'll still have to switch up which elements are position:relative;-ed, and probably add a left:0 somewhere.
Here's an example of your current issue on jsfiddle, and here's an example of my suggested fix on jsfiddle, which involves positioning the #header #menu ul element relatively instead of the #header #menu ul li.
When I gave the #header #menu ul li a display:inline-block; it fixed it. It also changed the result of the hidden ul's top positioning, which should be 24px to match the height if the button anyways, right?