this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...
Related
I have a navpar made by css but when show the navbar sub menu it pushes the content underneath down
This is a link to codepen with full code
https://codepen.io/muhamedhashem/pen/GqNQaE
image
html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<ul>
<li>One</li>
<li>
<a href="#">
Two
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Two #1</li>
<li>Two #2</li>
<li>Two #3</li>
</ul>
</li>
<li>
<a href="#">
Three
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Three #1</li>
<li>Three #2</li>
<li>Three #3</li>
</ul>
</li>
<li>
<a href="#">
Four
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
</ul>
</li>
<li>
<a href="#">
Five
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Five #1</li>
<li>Five #2</li>
<li>Five #3</li>
</ul>
</li>
</ul>
</div>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
</body>
</html>
css
.nav {
width:900px;
margin: 0 auto}
ul{
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;}
ul li{
float:left;
width:180px;}
li ul{ display:none;}
li:hover ul{
display:block;}
ul li a{
display:block;
padding: 5px 15px 5px 15px;
background:#69F;
color:#ffffff;
border-top: 1px solid #FFF;
margin-left:1px;}
ul li a:hover{
background:#F80;
color:#fff}
h1 {
clear:both;
}
This is because the navbar itself is growing in height. If you want the navbar to overlap the content, look into z-index and absolute display.
li:hover ul{
position:absolute;
z-index: 10; //can be any number higher than the content's z-index.
width: 180px; //This controls the size of the dropdowns container
display:block;
}
Your sub-menu needs to be set to position absolute and your parent LI needs to be set to position relative. You should set visibility to hidden and then show it for :hover. This method will not push down content.
Also, you need to make sure that you set a width to the ul li ul <--- submenu.
The HTML and CSS code is as follows;
I am using li ul as selectors to make my subjects hidden but it's not working
and I don't know why. Can some one please help (I am new to programming)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
<li> Chemistry Of Biomolecules </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
</ul>
</div>
li ul {
visibility: hidden;
position: absolute;
width: 150px;
}
li:hover ul {
visibility: visible;
}
I think that is what you want
Edit
Also you have error in your HTTML. Your HTML should be like bellow. (Modifying your HTML according your CSS. But this not means that you must write HTML in this way)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
<li> Chemistry Of Biomolecules
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
</ul>
</div>
CSS
li ul{
display:none;
position:absolute;
width:150px;
}
li:hover ul{
display: block;
}
You're selecting al ul tags in li tags, but your HTML is the other way around.
If you change your CSS to ul li { css_here } it should work.
Also when position: absolute; is set to the li items, the ul item doesn't wrap the items anymore, because they are removed from the document layout flow. So you might want to remove the position: absolute;.
I have a little problem with my vertical navigation:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
...
</div>
My CSS:
.menu-container a{
text-decoration:none;
color:black;
}
.menu-container a:hover{
font-weight:bold;
}
.menu-container li:hover > .sub-menu{
display:block;
}
.sub-menu{
display:none;
list-style-type:none;
padding:6px;
}
ul.sub-menu a{
text-decoration:none;
}
.menu-container > ul.sub-menu a{
display:block;
background:#ddd;
}
.menu-container > .sub-menu:active{
display:block;
background:#ddd;
}
If I hover the menu the sub-menu show up. Now, in addition I would like, that if e.g. the submenu1 is active that the whole submenu stays openend. Can I realize that with CSS?
Greets,
Yab86
Here's an example using PHP. You need to create a page variable before the <html> like this:
<?php $page = 'menu1'; ?>
<html>
<!-- rest of HTML below here-->
That php code gets put on top of every submenu page that shares a common main parent menu. So in your example, submenu1, submenu2, and submenu3 would have the same variable. In this example, menu1. What this does, is allows you to add a CSS class of current to the submenu parent ul.
Here's the HTML with the PHP in place:
<?php $page = "menu1"?>
<html>
<head></head>
<body>
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu <?php if($page == 'menu1')echo 'current'; ?>">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu <?php if($page == 'menu2')echo 'current'; ?>">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
And here's the CSS that would keep it open:
.menu-container li:hover > .sub-menu,
.menu-container .current {
display:block;
}
When the HTML outputs to the browser, this is what it would actually look like if you were on any of the submenu1,2,3 pages:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu current">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
Hopefully this helps you out.
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
List:
<ul>
<li>
Item 1
<ul>
<li>
Item 1-1
<ul>
<li>Item 1-1-1</li>
<li>
Item 1-1-2
<ul>
<li><a href="#">Item 1-1-2-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Here's some relevant CSS
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
The first one will hide every drop down item. The second will match any ul that is a children of the parent #nav ul li:hover, if so display:block and the drop down is visible.
Now because when hovering a item, the items within will simply be listed below, this is not what I am looking to achieve. I want to move the Item 1-1-1 and Item 1-1-2 to be on the right of Item 1-1, the Item 1-1-1 needs to be on the right, Item 1-1-2 will be below it (acting as a drop-down list). I am not sure how I select that element.
Example: http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
Here's what I got so far:
http://jsfiddle.net/Gq8C2/
I tried with first-child, such as:
#nav ul li:hover > ul li:first-child {
display: block;
}
I also tried using position absolute and relative, It almost gave me the result I wanted, but I wasn't able to grab the first item...
There must be a better way of doing this...
How do I select it? And how do I make a similar behavior to that I've been describing above?
Why don't you just use the css/html of the page you linked to instead of trying to reinvent it?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
CSS
Review this Fiddle http://jsfiddle.net/Gq8C2/10/
I use position:absolute for the sub-sub menu :
#nav ul li ul li ul {
position:absolute;
top:0;
left:100%;
}
In order to upgrade your code you can assign a class for each level of the menu like
<ul class="Third_level">