I want to center a menu without centering sub-menu, this is my code:
<ul class="drop_menu">
<li>Home</li>
<li>hhh
<ul class="sub_drop_menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
this is the css that i'm using :
.drop_menu {
list-style-type:none;
height:30px;
}
.drop_menu > li {
float:left;
font-weight: bold;
font-size: 16px;
}
ul.drop_menu > li {
text-align: center;
}
add this css to your code hope it will work
.sub_drop_menu li {
text-align: left;
}
HOW CSS WORKS
"Cascading" Style Sheets.
a "Rule" - a selector and then 1 or more "declarations" of property and value.
.your-selector {
property: value;
}
Read it from right to left...
.menu li {
text-align: center;
}
"Any (and all) li - within .menu --- text-align: center;
So this means your .sub-menu's li are going to be text align center, because it is an li within .menu. --- you make the rules.
You can do one of two things in this situation.
.sub-menu li { /* this overrides the "cascading" rule from before */
text-align: right;
}
or
.menu > li {
text-align: center;
}
Which would mean, all li in the first tier --- the first children of .menu
Here is a jsFiddle
Related
I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
Home
Contact
How can I align these tags side by side?
either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)
h1 {
float: left;
margin-right: 10px;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
nav {
display: flex;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
try this:
{
display: inline-block
};
Ideally, you might benefit from a review of your markup.
Certainly you shouldn't be using multiple <h1> elements within a single document.
The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.
Whenever you want to change the visual presentation of an element, you will use CSS.
HTML Structure
If you are building a navbar, then you can use:
<ul> - an unordered list
and nest this inside a:
<nav> - a navigation element
CSS Presentation
Once you have a structure like the outline above, there are multiple ways to align elements side-by-side:
nav ul { display: flex; }
nav ul { display: table; }
nav ul li { float: left; }
nav ul li { display: inline-block; }
When starting out, one of the simplest ways is to use the last option immediately above:
nav ul li {
display: inline-block;
}
Working Example:
nav {
background-color: rgb(191, 0, 0);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
width: 96px;
height: 48px;
line-height: 48px;
text-align: center;
}
nav ul li a {
font-family: sans-serif;
color: rgb(255, 255, 255);
font-weight: 900;
}
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
i have some css to align two parts of a list item to the left and right side like so :-
ul li div.left {
float:left;
}
ul li {
text-align:right;
}
<ul>
<li><div class="left">On the left</div>On the right</li>
</ul>
Is it possible to extend the above to add one more part that aligns to the bottom left below the left and right parts?
i have tried :-
<li><div class="left">On the left</div>On the right<p><div class="left">At the bottom<div></p></li>
but it doesnt render correctly
You will need to modify your HTML structure like I've done below and then style accordingly to create the sort of a layout which you want.
Here's a working demo:
ul {
padding: 0px;
}
ul li {
list-style-type: none;
}
ul li.left {
float: left;
}
ul li.right {
float: right;
}
ul li.center {
text-align: center;
}
.block {
overflow: hidden;
}
<ul>
<div class="block">
<li class="left">On the left</li>
<li class="right">On the right</li>
</div>
<li class="center">centered underneath</li>
</ul>
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 have the following css:
#nav ul li {float: left; margin-right: 10px; }
#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;}
#nav ul li a:hover { background-color: #ea8206;}
This works as expected. What I would now like to do is have a class like this:
a.active { background-color: #ea8206;}
Which I would like to assign to whichever menu item is selected on a page, but this is not working.
I assume it's to do with precedence, and have tried various combinations of:
#nav ul li a.active {background-color: #ea8206;}
I think I am just struggling with the right combination.
And the HTML is:
<div id="nav">
<ul>
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
Could anyone point me in the right direction?
Many thanks
Here's a fiddle : http://jsfiddle.net/moonspace/aKLUS/
This is all about specificity...
As you've already referred to 'a' classes in the CSS but prefixed them with '#nav ul' these will override a simple 'a.active' definition. So, add the '#nav ul' before a.active (as per the fiddle) and it'll work . . .
#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;}
#nav ul li a:hover { background-color: #ea8206;}
#nav ul li a.active{ background-color: red; }
More useful stuff here : http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I use the following HTML program for creating Horizontal menu bar with horizontal sub menu.It was working fine in Fire Fox and Chrome but it doesn't work in IE.So What are the changes are need changes in this program?
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
do you use modernizr? or have available classes for legacy IE browsers? You might want to try messing with separate styles and/or stylesheets for IE.
Or
You can switch your navigation from floated blocks to "inline" elements, which older browsers such as IE6 that don't work well with floats will recognize.
Or
If you want to stick with floats then make sure you are setting a "width" for any floated element.
Chris Coyier has a nice article on floats that contains a section labeled: "Problems with Floats"
http://css-tricks.com/all-about-floats/
Well for some reason I can't even get the fiddle site to work at all in IE8...? But one problem I noticed in your CSS, is opacity. IE8 doesn't support the opacity property. To change the opaqueness of elements in old IE, use filter:alpha(opacity=75); Note, the value 75 is a whole number from 1 to 100, not a decimal like with the opacity property. I wish I could be more help, but I can't even see what the problem is in the fiddle...