wide spread sub menu

wide spread sub menu - html

Actually I want my menu to be something like sub-menu in this website http://www.maxhealthcare.org.
Here is my HTML
<ul>
<li>Patient and Visitor Services</li>
<li>Hospital Network</li>
<li>Our Specialities
<ul>
<p><span>Eye Care</span></p>
<li>List of Services</li>
<li>Team that cares</li>
<p><span>Gasterology</span></p>
<li>List of Services</li>
<li>Team that cares</li>
<p><span>General Surgery</span></p>
<li>List of Services</li>
<li>Team that cares</li>
<p><span>Internal Medicine</span></p>
<li>List of Services</li>
<li>Team that cares</li>
</ul>
</li>
<li>Preventive Health Plans</li>
<li>For Medical Professionals</li>
</ul>
and CSS is;
#menu ul
{
margin:0px;
padding:11px 150px;
background-color:#013773;
float:left;
width:77.7%;
list-style:none;
}
#menu ul li
{
height:100%;
width:auto;
margin:0px 5px;
padding:12px;
cursor:pointer;
position:relative;
font-weight:bold;
color:#FFF;
font-size:15px;
}
#menu ul li:hover
{
background-color:#FFF;
color:#013773;
}
#menu ul li ul
{
display:none;
background-color:#FFF;
}
#menu ul li ul li
{
display:block;
width:90%;
position:relative;
color:inherit;
margin:0px;
font-weight:normal;
font-size:12px;
padding:0px;
}
#menu ul li:hover ul
{
display:block;
position:absolute;
margin:10px 0px;
padding:20px;
height:auto;
width:300px;
border-bottom:1px #CCC solid;
border-right:1px #CCC solid;
border-left:1px #CCC solid;
float:left;
}
#menu ul li:hover ul li
{
display:inline-block;
position:relative;
padding:10px;
font-weight:normal;
}
#menu ul li ul li:hover
{
font-weight:normal;
}
In the sub-menu i will expand my menu items as it is in the example website. Can some one tell me how to do this?

Related

Center Align Navigation Bar

I'm having a hard time centering the navigation bar I've created.
HTML Code:
<div class="menu">
<ul>
<li>Home</li>
<li>About Mr. A</li>
<li>Intro
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
<li>Student Work</li>
</ul>
</li>
<li>Digital Design
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
<li>Student Work</li>
</ul>
</li>
<li>Web Design
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
<li>Student Work</li>
</ul>
</li>
<li>AP Computer Science
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
</ul>
</li>
<li>FBLA
<ul>
<li>Membership</li>
<li>Competitions</li>
<li>Conferences</li>
</ul>
</li>
</ul>
</div>
</body>
CSS Code:
html {
background-color:#2f2f4f;
}
div {
position:relative;
}
.menu {
position:absolute;
}
.menu ul {
padding:0;
margin:0;
line-height:30px;
}
.menu li {
position:relative;
float:left;
list-style:none;
border-bottom-style:solid;
border-top-style:solid;
border-color:#c5b358;
border-width:1px;
}
.menu ul ul {
position:absolute;
visibility:hidden;
padding:0;
margin:0;
}
.menu ul li a {
text-align:center;
font:"Georgia", serif;
font-size:18px;
color:#c5b358;
width:250px;
height:50px;
display:table-cell;
text-decoration:none;
vertical-align:middle;
}
.menu ul li:hover {
background-color:#2f4f2f;
text-decoration:none;
}
.menu ul li:hover ul {
visibility:visible;
z-index:1;
}
.menu ul li:hover ul li a {
background:#2f4f2f;
z-index:1;
border-bottom:none;
opacity:0.9;
text-decoration:none;
}
.menu ul li ul li:hover {
background:#2f4f2f;
opacity:0.8;
text-decoration:underline;
}
Nothing I do seems to work. I've tried several different options and can't find a solution. I'm fairly new to web design and it took me a while to get to this point.

I am expecting that I understood your question correctly. and on that basis I have modified your css code to get the desired result. please check the fiddle:https://jsfiddle.net/nileshmahaja/0k76hxc1/
Modified CSS
.menu ul {
text-align:center; /* Added */
}
.menu li {
/*float:left; Removed */
display:inline-block; /* Added */
}

CSS - How can I make a simple navigation menu with submenus?

I am learning HTML and CSS at the moment. I have my navigation menu done, but I have submenus under the main selections. Here is my code:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
And here is my HTML (I am making a site on Half Life and Portal to learn):
<div id="menus">
<div id="navigation">
<ul>
<li>Aperture Science</li>
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</ul>
<ul>
<li>Black Mesa</li>
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</ul>
</div>
What do I need to change?
Note: Yes, I haven't finished putting in quick 'a' tags...

you can use this code---
<div id="menus">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home
<ul class="submenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
css--
#menus ul{
padding:0
}
#menus ul li{
display:inline-block;
margin-right:-2px;
position:relative;
}
#menus ul li a{
display:inline-block;
padding:5px 10px;
background:red;
color:#FFF;
}
#menus ul ul{
position:absolute;
left:0;
width:0px;
transition:all .5s;
}
#menus ul.submenu li{
display:block;
transform:scale(0, 1);
transition:all .5s;
}
#menus ul.submenu li:nth-child(2){
transition-delay:.05s;
}
#menus ul.submenu li:nth-child(3){
transition-delay:.1s;
}
#menus ul.submenu li:nth-child(3){
transition-delay:.15s;
}
#menus ul.submenu li:nth-child(4){
transition-delay:.2s;
}
#menus ul.submenu li:nth-child(5){
transition-delay:.25s;
}
#menus ul li:hover ul{
display:block;
width:auto;
}
#menus ul li:hover ul li{
transform:scale(1, 1);
transform-origin: right top;
}
view the jsfiddle live demo

