I'm trying to style two unordered lists differently on my page - no list style for the nav at the top, and regular list styling in the form.
Here's my simplified markup:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
form ul, li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
When this is run, both the nav and form ULs are coloured red and also lack list styling.
Replace nav ul, li with nav ul, nav li and form ul, li with form ul, form li.
Your code should be as follows:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
/*Targets all "li" elements that have "form" as parent*/
form ul, form ul li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
Related
This question already has answers here:
css how to only make bold fonts for first <ul> set
(4 answers)
Closed 6 years ago.
How to set bold style with CSS only to the "titles" in this code?
Live example: jsbin.com/xofudovoda/
.container > ol {
font-weight: bold;
}
<div class="container">
<ol type="I">
<li>
Title 1
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
Title 2
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>
You can set bold on first level <ol>, and reset it on the second level <ol>s.
.container ol {
font-weight: bold;
}
.container ol ol {
font-weight: normal;
}
<div class="container">
<ol type="I">
<li>
Title 1
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
Title 2
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>
ol li { font-weight: 700 }
ol li ol li {font-weight: 300 }
You can use the following CSS:
.container ol li {
font-weight: bold;
}
.container ol li ol li{
font-weight: normal;
}
li
{
font-weight:normal;
}
.container > ol>li {
font-weight: bold;
}
Add a rule for li. That forces the child <li> elements to use their own style instead of inheriting it from their parent.
Set all the li to font-weight normal, then only apply the bolding to direct children of the original ol.
li {
font-weight: normal;
}
.container > ol:first-child > li {
font-weight: bold;
}
<div class="container">
<ol type="I">
<li>
Title 1
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
Title 2
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>
Take the Title in span tag and than to that span apply font-weight:bold ol >li > span {font-weight:bold;}
working example : http://jsbin.com/gifaliluve/edit?html,css,output
Here is the code :
<html>
<body>
<head>
<style>
ol >li > span {font-weight:bold;}
</style>
</head>
<div class="container">
<ol type="I">
<li>
<span>Title 1</span>
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
<span>Title 1</span>
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
Nth-child will make bold first sub items of each,
ol> li> ol>li:nth-child(odd){
font-weight:bold;
}
Edit 1:
Sorry I understood wrong, this may help.
ol>li {
font-weight:bold;
}
ol > li > ol > li {
font-weight:normal;
}
Hope helps,
Problem is that you've got ordered lists nested within the li's you're trying to target specifically. Try the following:
.container > ol > li {
font-weight: bold;
}
.container > ol > li ol {
font-weight: normal;
}
<div class="container">
<ol type="I">
<li>
Title 1
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
Title 2
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>
Or, another way:
.container li {
font-weight: bold;
}
.container > ol > li > ol > li {
font-weight: normal;
}
<div class="container">
<ol type="I">
<li>
Title 1
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
Title 2
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
How do I enter the following code into CSS so that I don't have to copy and paste it in every HTML page?
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
My issue is especially with the "ul" and "li" -I am not sure what to do with this! Any help would be greatly appreciated- thanks!
Place your css in a separate file and use the following directive to make it accessible in each page:
<link href="url to stylesheet.css" rel="stylesheet" type="text/css">
Place the html in a seperate .CSS stylesheet and reference it as:
<link href="url to stylesheet.css" rel="stylesheet" type="text/css">
To use the ul and li tags you would write something similar to this:
<ul>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
Create a CSS file and link it to your HTML file.
Add your css in separate .css file and call it in html file
<!DOCTYPE html >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
I have a ul list with nested ul elements. Currently it goes 3 levels deep. (main navigation, child, grandchild). I can't seem to get the dropdowns to work. Unforunately, I do not have the ability to place id's in the (ul) items. The best I could do i wrap the ul in a div with an ID on it. Any idea how I could do this? Here's the code I was working with, and I'm sorry if my css looks bad or makes no sense. I'm a novice at this.
Code
http://jsfiddle.net/grem28/ZhNDZ/1/ (jsfiddle for CSS)
<div id="nav">
<ul>
<li id="but_products" >Products
<ul>
<li id="but_boilers" >Boilers</li>
</ul>
</li>
<li id="but_resources" >Resources
<ul>
<li id="but_engineeringLibrary" >Engineering Library
<ul>
<li id="but_detroit" >Detroit Radiant MEA numbers</li>
</ul>
</li>
</ul>
</li>
<li id="but_contactUs" >Contact Us</li>
</ul>
</div>
damien
Here's an example of a functioning 3-tier CSS drop-down navigation system:
HTML
<nav>
<ul>
<li>
Menu One
<ul>
<li>
Menu One Item One
<ul>
<li>Menu One Item One Submenu Item One</li>
<li>Menu One Item One Submenu Item Two</li>
<li>Menu One Item One Submenu Item Three</li>
<li>Menu One Item One Submenu Item Four</li>
</ul>
</li>
<li>
Menu One Item Two
<ul>
<li>Menu One Item Two Submenu Item One</li>
<li>Menu One Item Two Submenu Item Two</li>
<li>Menu One Item Two Submenu Item Three</li>
<li>Menu One Item Two Submenu Item Four</li>
</ul>
</li>
<li>
Menu One Item Three
<ul>
<li>Menu One Item Three Submenu Item One</li>
<li>Menu One Item Three Submenu Item Two</li>
<li>Menu One Item Three Submenu Item Three</li>
<li>Menu One Item Three Submenu Item Four</li>
</ul>
</li>
<li>
Menu One Item Four
<ul>
<li>Menu One Item Four Submenu Item One</li>
<li>Menu One Item Four Submenu Item Two</li>
<li>Menu One Item Four Submenu Item Three</li>
<li>Menu One Item Four Submenu Item Four</li>
</ul>
</li>
</ul>
</li>
<li>
Menu Two
<ul>
<li>Menu Two Item One</li>
<li>Menu Two Item Two</li>
<li>Menu Two Item Three</li>
<li>Menu Two Item Four</li>
</ul>
</li>
</ul>
</nav>
CSS
body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; }
a:hover { color: #cc0000; }
/* Hide submenu */
nav ul > li > ul,
nav ul > li > ul > li > ul { display:none; }
/* Layout menubar and menus */
nav { background:#ddd; padding:0.25em 0.5em; }
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; }
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; }
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; }
/* show submenu on hover */
nav ul > li:hover > ul,
nav ul > li > ul > li:hover > ul { display:block; width:10em; }
Fiddle: http://jsfiddle.net/kboucher/nrAPu/
Hope this helps.
I have an img floated to the left followed by a long ul that should render to the right of the img then continue below it. It does this, but the portion of the ul next to the img it all left aligned and loses its indentation.
Here is a minimum case example. (also in jsbin)
<html>
<head>
</head>
<body>
<div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
<ul>
<li>Level 1</li>
<li>Level 1</li>
<li>
<ul>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
<div style="clear:both"><!-- --></div>
More content More content More content More content More content More content More content More content More content More content More content
</body>
</html>
I appreciate your help.
Try this:
/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}
/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}
css:
div {margin:0 10px 5px 0; float:left;}
ul{
padding:0px;
list-style-type:none;
margin:0px;
}