I'm trying to style some unordered lists and running into problems...it isn't affecting the output!
The example I can't get to change.
<div id="footer">
<div id="foot-nav">
<ul>
<li>home</li>
<li>site map</li>
<li>three</li>
</ul>
</div>
</div>
The CSS:
#footer #foot-nav ul.blah {
list-style-type: none;
}
#footer #foot-nav ul.blah li.blah {
padding:2px 0;
}
#footer #foot-nav ul.blah li.blah a {
color:#333;
text-decoration: none;
}
#footer #foot-nav ul.blah li.blah a:hover {
text-decoration: underline;
}
Another UL from the same page
.mobile-menu #mobile-menu-links ul{
list-style-type: none;
margin:0;
padding-left:3%;
}
.mobile-menu #mobile-menu-links ul li{
padding-bottom:2px;
border-bottom:1px solid #bababa;
}
<div class="mobile-menu" id="mobile-account">
<div id="mobile-menu-links">
<h4>General:</h4>
<ul>
<li>View your profile</li>
<li>Change your settings</li>
<li>View your messages</li>
</ul>
</div>
</div>
The rules from the #mobile-menu ul is taking preference with the ul from the top of the question?
I'm obviously doing something wrong, could you help? Thanks!
http://jsfiddle.net/GgdhX/
You're using a lot of descendant selectors for IDs and needless classes on LI elements.
#foot-nav .blah{
list-style-type: none;
}
#foot-nav .blah li{
padding:2px 0;
}
#foot-nav .blah li a{
color:#333;
text-decoration: none;
}
#foot-nav .blah a:hover{
text-decoration: underline;
}
<div id="foot-nav">
<ul class="blah">
<li>home</li>
<li>site map</li>
<li>three</li>
</ul>
</div>
#footer #foot-nav ul.blah
This selector applies to <ul> elements that have the blah class, which is a descendant of an element with an ID of foot-nav, which is a descendant of an element with an ID of footer.
Aside from the last part, your HTML matches that, so I would assume that the problem is that your #foot-nav element is not within an element with an ID of footer.
You can either remove #footer from all your selectors, or you can put your #foot-nav element within an element that has an ID of footer.
Edit:
Okay, in light of the changes to the question, either there's something wrong with the CSS that is stopping it from getting applied at all, or the CSS is being overridden.
Inspect the element in a web browser's developer tools to see if the rules are showing up at all. If they are, then they are probably being overridden by rules elsewhere on the page. If that is the case, then you should be able to see where the other rules are while you are inspecting the element.
If the rules are not being applied at all, then it's likely there's something wrong with your CSS. Have you run it through a validator to check to see if there are no syntax errors? Are the rules within a media query that isn't in effect?
If you remove all the #footer aspects of the selectors you have on there, everything should work perfectly. I made a jsfiddle of the working copy. Let me know if this is the UI concept you had in mind. Also, I suggest you read up on CSS Specificity to understand how rules are prioritized when applied to different nested elements
Related
I am building an AngularJS app. I am having the following difficulties styling the page. Here is a fiddle: https://jsfiddle.net/9ooa3wvf/
1) On hover I want to change the color of the nested li elements (Class name is nested). I have tried several different approaches, but nothing seems to work.
2) I want to vertically align the nested li elements in the center with the links About and Services. They are being aligned like so:
I want them to be aligned like so:
In the above picture, Our Team is not on the same line as About.
HTML
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
<ul>
<li class = "normal"> Home </li>
<li class = "subLi">About
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li class = "normal"> Contact </li>
</ul>
</div>
CSS
#buttonDisplayContent ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul a {
text-decoration:none;
color:#fff;
font-size:50px;
font-weight:bold
}
#buttonDisplayContent ul ul a {
text-decoration:none;
color:lightgray;
font-size:40px;
font-weight:bold
}
#buttonDisplayContent li {
margin-bottom:0.1%
}
.subLi{
margin:0px;
padding:0px;
list-style-type:none
}
.nested {
margin-left:0px;
display:inline
}
.nested li {
display:inline;
padding-bottom:6px;
padding-right:1%;
padding-left:1%;padding-top:8px
}
#buttonDisplayContent ul li:hover {
background-color:black
}
UPDATE
The following code solved the problem. I added a span on the li elements I wanted to vertically align.
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
<ul>
<li class = "normal"> Home </li>
<li class = "subLi">About
<span>
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</span>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li class = "normal"> Contact </li>
</ul>
</div>
CSS:
#buttonDisplayContent ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul a {
text-decoration:none;
color:#fff;
font-size:50px;
font-weight:bold
}
#buttonDisplayContent ul ul a {
text-decoration:none;
color:lightgray;
font-size:40px;
font-weight:bold
}
#buttonDisplayContent li {
margin-bottom:0.1%
}
span .nested li {
display:inline-block
vertical-align:middle
}
.subLi{
margin:0px;
padding:0px;
list-style-type:none
}
.nested {
margin-left:0px;
display:inline
}
.nested li {
display:inline;
padding-bottom:6px;
padding-right:1%;
padding-left:1%;padding-top:8px
}
#buttonDisplayContent ul li:hover {
background-color:black
}
Update:
There is one thing missing for perfect vertical alignment: line-height property! When not set, especially in a situation like that, with a lot of nested, inline, ULs and LIs, every browser can behave in an different way...
Here is a more clean version, trying to follow some best practices on creating a CSS:
Define default styles. I saw in your CSS You setting a bunch of times the same property and value, for the same element. All your ULs had list-style:none;, so why write 3 times the same thing? It's a lot easier write a default: ul{list-style:none} and then, if needed override this default: ul.ULThatIsVeryDifferent{list-style:circle outside none;}.
You will notice that I've set both UL and LI font-size and line-height properties together, even ULs doesn't respecting font-size. I made it because both properties are related in this scenario, so if you change the font-size for your LI, You would also change the line-height, and also, the UL's line-height. When everything is together, it's a lot easier to maintain.
In the :hover rules, You will notice that I've not used the a in the end of selector. Why it's not needed now? Because there is not any other more specific selector setting some color for our a. But only this will not make our links get colored properly. Why? Because as doesn't inherit some properties from its parents, and one of this properties is color. So, even We setting a color on LI, our link has naturally a more specific selector (defined by default by browser) setting a color. To override this behavior, You will see that in the first lines, I set some default properties for as, and one of them is color:inherit. Thus, when We change the color of our LI, our a will also get this new color.
Take a look with care in the updated JsFiddle, and how I've structured the CSS and properties.
If You have any other doubts, I'd be glad to help. Also, I'll be very happy if You think that my answer is now worthy of your upvote.
For reference, there is the last CSS proposed:
/*------- Defaults -------*/
*{
vertical-align: middle;
line-height: normal;
font-
}
ul{
list-style: none outside none;
padding: 0;
margin: 0;
}
li{
display:inline-block;
}
a{
text-decoration:none;
font-weight:bold;
color:inherit;
}
/*------- Parent List -------*/
div#buttonDisplayContent > ul,
div#buttonDisplayContent > ul > li{
font-size:34px;
line-height:34px;
}
div#buttonDisplayContent > ul > li{
display: list-item;
color:#eee;
}
div#buttonDisplayContent > ul > li:hover{
background-color:#000;
}
/*------- Nested Lists -------*/
div#buttonDisplayContent > ul > li > ul{
display: inline-block;
}
div#buttonDisplayContent > ul > li > ul,
div#buttonDisplayContent > ul > li > ul > li{
font-size: 14px;
line-height:14px;
color: #ccc;
margin: auto 10px;
}
div#buttonDisplayContent > ul > li > ul > li:hover{
color: yellow;
}
Original Answer:
1 - In your code, you set: #buttonDisplayContent ul ul a{color:lightgray;}. If We set .nested li:hover{color:yellow}, the most specific rule will be the first one, because it sets directly our a element, and also because its degree of specificity (how deep the selector goes). If We set .nested li:hover a{color:yellow;}, it also will not work, because of the degree of specificity again. Thus, We have two choices:
Use a more specific css selector: #buttonDisplayContent .nested li:hover a{color:yellow;}
Use the !important, to override any more specific css selector that doesn't use the !important too: .nested li:hover a { color: yellow !important; }.
Depending on your real situation can be a better/cleaner approach use a more specific selector, it's a good practice, but there is exceptions...
Also, Here is a great article about CSS Selector Specificity, really worth read it :) .
2 - Elements with display: inline; doesn't respect top and bottom margins and paddings, and cannot have a width and height set. (http://www.w3.org/TR/CSS21/visuren.html#inline-formatting). Thus, to make sure your settings of top and bottom paddings will be respected, but keeping the "inline behave" set display:inline-block.
From a great answer here of StackOverflow (CSS display: inline vs inline-block, and also What is the difference between display: inline and display: inline-block?):
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
Block elements:
respect all of those
force a line break after the block element
Inline-block elements:
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
Working JsFiddle here with suggested changes: https://jsfiddle.net/9ooa3wvf/18/
For first question use this,
.nested li a:hover{color:red !important;}
sorry to use !important as you already have color for that so.
For second point, can you please explain little bit more so i can update my answer and can give you solution...
Again sorry for one answer but little bit more detail and will give you answer asap..
I just added couple of lines of css and it seems to work
.nested li a:hover{
color:red !important;
}
Check this fiddle
Also add this css
ul li {
display: table-caption;
}
I have these nested ul and li . When i fill background color, nested li leaves indented portion white. I have a number of li like this that gets filled from database so i cannot give margin left to individual text in li . How can i do this so that background fills whole line along with the indentation?
Right now it looks like this
I want it like this
Any suggestions how can do this? Thanks in advance. I cannot change the html markup as i'll have to change a lot of code. Is there a way to do this using this markup. these li are coming from db query so i dont have exact number of li in this case.
Demo http://jsbin.com/uReBEVe/1/
By default, <ul> has padding-left to accomodate the bullet point.
If you add this to your CSS:
ul {padding-left:0}
ul>li {padding-left:40px}
You should get the effect you want.
EDIT: Also you need to correct your HTML :p <ul> can ONLY have <li> as children.
Best thing to do is to use a structure which makes it easy for database management , html and styling(CSS) .
HTML:
<body>
<ul class="main">
<li>1.</li>
<li><ul>2</ul></li>
<li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>
CSS:
.main{
position:relative;
right:40px;
}
li{
list-style:none;
background:red;
margin-top:1px;
}
Fiddle 1.
I dont know if ul not containing li is valid or invalid.If its invalid then you can use:
<body>
<ul class="main">
<li>1.</li>
<li><ul><li>2</li></ul></li>
<li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>
Fiddle 2
Flexible, Multi-Level Nesting Solution
This is very similar to another question I answered here, and I've composed a similar solution for you below. You will want valid html by having all nested li elements inside their own ul (as others have noted here), and it would be best to control all this by some class on the outermost ul (though that is not required, but makes targeting this list a whole lot easier).
The key here is supplying the background through the :before pseudo-element, which is made to span the whole width of the outermost ul.
Here is my demo jsbin.
HTML
<ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.full-width-list {
position: relative;
padding: 0 0 0 4px;
}
.full-width-list ul {
margin: 0;
padding: 0
}
.full-width-list li {
list-style:none;
padding: 0;
margin: 0;
height: 1.2em;
line-height: 1.2em;
}
.full-width-list ul > li {
margin-top: 4px;
padding: 0 0 0 36px;
}
.full-width-list li:first-child:before {
content: '';
height: 1.2em;
position: absolute;
left: 0;
right: 0;
z-index: -1;
background:red;
}
.full-width-list li:first-child:hover:before {
background:green
}
Limitations
This solution has two main limitations:
None of the ul or li elements can have a position other than the default static set on them, as the :before pseudo-element of the li elements needs to have its only positioned parent be the .full-width-list element.
There has to be a set height on the li items. In my example I use 1.2em, but whatever height you set, it means that the li elements cannot go to two or more lines of text (so this solution only works with a single line of text).
You can do this with :before hack as you have no access to the code
Working jsBin Demo
CSS
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}
This works at arbitrary depths without hacks or nonsense.
The people saying "can't" and "impossible" in this thread really need to learn what those words mean with respect to CSS (generally, "haven't figured out how yet.") :)
The idea is simple: set a :before selector which fits the left and right edges by absolute positioning and paints a background color. You need to set a z-index: to put it behind its content, a content: '\0020' to force it to paint (that's a non-breaking space,) and you're good.
You can bound this by setting it inside a position: relative container.
<!doctype html>
<html>
<head>
<style>
li {
list-style-type : none;
margin-bottom : 0.25em;
}
li:before {
position : absolute;
left : 0;
right : 0;
background-color : #eef;
content : "\00a0";
z-index : -1;
}
</style>
</head>
<body>
<ul>
<li>Test</li>
<li><ul>
<li>Test</li>
<li><ul>
<li>Test</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>
Your markup is broken, you should nest li in a single ul like this:
<ul>
<li>Text</li>
<li>Text 1</li>
</ul>
This was your markup
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
<ul>
I assume you see why this is wrong.
I've fixed the JSBin for you and it has the correct effect.
EDIT: You could of course add the padding-left by looping over all lis using javascript.
You could not be sure enough about browser consistency until markup cleanup and consistency, sad but true. All the suggestions from above looks good, there is bit of alternative from my practical view.
The markup:
<ul>
<li>A</li>
<li><p>B</li>
<li><p><p>B</li>
<li><p><p><p>B</li>
....
</ul>
And CSS:
li p {
padding-left: 1em;
display: inline;
}
JSbin
p tag is optional to close in HTML subset, and generally should works in every browser anyway no matter of doctype. In case you are on xHTML and worry about validation an option could be using closing tags like:
<ul>
<li>A</li>
<li><p></p>B</li>
<li><p></p><p></p>B</li>
....
</ul>
Try this:
<ul class="lvl1">
<li>A</li>
<ul class="lvl2"><li>B</li>
<ul class="lvl3"><li>B</li></ul>
</ul>
</ul>
li {
background: none repeat scroll 0 0 #FF0000;
list-style: none outside none;
margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}
See here: http://jsfiddle.net/x5K4a/
1) Your HTML is invalid (missing <li> around <ul>)
2) The only way to make indentation work as you expected is a CSS rule for each level.
ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...
http://jsbin.com/uReBEVe/12/edit
if it is just a matter of background-color, you can use a shadow of same color.
http://codepen.io/gc-nomade/pen/fxBAl (html structure fixed)
<ul class="ulparent">
<li>
<p>A</p>
<ul>
<li>
<p>B</p>
<ul>
<li>
<p>B</p></li>
</ul>
</li>
</ul>
</li>
</ul>
.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}
Else, if it is a background-image, i would use pseudo-element and background-attachment:fixed;(demo included in codepen , using a linear-gradient as image )
I am going to give you the proper idea how to apply css rules over the HTML contents.Below the css rules I have created just copy it and see the answer.It is the child combinator which I used!I inspect whole the answers provided by the different users which is not followed the css rules at all. Just let me know! Hope the answer!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
li{
list-style:none;
background:red;
margin-top:4px;
}
body>ul>ul>li{
margin: 4px 0 0 -40px;
}
body>ul>ul>ul>li{
margin: 4px 0 0 -80px;
}
body>ul>ul>li {
padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
padding:0px 0px 0px 80px;
}
li:hover{
background:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Save the image at first to your local drive or drag and drop this image into the new tab browser to see more visible.
Here is the proper HTML structure that you should follow, with each UL element having two LI elements. One for the value of each line and one as the parent for the next indented value.
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
<li>
</ul>
For the CSS, this solution requires you to have a max number of 'levels' in your list hierarchy (see code comment)
li {
list-style:none;
padding-left:0px;
box-sizing:border-box;
}
ul {
padding-left:0
}
ul > li:nth-of-type(1):hover {
background:green
}
ul li:nth-of-type(1) {
padding-left:50px;
background:red;
margin-top:4px
}
ul li li:nth-of-type(1) {
padding-left:100px;
}
ul li li li:nth-of-type(1) {
padding-left:150px;
}
/*
Continue incrementing the padding for the li
children for however many levels you want
*/
Make note, the nth-of-type selector is supported by all browsers EXCEPT for IE8 and below.
See JSBin for working example: http://jsbin.com/uReBEVe/51
Good luck!
Both UL and OL inherit margins. Your fix would be to zero out the margin:
ul, ol
{
margin:0;
}
You can add this CSS in your code to get your desired results:
li {
list-style: none;
background: red;
margin-top: 4px;
}
ul {
padding: initial !important;
}
ul ul li {
padding-left: 40px;
}
ul ul ul li {
padding-left: 80px;
}
li:hover {
background: green;
}
Result on jsbin is here: http://jsbin.com/uReBEVe/33/edit
#AsrafulHaque has the correct idea about using padding to extend the background width without changing nesting indents.
However, because you don't know how many < li> there will be, you can't expect this to be a pure CSS solution.
You're attempting to do a pretty awkward thing but it would be possible to loop over them and inject dynamic padding using javascript/jquery or something:
i = 40;
$('img.yourImageClass').each(function() {
$(this).css('padding-left', i+'px');
i = i + 40;
});
You could also do this type of injection with pre-processing on the server side I am sure, but definitely not with CSS alone. You need a dynamic solution (i.e. the ability to use variables) to support your dynamic output.
A very very fiddly jsfiddle but it works with a little nudge in the right direction from jQuery. Not a great resolve but a resolve none the less.
HTML
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style-type:none;
margin-top:5px;
padding-left:40px;
float:left;
width:400px;
overflow:hidden;
background:#ff0000;
}
li {
padding-top:5px;
}
ul div {
position:absolute;
left:0;
width:100%;
border-top:3px solid #fff;
}
jQuery
$(document).ready(function(){
$('ul').prepend('<div></div>');
});
jsFiddle here. Hopefully this works for you!
You can do like this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="mainUL">
<li>A</li>
<ul><li>B</li>
<ul><li>C</li></ul>
</ul>
</ul>
</body>
</html>
CSS Code
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}
You can see the working demo : http://jsbin.com/uReBEVe/71/edit
from your demo:
if you apply
ul{
padding:0;
margin:0;
}
everything sits flush to the wall like you want.
if you want text indents
ul ul li{
text-ident:20px;
}
which is nesting. will only targets li's that are in ul's that are nested in ul's. then what you want works and you don't need to change your code
you can also keep nesting that code
add more ul's and li's depending on the depth of your structure, but this should give you a very good base
I am working on our company website and I'm very new to HTML and CSS. I am trying to make a drop down menu for the Nav bar and I have the gist of it, but it needs some help. The dropdowns are not lining up properly, the text is too large, and the border I have is spanning the entire length of the lists.
CSS:
.menu{
padding:0;
margin:25px 0 0 0;
}
.menu, .menu li{
list-style: none;
display: block;
float:right;
padding:12px;
border-right: 1px solid #d8d8d8;
}
.menu li{
float:left;
display: block;
width: 100px;
}
.menu ul{
opacity: 0;
}
.menu ul li{
background-color: white;
}
.menu li:hover > ul{
opacity: 1;
}
.menu li.last-menu-item{
border: none;
padding-right:0;
}
.menu a{
color:#132d3c;
font-size:15px;
font-family: 'sansationbold';
text-transform: uppercase;
text-decoration: none;
font-weight:lighter;
}
.current-menu-item a{
color:#f15c22;
}
.menu a:hover{
color:#f15c22;
}
HTML:
<ul class="menu alignright">
<li class="current-menu-item">Home</li>
<li>About
<ul>
<li>Who We Ar</li>
<li>Values</li>
<li>Owners Message</li>
<li>Infotek Blog</li>
<li>Success Stories</li>
<li>Partners</li>
</ul>
</li>
<li>Products & Solutions
<ul>
<li>Security Solutions</li>
<li>Data Solutions</li>
<li>Communication Solutions</li>
<li>Connectivity Solutions</li>
<li>Infrastructure Solutions</li>
<li>Resources</li>
</ul>
</li>
<li class="last-menu-item">Contact</li>
</ul>
Can I get a little help?
http://jsfiddle.net/pQhpu/191/
Hi in this you're making some mistakes.
Don't use opacity for hide the submenus, set it with the property display:none
Set with position:relative your li and the ul inside them with position:absolute
View this demo an make any question http://jsfiddle.net/pQhpu/214/
EDIT
To resolve your request of centering the submenus in relation with his parent you can use Jquery.
I created this function for you: Review the demo here http://jsfiddle.net/pQhpu/264/
$(document).ready (function () {
$('.menu li').mouseenter(function (){
var $this = $(this),
$sub =$(this).children('ul'),
pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
move=($this.width()+pad-$sub.width())/2;
$sub.css ('left',move+'px');
});
})
All you have to change here is the name route of your li that displays the submenu; in my case is '.menu li' . This function takes the width of the submenu and his parent and make an operation to make it centered.
For the borders, put them on the a instead of the actual li. And put your padding on the a as well to push the borders to the right. You usually have to add a class like '.last' to the last item if you don't want a floating border off to the right. Will have to make the widths larger to accommodate all the text on one line, or reduce the overall size. That should get you started.
First off, your design is horrible. I think you probably copied it from somewhere, but there are so many cross-over/overlaying elements. Define each different part(menu options, drop down options, etc.) seperately, rather than applying things to all lis and what not.
Here is a fix for the width. I made the divs larger. It was pretty hard. Next you'd have to define a class for all drop down items, and then make their font-size smaller, and apply the same width as menu items so they aren't slightly larger than the menu items.
http://jsfiddle.net/pQhpu/200/
To correct the alignment issues add:
.menu, .menu li
{
padding: 12px 0 12px 0;
}
This is shown in firebug but not in your code above
.menu, .menu li
{
padding: 12px;
}
To prevent the border from spanning the entire length of the list, use the display property instead changing the opacity.
.menu ul{
display: none;
}
.menu li:hover > ul{
display: inline;
}
I have a nested li and they have specific classes. I am having issues with the nested classes. Despite the specific class, the styling is that of the class of the parent:
<ul>
<li class="navtitle-current">ONE
<ul>
<li class="navtitle-current">TWO</li>
<li class="navtitle">THREE</li>
</ul>
</li>
</ul>
.navtitle {
font-weight: none;
}
.navtitle a{
background-color:white;
color: gray;
}
.navtitle a:hover,
.navtitle:hover{
background-color:white;
color: black;
}
.navtitle-current {
font-weight: none;
}
.navtitle-current a{
background-color:white;
color: black;
}
.navtitle-current a:hover,
.navtitle-current:hover{
background-color:white;
color: black;
}
What I want to happen is that ONE needs to be in black, TWO in black and THREE in gray. However, all the links are black.
I was under the impression that if I explicitly have a class, I should not have any such issues. Does anyone have any thoughts?
All help is appreciated.
Note: I realize the CSS blocks are not in . I just put the code on here for the sake of showing what I have.
Because .navtitle-current is higher level than .navtitle, the links are inheriting the .navtitle-current a styles. If you want to style links inside that, you need to be more specific with your tags. Change .navtitle a to .navtitle-current .navtitle a and it should work.
Yet another way to go about this:
jsFiddle
.navtitle-current .navtitle a {
background-color:white;
color: gray;
}
It may be just a personal preference, but when possible I try to avoid chaining ul li ul li etc. I find it a bit more readable to use the class names.
The problem is selector specificity - your second to last declaration has the same exact same weight and origin as the class defining the gray-colored text - .navtitle a - and due to the nature of the cascade, the latter rule specified will win
From the 2.1 Spec, Specificity:
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
To overcome this, just increase the specificity of .navtitle a by including li before the class, e.g.
li.navtitle a {
background-color: gray;
color: gray;
}
Example
You could do it more clever:
<div class="titles">
<ul>
<li class="current">ONE
<ul>
<li class="current">TWO</li>
<li>THREE</li>
</ul>
</li>
</ul>
</div>
.titles ul li {...}
.titles ul li.current {...}
.titles ul li.current ul li {...}
.titles ul li.current ul li.current {...}
regards,
I am styling my top level <li> to look like tabs. and on rollover a div shows but if there are nested <ul> <li>'s in the div they inherit the same tab style as the top level <li>'s
below is my style:
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color: #ffffff;
display:block;
outline:0;
text-decoration:none;
padding:10px 9px 2px 9px;
/* Background color and gradients */
background: #da0000;
background: -moz-linear-gradient(top, #b80202, #da0000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b80202), to(#da0000));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
This is my HTML
<li>
Headquarters
<div class="dropdown_2columns">
<div class="col_2">
<ul>
<li>Board</li>
<li>Staff</li>
</ul>
</div>
</div>
</li>
I thought adding a class to the top level <li> would help but no luck. Is there something I am missing? when the code above runs "Board" and "Staff" both have a red tab effect on them.
You are targeting all As that are in LIs, so this behavior is as it should be.
There are many solutions to this "problem". The easiest way would be to target (with your CSS selector) just the first level of LIs with the "child selector":
#menu > li > a {
...
}
This should only affect the first level of As in the LIs.
Well, adding a class to the top level <li> won't work - because the inner <a>'s will still be affected by:
#menu li.myclass a
I.e., they're anchor elements inside a <li> with class "myclass".
Instead, you can change the rule to:
#menu > li > a
... meaning, only <a>'s that are immediate children of <li>'s, which are immediate children of #menu, will be affected (IE6 doesn't support this). This is assuming it's your <ul> that has the id "menu".
Or you could use (mostly for IE6 compatibility):
#menu li li a
{
/* Undo styles you applied to #menu li a */
}
Note that in this, you'll have to reset/undo/"overwrite" all the styles previously set on #menu li a that you don't want to apply to the inner anchors.
An alternative for IE6 - where you won't need to reset/undo styles - is to set a class on the <a>'s rather than the <li>'s:
#menu li a.tab
I think this is impossible to answer without seeing a more complete snippet of the HTML. At the moment folks answering have to assume which element has the ID of #menu.
If the HTML looks like this:
<div id="menu">
<ul>
<li>
Headquarters
<div class="dropdown_2columns">
<div class="col_2">
<ul>
<li>Board</li>
<li>Staff</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
Then the solution would be:
#menu > ul > li > a { ... }
If the code looks like this:
<ul id="menu">
<li>
Headquarters
<div class="dropdown_2columns">
<div class="col_2">
<ul>
<li>Board</li>
<li>Staff</li>
</ul>
</div>
</div>
</li>
</ul>
Then the correct selector would be:
#menu > li > a { ... }
If it doesn't look like either of those snippets, then I'll need to see more of your code in order to better answer your question!
One more thing -- if you want to be even more specific you can also use first-child which would be implemented as:
#menu > ul > li > a:first-child { ... }
or...
#menu > li > a:first-child { ... }
...depending on your HTML.