I want to create a dopdownmenu, only with html & css.
And now i think i made a fault.. I did not much at the moment here is my Page: Page
The tutorials in the internet arent suitable for me :/ It would be cool if someone can write me something about the construction. Because i think it isnt correct. Thanks.
Code:
*{
margin: 0px;
padding: 0px;
}
a{
display: block;
display: block;
padding: 10px;
background-color: lightgrey;
}
.li_oben, .li_unten{
display: inline-block;
}
<html>
<head>
<title>Homeapge</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul class="ul_oben">
<li class="li_oben">Link 1</li>
<li class="li_oben"><a href="#">Link 2
<ul class="ul_unten">
<li class="li_unten">Link 2.1</li>
<li class="li_unten">Link 2.2</li>
</ul>
</a></li>
</ul>
</nav>
</body>
</html>
This kind of technique is broadly published in the internet.
A quick search landed me in a tutorial that captures precisely what you want to achieve.
Simple CSS Drop Down Menu by James Richardson
And here is a quick JSFiddle from the tutorial I've created.
Quick look over the CSS styling.
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
Multilevel menu markup should look like this:
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li>
<a>Link 3</a>
<ul>
<li><a>Link 3.1</a>
<li><a>Link 3.2</a>
(...)
</ul>
</li>
</ul>
Related
How do get CSS to only affect the first list (menu items) only, and not the second list? Please help. I've been at this all day. If you could, copy/paste the complete code back in your response. VERY appreciated!
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
I've only changed two pieces of your code. You will see where I reference the class .menu in your CSS and where i'm using the class="menu" on your drop-nav list.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
.menu li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style>
</head>
<body>
<ul id="drop-nav" class="menu">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
You can give html elements ids or classes, ids are for unique elements and classes are for more common elements.
In the Css you can give a class a set styling. For you problem follow the ideas I present below:
First line html elements give a class
<ul href='#' class="headingItem></ul>
To style those elements with that class (Css):
.headingItem{
Colour:blue
}
Try using a CSS class. You can target only the ` elements with that class:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul.menu {list-style: none;padding: 0px;margin: 0px;}
ul.menu li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul.menu li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul.menu li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li class="menu">Support</li>
<li class="menu">Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li class="menu">Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li class="menu">Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
The CSS is designed to change the link to red when you hover over it. Just want that to happen with the menu list links. Not the Google/Yahoo list links.
You have this
li:hover a {background: #f00;}
Change that to
ul li:hover a {background: #f00;}
This will differentiate it from the ol links
Change li:hover a {background: #f00;} to ul > li:hover a {background: #f00;}.
> means Child, or sub item. This will make only your navigation links (or other links in an ul > li tag) be red when hovered. Or try this: #drop-nav > ul > li:hover a {background: #f00;} for only your navigator.
Hope it helps.
You should name your first ul with class or id and then use this form of CSS selecor ul.class > li. This is the only way to get to the first level of children.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Arial;
font-size: 14px;
}
ul {
list-style-type: none;
padding: 0;
}
ul.menu > li {
background-color: red;
float: left;
position: relative;
width: 100px;
margin-right: 5px;
padding: 5px;
}
ul.menu > li ul {
position: absolute;
top: 26px;
left: 0px;
display: none;
}
ul.menu > li:hover ul {
display: block;
}
ul.menu > li ul li {
width: 100px;
padding: 5px;
background-color: green;
}
</style>
</head>
<body>
<ul class="menu">
<li>First
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
<li>Second</li>
<li>Third
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
</ul>
</body>
</html>
How to create dropdown navigationbar without using float?? I tried but I am little bit far from my answer, My code is as below ##
HTML
<div id="nav">
<ul>
<li>Animals</li>
<li>Birds</li>
<li>Vegetables
<ul>
<li>Okra</li>
<li>Runner Beans</li>
<li>Pumkin</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Lemom</li>
</ul>
</li>
</ul>
CSS
#nav{width:100%;}
#nav ul{list-style-type:none; margin:0; padding:0; background-color:#9900CC;}
#nav ul li{display:inline;}
#nav ul li a{color:#ffffff; text-decoration:none; display:inline-block; padding:15px; font-weight:700;}
#nav ul li a:hover{background-color:#5F6975;}
#nav ul ul{position:absolute; background:#5F6975; display:none;}
#nav ul li:hover > ul{display:block;}
#nav li ul li{display:block;}
Please help me....
You can use positioning and inline-block:
* {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
#nav > ul > li {display: inline-block; position: relative; width: 100px; padding: 5px;}
#nav > ul > li ul {position: absolute; display: none;}
#nav > ul > li:hover ul {display: block; border: 1px solid #ccc; width: 100px; padding: 5px;}
#nav a {display: block;}
<div id="nav">
<ul>
<li>Animals</li>
<li>Birds</li>
<li>Vegetables
<ul>
<li>Okra</li>
<li>Runner Beans</li>
<li>Pumkin</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Lemom</li>
</ul>
</li>
</ul>
</div>
I know how to display submenu. I need that li a home link, would be different color when my cursor is on submenu ... Hope you will understand what I am saying.
I Thought and tried that #menu li a:hover >ul but not working.
Sample of html menu:
<li><a href=# >home</a>
<ul class="submenu">
<li><a href=# >sub</a></li>
<li><a href=# >sub</a></li>
</ul>
</li>
You need to use the parent li's :hover pseudo class.
jsFiddle
CSS:
#homeMenu:hover #homeLink {
color: blue;
}
HTML:
<ul>
<li id="homeMenu">
home
<ul class="submenu">
<li>sub
</li>
<li>sub
</li>
</ul>
</li>
</ul>
Well I think this does what you want. Can't imagine how it would be useful, though.
HTML:
<a href="#" >home</a>
<ul>
<li>sub</li>
<li>sub</li>
</ul>
CSS:
ul{
display: none;
}
a:hover + ul{
display: block;
}
Fiddle: http://jsfiddle.net/hmvw4tjc/
You were on the right way:
#menu li ul { display: none; }
#menu li:hover ul { display: block; }
#menu li > a { color: black; }
#menu li > a:hover { color: blue; }
How to use vertical menus and I have tried the vertical menu bar.Iam not using jquery or javascript only html and css.While iam mouseover this vertical menu it is not properly working.Please help me.
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical menu</title>
<style type="text/css">
.headerouter1{clear:both;}
.headerinner1{ margin:0 auto; width:990px;}
.menustart{ background:url(images/menustart.png) no-repeat; width:16px; height:40px; float:left;}
.menumiddle{background:url(images/menumiddle.png) repeat-x; width:900px; height:40px; float:left; }
.menumiddle ul li{ float:left; font-family:Arial, Helvetica, sans-serif; padding:15px 20px 0px 20px;font-size:14px; background:url(images/menudivider.png) no-repeat;}
.menumiddle ul li a{text-decoration:none; font-family:Arial, Helvetica, sans-serif;padding:15px 20px 0 20px;color:#FFFFFF;}
.menumiddle ul li a:hover{ color:#000;}
.menuend{ background:url(images/menuend.png) no-repeat; width:15px; height:40px;float:left;}
.menumiddle ul{ margin:0px; }
.menumiddle ul li{ list-style:none; float:left; }
.menumiddle ul li a{ text-decoration:none;}
.menumiddle ul li a:hover{ }
.menumiddle ul li a.active{ }
.menumiddle ul li ul{display: none;}
.menumiddle ul li:hover ul{ margin-top:6px;position:absolute;width:195px;display:block;padding:15px 0px 0px 0px;background:#fff; margin-left:-10px;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;}
.menumiddle ul li:hover ul li a{float:left;clear:both;width:185px;font:bold 12px arial;color:#000;background:none; padding:0px 5px 4px 5px; border-bottom:1px solid #fafafa; border-radius:15px;margin-left:-20px; }
.menumiddle ul li:hover ul li a:hover{ color:#009cff;}
</style>
</head>
<body>
<div class="headerouter1">
<div class="headerinner1 ">
<div class="menustart"></div>
<div class="menumiddle">
<ul>
<li>Home
<ul style="list-style:none;">
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
</ul></li>
<li>Home
<ul style="list-style:none;">
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
<li><a href-"#">sdsd</a></li>
</ul></li>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="menuend"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Raghu do you need some thing like that http://jsfiddle.net/K6dvs/ in which you vertical dropdown menu is sliding down when hover.
.menumiddle > ul{height:40px; overflow:hidden;}
and change some padding see in fiddle.
Your CSS is very poorly written. You should only have an element listed once and all the properties defined within. Also when creating an HTML anchor use = instead of -.
sdsd
Here's the basics of what you're trying to achieve in HTML5.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.menumiddle ul {list-style: none; padding: 0px; font-family:Arial, Helvetica, sans-serif;}
.menumiddle li a {text-decoration: none;}
.menumiddle li a:hover {text-decoration: underline;}
</style>
<meta charset="UTF-8">
</head>
<body>
<div class="menumiddle">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</body>
</html>
By default list elements are position underneath each other (block) if you would prefer to change this to a horizontal list add the following CSS statement.
.middlemenu li {display: inline;}
You do not need to use float: left at any time when position elements within a list.
im struggling to remove the "pipe" border i have on the last item of the nav list- my code-
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Stories</li>
<li>Tell your story</li>
<li>Prizes</li>
<li>How to tips</li>
</li>
</div>
And my css
#menu li{
float:left;
list-style-type: none;
display:inline;
padding:0 .9em;
border-right:1px solid #d2d2d2;;
}
#menu li.last{
border-right:none;
}
You could use the adjacent sibling selector to only set a left border for those li elements that have a preceding li sibling:
#menu li {
float: left;
list-style-type: none;
display: inline;
padding: 0 .9em;
}
#menu li + li {
border-left: 1px solid #d2d2d2;
}
li.last doesn't excists. If you want to do it like that you'll have to add a class property to the last list item:
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Stories</li>
<li>Tell your story</li>
<li>Prizes</li>
<li class="last">How to tips</li>
</li>
</div>
And the css
#menu li{
float:left;
list-style-type: none;
display:inline;
padding:0 .9em;
border-right:1px solid #d2d2d2;;
}
#menu li.last{
border-right:none;
}
For all browsers, add the class to the last list item:
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Stories</li>
<li>Tell your story</li>
<li>Prizes</li>
<li class="last">How to tips</li>
</ul>
</div>
Or, easier, for newer browsers, use the last-child pseudo-selector:
#menu li:last-child {
border-right:none;
}
.menu ul li.last{border-right:none;}
Use this code works good .