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>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="css/bootstrap.css" rel="stylesheet">
<link type="text/javascript" href="js/bootstrap.js">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>
#media screen and (max-width: 600px) {
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #fff; width: 100%}
li ul {display: none;}
ul li a {display: block;background: #808080;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff; width: 100%}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;width: 100%;z-index: 1}
li:hover li {float: none; }
li:hover a {background: #0026ff;}
li:hover li a:hover {background: #4800ff;}
#drop-nav li ul li {border-top: 0px;}
#s{float: left;position: relative;width: 100%}
}
</style>
</head>
<body>
<div style="float: left" id="s">
<ul id="drop-nav">
<li>Content Management1<span class="glyphicon glyphicon-plus" ></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div style="float: right" id="s"> <ul id="drop-nav">
<li>Content Management2<span class="glyphicon glyphicon-plus"></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul></div>
<div style="float: right;position: relative" id="s"> <ul id="drop-nav">
<li>Content Management3<span class="glyphicon glyphicon-plus" ></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul></div>
<br><br><br><br>
</div>
</body>
</html>
I want this list to be converted into dropdown menu and on click on it, I tried this logic and searched bootstrap classes didn't find any. I want it work like navigation bar of bootstrap as it gets converted to dropdown menu when screen resolution is low and work onclick.
first of all read Difference between id and class might be your code was not working because of it. i just use bootstrap collapse in your code its working fine for me i just change id with classes and some css you can compare your code with it.
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #fff;
width: 100%
}
li ul {
display: none;
width: 100%;
z-index: 1
}
ul li a {
display: block;
background: #808080;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
width: 100%
}
ul li a:hover {
background: #f00;
}
li:hover li {
float: none;
}
li:hover a {
background: #0026ff;
}
li:hover li a:hover {
background: #4800ff;
}
.drop-nav li ul li {
border-top: 0px;
}
.s {
position: relative;
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test1" aria-expanded="false" aria-controls="collapseExample">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test1" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test2" aria-expanded="false" aria-controls="collapseExample">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
<ul id="test2" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test3" aria-expanded="false" aria-controls="collapseExample">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test3" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<br>
<br>
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 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>
I have a menu like this
<nav id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</nav>
My CSS file is like this
#nav ul li {
display: inline;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
The sub-menu items drop down and look just fine, it's just that they're dropping down under the first list item, Home.
How can I get them to drop down under the parent list item they're under?
Here is a fiddle with a working solution: http://jsbin.com/akazev/2/edit
Have a look at the new CSS:
nav ul li {
display: block;
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
display: block;
float: none;
}
Instead of displaying your first-level links as inline, display them either as inline-block or float. That was what bugged the nav. If you use float (like I did), don't forget to set the deeper level links to float: none. You will also have to set a margin-left for the absolutely positioned ul's.
PS: Isn't <nav id="nav"> a bit pointless?
Try this
<html>
<head>
<style type="text/css">
#nav ul li {
float:left;
}
#nav ul ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position:absolute;
}
#nav ul ul li {
display: block;
border:1px #ccc solid;
padding:2px;
float:none;
}
</style>
</head>
<body>
<dev id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</dev>
</body>
</html>
Here you are mate just update your code to
#nav ul li {
display: inline;
}
#nav li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
http://jsfiddle.net/dPgQN/ <--- this is a live preview
Try this..
HTML Code:
<div id="navMenu">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</div>
CSS:
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:5px;
list-style:none;
float:left;
position:relative;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul{
right: auto;
left: 0;
visibility:visible
}
I hope this is useful for you.,
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.