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
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;
}
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;
}
I was wondering if it's possible to style nested unordered lists with CSS only, without using any scripts. The problem is that CSS needs to work for any depth of the list tree.
For example, I have a list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="holder">
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li class="holder">
<ul>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="holder">
<ul>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And this is my CSS:
li{
background: gray;
border: 1px solid;
display: block;
margin: 2px;
}
.holder{
background: none;
border: none;
}
/*replace these styles*/
li > ul > li{
background: white;
}
li > ul > li > ul > li{
background: gray;
}
li > ul > li > ul > li > ul > li{
background: white;
}
If node's parent has background A, node should have background B. If node's parent has background B, node should have background A.
Please check : http://jsfiddle.net/bCU34/6/
CSS selectors allow you to select all named elements of a parent node by separating the named element from the parent element with a space. To select all unordered list elements, for example, you would do like below. Notice all ul elements at any depth inherit the style no bullets/margin/padding. In order do style nth layer for an element type, you need to use the parent selector >. See below. I used font color but you could set background images the same way. Note there is no decendant level selector at this time that I know of. This was addressed on another post CSS select nested elements up to N levels deep.
.container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.container > ul > li {
color: green;
}
.container > ul > li > ul > li {
color: red;
}
.container > ul > li > ul > li > ul > li {
color: blue;
}
<section class="container">
<h1>CSS Nested List Styling</h1>
<ul>
<li>
<h3>Section 1</h3>
<ul>
<li>
<h4>Foo</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
<li>
<h4>Foo Bar</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Section 2</h3>
<ul>
<li>
<h4>Hello</h4>
<ul>
<li>
<h5>World</h5>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
There isn’t any specific way of doing this currently with Selectors level 3, and the current draft of Selectors level 4 doesn’t seem to add anything either. I had a dig through the www-style mailing list and came up with this post by Lachlan Hunt from April 2005 that suggests that an :nth-descendant() style selector had been considered but never specified.
There´s my code below, now I´m trying to know if there is some CSS property to inform users that there is a sub menu in my <li>test</li>. Is it possible?
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
<li>test
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item d</li>
</ul>
</li>
</ul>
</nav>
</section>
CSS:
#menu {width:960px; height:auto; margin:0 auto 0 auto;}
#menu ul {list-style-type:none;}
#menu ul li {float:left; height:46px;line-height:46px; font-weight:300;}
#menu ul li a {text-decoration:none;color:#ccc; display:block; margin-right:5px; height:46px; line-height:46px; padding:0 5px 0 5px;font-size:20px; }
Just for the record it is possible without JS:
What I did is to specify a styling for child ul-elements nested within an li.
The sub-ul is not visibility:hidden as in the previous example, the child elements are.
So here you go:
http://codepen.io/anon/pen/ufGdm
#Paulie_D I used your code as basic and just changed some parts.
There is no CSS property that detect a child element.
However it's simple enough to do with JQuery...in fact there are an number of ways with JQ
Here's one.
JQuery
(function($) {
$("nav > ul").addClass("top-level");
$(".top-level li:has(ul)").addClass("parent");
})(jQuery)
Codepen Demo
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;}