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.
Related
I have an unordered list with bullets, but the first li I want without a bullet
I can't figure out how I can just one item without a bullet
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
you can do like this:
using first-child/first-of-type, no need for extra markup (using class)
li:first-child {
list-style: none
}
<ul>
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
if you need to remove the bullet from just this specific list, then set a class to ul and do it like this:
.list-no-bullet li:first-child {
list-style: none
}
<ul class="list-no-bullet">
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
You can do this with the list-style property
li:first-child {
list-style: none;
}
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You can also replace first-child with nth-child(index), if you want to select a specific item that isn't first or last, e.g.
li:nth-child(3) {
list-style: none;
}
To remove a bullet you would use list-style: none. There are a number of other valid styles you could also use including roman numerals, images and positioning of the bullet: MDN
.no_bullet {
list-style: none;
}
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
i have a hard time to create a navigation for my site where i wanted to show my menu like that:
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
and their sub menu on their relative main menu pages horizontally like that:
SubMenu 1.1 | SubMenu 1.2 | SubMenu 1.3 | SubMenu 1.4 | SubMenu 1.5 | ...
and i would like to mention here that i have a single page site that loads pages dynamically into a div with jquery ajax and those pages only contains some contents that i want to be there and there are no other extra contents or html tags like <html> <head> or <body> etc. so what i want? suppose when i click on Menu 1 and when Menu 1 loaded then their submenus like SubMenu 1.1 upto SubMenu 1.12 should be opened in that page horizontally at the same time menu 1 must remains active! please look at the picture below.
here is the code i have so far where insted of achiving this i got drop down as you can see this jsfiddle
<nav>
<ul>
<li>Menu 1
<ul>
<li>SubMenu 1.1</li>
<li>SubMenu 1.2</li>
<li>SubMenu 1.3</li>
<li>SubMenu 1.4</li>
<li>SubMenu 1.5</li>
<li>SubMenu 1.6</li>
<li>SubMenu 1.7</li>
<li>SubMenu 1.8</li>
<li>SubMenu 1.9</li>
<li>SubMenu 1.10</li>
<li>SubMenu 1.11</li>
<li>SubMenu 1.12</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>SubMenu 2.1</li>
<li>SubMenu 2.2</li>
<li>SubMenu 2.3</li>
<li>SubMenu 2.4</li>
<li>SubMenu 2.5</li>
<li>SubMenu 2.6</li>
<li>SubMenu 2.7</li>
<li>SubMenu 2.8</li>
<li>SubMenu 2.9</li>
<li>SubMenu 2.10</li>
<li>SubMenu 2.11</li>
<li>SubMenu 2.12</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>SubMenu 3.1</li>
<li>SubMenu 3.2</li>
<li>SubMenu 3.3</li>
<li>SubMenu 3.4</li>
<li>SubMenu .5</li>
<li>SubMenu 35.6</li>
<li>SubMenu 3.7</li>
<li>SubMenu 3.8</li>
<li>SubMenu 3.9</li>
<li>SubMenu 3.10</li>
<li>SubMenu 3.11</li>
<li>SubMenu 3.12</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>SubMenu 4.1</li>
<li>SubMenu 4.2</li>
<li>SubMenu 4.3</li>
<li>SubMenu 4.4</li>
<li>SubMenu 4.5</li>
<li>SubMenu 4.6</li>
<li>SubMenu 4.7</li>
<li>SubMenu 4.8</li>
<li>SubMenu 4.9</li>
<li>SubMenu 4.10</li>
<li>SubMenu 4.11</li>
<li>SubMenu 4.12</li>
</ul>
</li>
<li>Menu 5
<ul>
<li>SubMenu 5.1</li>
<li>SubMenu 5.2</li>
<li>SubMenu 5.3</li>
<li>SubMenu 5.4</li>
<li>SubMenu 5.5</li>
<li>SubMenu 5.6</li>
<li>SubMenu 5.7</li>
<li>SubMenu 5.8</li>
<li>SubMenu 5.9</li>
<li>SubMenu 5.10</li>
<li>SubMenu 5.11</li>
<li>SubMenu 5.12</li>
</ul>
</li>
</ul>
</nav>
and this is css
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li.sub:after { content:'\25ba'; float:right; vertical-align:middle; font-size:50% }
nav > ul > li { cursor:default }
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul { display:block; position:absolute; top:1.4em; left:-1px; width:8em; z-index:10 }
nav li li:hover ul{ left:8em; top:-1px }
nav li { color:black; background:#C2C2C2; border:1px solid #121314; }
nav li li { color:black; background:#C2C2C2; border-color:#696 }
nav li li li { color:black; background:#C2C2C2; border-color:#669 }
nav li:hover { background:#828282; color:#fee }
nav li li:hover { background:#828282; color:#efe }
nav li li li:hover { background:#828282; color:#eef }
nav li li { border-top-width:0 }
nav li li:first-child { border-top-width:1px }
look at this picture for more understanding!
any help is appreciated and any further detail will be provided in needed. thanks
The problem is that you had assigned a couple of positions wrong (relative and then give the li too much sizes. Also you needed to assign that the last li's will need to be display: block whilst the first ones are inline-block.
nav > ul > li {
display: block;
}
nav li li {
display: inline-block;
}
http://jsfiddle.net/filipetedim/duagvm3h/9/
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>
I basically have a menu like it shown below in the HTML code, and I want to add "|" before each "li" within the menu to give it the look of (Home | About | Contact). Everything is working, however, I am having a problem of deleting the "|" from the very first "li" in each "ul" within the menu.
So at the moment my menu is shown like: ( | Home | About | Contact), how do I get rid of the "|" that is on the first "li" element?
currnt CSS:
#mainMenu li:before{
content: "|";
color: blue;
}
I have tried to give it a class of "first" and then use li.first {contnet:none} but no hope.
<nav><ul id="mainMenu"><!--Main Menu-->
<li class="first">Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
Change your css to this: (using sibling selector)
#mainMenu ul li ~ li:before {
content: "|";
}
The above style will be applied to the elements which have previous sibling elements (li ~ li). Hence this styling will not be applied to the first li element because it doesn't have any previous sibling elements.
How about:
#mainMenu ul li:first-child:before{
content: '';
}
You can exclude the first element using :not pseduo selector.
#mainMenu li:not(:first-child):before {
content: "|";
color: blue;
}
Js Fiddle Demo
#mainMenu li.first:before{
content: none;
}
I think this should work.
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;
}