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.
Related
Im quite new to web design and am having trouble figuring out why my mobile dropdown menu works fine testing on a browser window, but when accessed using a mobile phone the black triangle denoting the 2nd list disappears and none of the links work; nothing happens when I touch them.
I've commented out the 'display:none' on the '#nav ul' selector so you can see how the menu functions, usually this would be uncommented.
Really appreciate any feedback, thanks.
<div id="nav">
<img id="menubtn" src="images/menuIcon.png" alt="Menu button" />
<ul>
<li>Home</li>
<li>Option 1 ▾
<ul>
<li>Option 1.1</li>
<li id="bottomSub">Option 1.2</li>
</ul>
</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li id="bottomNav">Option 6</li>
</ul>
</div>
/*--- All style--- */
body{
background-color:lightblue;
}
#nav{
font-family:sans-serif;
z-index:1;
}
#nav a{
color:black;
}
#nav ul li{
list-style:none;
color:black;
}
#nav li:hover ul{
position:absolute;
visibility:visible;
display:block;
}
#nav a:hover{
color:yellow;
}
#nav ul li a{
text-decoration:none;
}
#nav ul ul{
position:relative;
display:none;
}
/* ----Mobile only---- */
#media screen and (max-width:480px){
#menubtn:hover + ul,#menubtn:focus + ul{
display:block;
}
#nav ul {
position:fixed;
top:95px;
background-color:#E5E5E5;
font-size:0.8em;
margin:0;
padding:0;
width:120px;
z-index:1;
/*display:none;*/
}
#nav ul li{
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
padding:0;
padding:10px 4px;
}
#nav li:hover ul,#nav li:focus ul{
top:50px;
left:119px;
}
#nav ul ul li{
font-size:1.2em;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color:#E5E5E5;
padding:10px 4px;
width:130px;
}
#bottomSub, #bottomNav{
border-bottom: 1px solid black;
}
}
try by adding <a> tag on parent
<li>Option 1 ▾
<ul>
<li>Option 1.1</li>
<li id="bottomSub">Option 1.2</li>
</ul>
</li>
and display block to <a>
#nav ul li a {
display:block;
}
If you give padding and other style to <a> tag it would be better because :focus doesn't work on li tag.
Not tested but might solve your problem
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 */
}
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/
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/
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?