Check code
#menus ul{
padding:0
}
#menus ul li{
display:inline-block;
margin-right:-2px;
position:relative;
}
#menus ul li a{
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#menus ul li a:hover{background: #666;}
#menus ul ul{
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#menus ul.submenu li{
display:block;
}
#menus ul.submenu li a{
display:block;
background:blue;
color: #fff;
}
#menus ul.submenu li a:hover{background: #333;}
#menus ul li:hover ul{
max-height: 10000px;
}
<div id="menus">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Sub Menu
<ul class="submenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>

Try This code:
HTML CODE:
<div id="menus">
<div id="navigation">
<ul>
<li>Aperture Science</li>
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
</ul>
<ul>
<li>Black Mesa</li>
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</ul>
</div>
CSS CODE:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
position: relative;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation ul li ul{
position: absolute;
top: 28px;
opocity: 0;
display: none;
}
#navigation ul li:hover ul{
opocity: 1;
display: block;
}
SEE DEMO http://jsfiddle.net/JentiDabhi/j50Lncva/

how to create submenu of vertical menu in html

Please help me to create sub menu of the below design. sub menu should be align into just below the list.i my design menu and sub menu seems the same.
CSS:
#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}
#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}
#vertmenu ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#vertmenu ul li {
margin:0;
padding:0;
}
#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}
#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}
HTML Code:
<div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li>Home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>About Us</li>
<li>Computing</li>
<li>Web Sites</li>
<li>Games</li>
<li>Links</li>
</ul>
</div>
and sub menu visible by default not on the click of menu.
I have tried but it is not working .
help is really appreciated.

#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}
#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}
#vertmenu>ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#sub{
list-style: none;
}
#vertmenu ul li {
margin:0;
padding:0;
}
#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}
#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}
HTML Code:
<div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li>Home
<ul id="sub">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>About Us</li>
<li>Computing</li>
<li>Web Sites</li>
<li>Games</li>
<li>Links</li>
</ul>
</div>

Do you mean something like this?
Fiddle
<div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li>Home
<ul class="children">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>About Us</li>
<li>Computing</li>
<li>Web Sites</li>
<li>Games</li>
<li>Links</li>
</ul>
</div>
#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}
#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}
#vertmenu ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#vertmenu ul li {
margin:0;
padding:0;
}
#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}
#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}
li:hover > .children {
display:block;
}
.children {
display:none;
}
Notice the added children class on ul and the hover event.

Clickable HTML/CSS Dropdown Menu with no JS works in Firefox, but not Chrome

We were following this tutorial (http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/). The goal was to create a multilevel dropdown click menu with css/html and no js. The code works fine in firefox and even works in the demo shown in the tutorial in chrome, but downloading the code and using it separately doesn't work in chrome. Anyone have any ideas why? The code for the menu is:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li>Home</li>
<li><a class="fly" href="#">Tutorials</a>
<ul class="dd">
<li>HTML / CSS</li>
<li><a class="fly" href="#">JS / jQuery</a>
<ul>
<li>jQuery</li>
<li>JS</li>
</ul>
</li>
<li>PHP</li>
<li>MySQL</li>
<li>XSLT</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#">Resources</a>
<ul class="dd">
<li><a class="fly" href="#">By category</a>
<ul>
<li>PHP</li>
<li>MySQL</li>
<li><a class="fly" href="#">Menu1</a>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li><a class="fly" href="#">Menu3</a>
<ul>
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
<li>Menu34</li>
</ul>
</li>
<li>Menu4</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#">By tag name</a>
<ul>
<li>captcha</li>
<li>gallery</li>
<li>animation</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Go Back To The Tutorial</li>
</ul>
</div>
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}

New css Worked for me in both crome and firefox!::::
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:hover + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:hover + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}

In files for download is different html page. Difference is that live demo contain attribute tabindex="1" in some links. I downloaded source code from live example and it works in chrome now.
New code for your html page.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li>Home</li>
<li><a class="fly" href="#" tabindex="1">Tutorials</a>
<ul class="dd">
<li>HTML / CSS</li>
<li><a class="fly" href="#" tabindex="1">JS / jQuery</a>
<ul>
<li>jQuery</li>
<li>JS</li>
</ul>
</li>
<li>PHP</li>
<li>MySQL</li>
<li>XSLT</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#" tabindex="1">Resources</a>
<ul class="dd">
<li><a class="fly" href="#" tabindex="1">By category</a>
<ul>
<li>PHP</li>
<li>MySQL</li>
<li><a class="fly" href="#" tabindex="1">Menu1</a>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li><a class="fly" href="#" tabindex="1">Menu3</a>
<ul>
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
<li>Menu34</li>
</ul>
</li>
<li>Menu4</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#" tabindex="1">By tag name</a>
<ul>
<li>captcha</li>
<li>gallery</li>
<li>animation</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Go Back To The Tutorial</li>
</ul>
</div>

Menu at different level visible simultaneously in CSS

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/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

wide spread sub menu - html

Related

Center Align Navigation Bar

CSS - How can I make a simple navigation menu with submenus?

how to create submenu of vertical menu in html

Clickable HTML/CSS Dropdown Menu with no JS works in Firefox, but not Chrome

Menu at different level visible simultaneously in CSS

Categories

Resources