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.
Related
Currently I'm working on my vertical menu but I hit a wall. For one, the menu looks exactly how I want it to work but unfortunately it's not doing any kind of drop down menuish type things I want. When I get to the product link, it just dissipates from there on. I've tried to do a hover effect but the links down below the product tab just don't show up.
Here's the HTML I'm working right now.
<html>
<head>
<title>Kenneth's new exercise</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="kenny.css">
</head>
<body>
<nav class="main-nav">
<ul class="main-nav-ul">
<li>Home</li>
<li>Products</li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<li>Services</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
Now here's the CSS code.
html {
background:url(wallpaper.jpg) no-repeat center center fixed;
background-size:cover;
}
body {
padding:0;
margin:0;
}
a {
text-decoration:none;
}
li {
list-style:none;
}
.main-nav {
width:250px;
background:rgba(180,205,203,1.00);
}
.main-nav a {
display:block;
padding:10px 0px 10px 20px;
color:#FFF;
text-transform:uppercase;
letter-spacing:.2em;
border-bottom:1px dotted gray;
text-align:left;
}
.main-nav a:hover {
background:rgba(121,165,162,1.0);
}
.main-nav-ul ul {
display:none;
}
.main-nav-ul ul:hover li {
display:block;
visibility:visible;
}
What do I have to do for the product tab to show all the rest of the links?
Thanks in advance.
you just need to call the hover on the li and wrap the ul inside it
.main-nav-ul li:hover ul {
display:block;
visibility:visible;
css:
<li>
Products
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
Like Modar Na said, you just have your li and ul mixed up. The CSS is a little asymmetrical, though, so I made a jsfiddle with the li and ul switched but also a bit of code that makes it, in my opinion, look a bit better. So you have your dropdown, and also a bit of styling. The code is here, but you can just click on the jsfiddle link.
HTML:
<html>
<head>
<title>Kenneth's new exercise</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="kenny.css">
</head>
<body>
<nav class="main-nav">
<ul class="main-nav-ul">
<li>Home</li>
<li>Products
<ul>
<li class="drop">1</li>
<li class="drop">2</li>
<li class="drop">3</li>
<li class="drop">4</li>
</ul>
</li>
<li>Services</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
CSS:
html {
background:url(wallpaper.jpg) no-repeat center center fixed;
background-size:cover;
}
body {
padding:0;
margin:0;
}
a {
text-decoration:none;
}
li {
list-style:none;
}
.main-nav {
width:250px;
padding: 0px 40px 0px 0px;
background:rgba(180,205,203,1.00);
}
.main-nav a {
display:block;
padding:10px 0px 10px 20px;
color:#FFF;
text-transform:uppercase;
letter-spacing:.2em;
border-bottom:1px dotted gray;
text-align:left;
}
.main-nav a:hover {
background:rgba(121,165,162,1.0);
}
.main-nav-ul ul {
display:none;
}
.main-nav li:hover ul {
display:block;
visibility:visible;
}
.drop {
position:relative;
left:-20px;
}
}
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>
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 this CSS:
Here is the example: Here is the example: http://jsfiddle.net/GrkkW/1/
#menu{
width:952px;
height:36px;
line-height:36px;
padding:0 0 0 32px;
background-image:url(/images/menu_bg.gif);
background-position:top left;
background-repeat:repeat-x;
position:relative;
z-index:100;
float:left;
}
#menu li{
display:inline;
list-style-type:none;
float:left;
position:relative;
z-index:100;
}
#menu li a{
font-family:Tahoma;
font-size:11px;
color:black;
text-decoration:none;
margin:0 15px;
padding:3px 8px;
display: block;
}
#menu li > ul
{
display: none;
line-height: 20px;
height: 20px;
}
#menu li:hover ul{
display: block;
position:absolute;
margin: -5px ;
}
#menu li:hover li{
float: none; }
#menu li:hover li a{
background-color: #0C325F;
border-bottom: 1px solid #0C325F;
color: #D2DEEC; }
#menu li li a:hover {
background-color: #8db3ff; }
and HTML is this:
<ul id="menu">
<li>Home</li>
<li>Item1
<ul>
<li>SubItem1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>SubItem2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
<li>Item2</li>
I'm using this to display a menu and submenu. What I want to achieve is that when an option from the second level is clicked then its submenu is visible. However currently when I click on menu, submenu at level 1 and level 2 are displayed simultaneously.
I'm wondering if somebody can help me with this and give some advise of the modifications I need to add to the CSS to achieve this?
Here is the example: http://jsfiddle.net/GrkkW/1/
html
<ul>
<li>Home</li>
<li>About
<ul>
<li>About-1</li>
<li>About-1</li>
<li>About-1
<ul>
<li>About-2</li>
<li>About-2</li>
<li>About-2
<ul>
<li>About-3</li>
<li>About-3</li>
<li>About-3
<ul>
<li>About-4</li>
<li>About-4</li>
<li>About-4</li>
<li>About-4</li>
</ul>
</li>
<li>About-3</li>
</ul>
</li>
<li>About-2</li>
</ul>
</li>
<li>About-1</li>
</ul>
</li>
<li>profile</li>
<li>Contact
<ul>
<li>contact-1</li>
<li>contact-1</li>
<li>contact-1</li>
<li>contact-1</li>
</ul>
</li>
</ul>
css
*{ padding:0px; margin:0px;}
ul{padding:0px; margin:0px; list-style:none; width:100%}
ul li{ float:left; padding-right:1px; position:relative;}
ul a{ text-decoration:none; display:table-cell; vertical-align:middle; text-align:center; color:#000; height:30px;
width:100px; background-color:#0CF; color:#fff;}
ul a:hover{ background-color:#36C;}
li > ul{ display:none; position:absolute; left:0px; top:100%;}
li:hover > ul{ display:block;}
li > ul li { padding:0px; padding-right:1px; padding-top:1px;}
li > ul li > ul{ top:0px; left:100%; padding-left:1px;}
li > ul li > ul li{width:100px;}
see this link
http://jsfiddle.net/bipin_kumar/DjvZ8/7/
I want do a menu like on this site: http://www.accenture.com/us-en/pages/index.aspx ex. outsourcing. It's possible to do this using css and html. I can't create "li" or "ul" with columns.
My code
<body>
<style type="text/css">#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(menu_assets/images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 8px 0px 8px;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:underline;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:1px solid #0079b2;
border-right:1px solid #0079b2;
border-bottom:1px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:600px;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a{
background:url(menu_assets/images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
</style>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
<li class='last'><a href='#'><span>Product 4</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;"> </div>
</body>
Of course I search on web but I can't find solution.
Specific selectors
First off, when you use a CSS rule like #cssmenu ul or #cssmenu li, that CSS rule will get applied to the HTML tags for both the main menu and the sub-menus. Some of the styles may be getting applied to elements where they don't need to be applied. To avoid this possible confusion, use the > child combinator in more of the CSS selectors. For example:
#cssmenu > ul {...} // Only applied to main menu
#cssmenu > ul > li {...} // Only applied to main menu li tags
#cssmenu > ul > li > a {...} // Only applied to main menu links
#cssmenu ul ul {...} // No confusion here, since menu isn't 3 levels deep
#cssmenu ul ul li {...} // No confusion here, only applied to submenu li tags
#cssmenu ul ul li a {...} // No confusion here, only applied to submenu links
Floating the menu items
Second, if you're imitating the Accenture menu, the quickest way to display variable-width menu items on the right side of the page is to float the menu items to the left while floating the menu as a whole to the right.
#cssmenu > ul { float: right; ... }
#cssmenu > ul > li { float: left; ... }
...
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a> ... </li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
Sometimes floating a parent and child in opposite directions is problematic. If you have any trouble doing so, the safest option is to float the menu items to the right. In that case, to get them to display in the correct order, you'll have to reverse the order of the menu items in the HTML source code.
#cssmenu > ul > li { float: right; ... }
...
<ul>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a> ... </li>
<li class='active'><a href='index.html'><span>Home</span></a></li>
</ul>