I have following menu:
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Menu 2 - 1</li>
<li>Menu 2 - 2</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3 - 1</li>
<li>Menu 3 - 2</li>
<li>Menu 3 - 3</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Menu 4 - 1</li>
</ul>
</li>
image with result
On page menu1.php i need to see - image 1
On page menu1.php on hover effect on Menu 2 - image 2
On page menu2.php - image 2
On page menu21.php - image 2
So on page i need to see this page submenu and with mouse on other links change this submenu to submenu of the page, on which is the mouse.
Hope it's understandable.
the main idea would be to assign each of your 'li' elements a class, and do the following:
.classForLi1
{
/*some properties for the menu*/
}
.classForLi1:hover
{
/*some properties for the menu when hovered */
}
and the same for the other menus.
if you want a more specific answer, please try to solve this on your own first and tell us where you got stuck.like apohl wrote we will help you solve an issue, but not write the whole code for you from scratch.
Demo Fiddle
(alternative sub menu style)
The below will give you a starting point to do the menu itself, you can then e.g. set inline styles to display:block; on the sub menu ul element you wish displayed on one of your given .php pages.
HTML
<ul>
<li>Menu 1
<ul>
<li>Menu 1-1</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2-1</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
CSS
body {
margin: 0;
padding: 0;
font-family:arial;
width:100%;
}
ul {
list-style:none;
background:#2E94C7;
padding:10px;
color:white;
}
}
body ul li {
position:relative;
}
ul, li {
margin:0;
padding:0;
}
li {
display:inline-block;
padding:10px;
}
ul li ul {
display:none;
position:absolute;
width:100%;
background:black;
margin:10px 0 0 -10px;
}
ul li ul li {
display:block;
}
ul li:hover ul {
display:block;
}
Related
We have eBook, in that one of the list has strike through the text as well as the bullet. i can able to strike the text using (text-decoration: line-through;). But i can strike through the bullet in the list, please help me to get a solution?
Here is one way to implement
with Order list
HTML :
<body>
This fiddle is used to demonstrate the list styling with CSS
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
</body>
and CSS :
ol li
{
list-style-type: none;
counter-increment: item;
text-decoration:line-through;
}
ol li::before
{
content:counter(item) ".";
text-decoration:line-through;
}
With unordered list, it is a little bit more complicated
HTML:
<body>
This fiddle is used to demonstrate the unordered list styling with CSS
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
and CSS:
ul{
float:left;
}
li {
list-style: circle;
list-style-position: inside;
margin-top:8px;
}
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
Hi guys i want to create a sort of mega slide out menu from a vertical menu but having a few difficulties doing so.
My html for the nav is a bog standard 3 tier menu e.g.
<ul>
<li>Level 1 Item 1
<li>Level 2 Item 1
<ul>
<li>Level 3 Item 1</li>
<li>Level 3 Item 1</li>
</ul>
</li>
<li>Level 2 Item 2
<ul>
<li>Level 3 Item 1</li>
<li>Level 3 Item 1</li>
</ul>
</li>
<li>Level 2 Item 3</li>
<li>Level 2 Item 4</li>
<li>Level 2 Item 5</li>
</li>
What i would like is illustrated in the image below:
I have the nav in place where i want it and i have it so when i hover over a 1st level item the 2nd level shows. Im just not sure on how to get the 3rd level to show underneatht he 2nd level items
Any help will be much appreciated.
Thanks
EDIT
Sorry guys forgot the CSS here's what i have, whether its correct for what i need to know im not sure:
.nav-container {float:left;}
#nav { width:220px; height:260px; font-size:13px;}
#nav li { text-align:left; list-style-type: none; position:relative; }
#nav li > ul {display:none;}
#nav li:hover > ul{
width:676px;
height:260px;
display: block;
position:absolute;
z-index:9999;
left:220px;
top:auto;
}
#nav ul li {
padding:0 20px;
display:inline;
}
At the moment this css positions the 1st level correctly and the second level shows in correct position with 2nd level items positioned correctly, im just not sure how to go about positioning the 3rd level items under the 2nd level items
EDIT 2
I have structured the nav as you guys have said, just didnt type it correctly!, i have edited the post to show this, thanks
Here is a good jumping off point with the code provided.
First problem, your structure.
Use a structure like this, as it will make it MUCH easier to target and style your levels deeper into the tree.
Fiddle: http://jsfiddle.net/SinisterSystems/hz45B/6/
Level 1
Level 2
Level 3
Level 3
Level 2
Level 3
Level 3
Level 1
Level 2
Level 3
Level 3
Level 2
Level 3
Level 3
<ul>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
padding:25px;
border:1px solid #000;
list-style:none;
width:100px;
}
ul ul {
display:none;
}
ul > li:hover > ul {
display:block;
}
Fiddle: http://jsfiddle.net/SinisterSystems/hz45B/6/
Once you're at this point, for your third ul list, just apply this CSS:
make sure to have your ul ul set at position: relative;
ul ul ul {
position:absolute;
top:100%;
left:0;
}
Dirty Example, but you get the point:
http://jsfiddle.net/SinisterSystems/hz45B/7/
I would like to change the color of vertical menu which is created in <ul> and <li> to color by its order. I don't want to give each <li> a class to make the background colorful. But I need css to count it - nth: for example.
Saying I have 10 menu items in <li> :
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
<li>menu 9</li>
<li>menu 10</li>
</ul>
Then I need to use css to change the background color and hover state of each element. So I applied the css:
ul li:nth-child(1) {
background-color: #ccc;
}
And I stuck here. I don't have an idea how to make each <li> a specified background-color. Would you guys please suggest a brilliant solution.
Regards,
In CSS, 'color' refers to font color. You want to use background-color. So your CSS would look like
ul li:nth-child(1) {
background-color: #ccc;
}
ul li:nth-child(2) {
background-color: rgb(60,100,60);
}
etc....
If you want to stripe it with alternating colors you can do this
ul li:nth-child(odd) {
background-color: #ccc;
}
ul li:nth-child(even) {
background-color: rgb(60,100,60);
}
I would advise you to set up classes for the colors, say
.green {
background-color:green;
}
.red {
background-color:red;
}
That way you can simple assign classes to each of your list elements
<li class="green"></li>
plus the added advantage is that you are not styling all ul elements on your webpage.
As #faludi has mentioned, you can refer to each li starting with 1 - nth-child(1) and so on. Or you can just use odd and even.
For the hover color, you can do the following...
ul li:hover {
background-color: #bbbfff;
}
jsfiddle demo
ul li:nth-child(1) {
background-color: #ccc;
}
ul li:nth-child(1):hover {
background-color: #ddd;
}
ul li:nth-child(2) {
background-color: rgb(60,100,60);
}
ul li:nth-child(2):hover {
background-color: rgb(60,100,100);
}
Solution from faludi, detecting li element of vertical menu and change background by its order.
I am looking for some really simple vertical multilevel menu, but I did not find anything. My idea of menu is for example like this:
<ul id="menu">
<li>Item 1</li>
<li class="parent">Item 2
<ul>
<li> Sub 1</li>
<li> Sub 2</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
<ul>
<li> Sub 1</li>
<li> Sub 2</li>
</ul>
</li>
<li>Item 6</li>
And I would like to at first hide all sub categories. And if I click on the some category, the page will load and one the category with class="parent" will show its category. My question is, how can I reach this only with css?
This is basically how a hover menu works; hide the <ul> by default and show it when being hovered.
jsFiddle
#menu li > ul {
display:none;
}
#menu li:hover > ul {
display:block;
}
If you want .parent to show as well just put it in with the hover rule:
jsFiddle
#menu li:hover > ul,
#menu li.parent > ul{
display:block;
}
to hide the sub categories you need to add these to css file
#menu li > ul { display:none;}
#menu ul li ul {display: none;}
#menu ul li.parent ul {display: block;}
I'm building simple site from Drupal but the primary and submenu are not aligned center as it should. I have tried many of CSS3 properties but none of them is working.
This is how it structured
<div class="nav">
<ul>
<li>Primary Menu 1</li>
<li>Primary Menu 2</li>
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
</ul>
<li>Primary Menu 3</li>
<li>Primary Menu 4</li>
</ul>
</div>
I want to display both of primary and submenu to be horizontal and align center with CSS3, how can I do that, please provide completely new CSS code for me please.
Thank you very much.
I hope you are looking like this :-
HTML
<div class="nav">
<ul>
<li>Primary Menu 1</li>
<li>Primary Menu 2
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
<li>Submenu 2.3</li>
<li>Submenu 2.4</li>
</ul>
</li>
<li>Primary Menu 3</li>
<li>Primary Menu 4</li>
</ul>
</div>
CSS
.nav ul {
background:lightgrey;
}
.nav ul li {
display:inline-block;
margin:0 5px;
position:relative;
}
.nav ul li ul {
display:none;
padding:0 10px;
}
.nav ul li:hover ul {
display:block;
position:absolute;
left:0;
top:19px;
right:0;
}
.nav ul li ul li {
display:block;
margin:5px 0;
padding:0;
}
Demo