I am writing a simple drop down menu code in HTML. I am not able to create dropdown. I am using google chrome. Every thing seems to be displaying fine only the drop down related to Home3 which is home3.1 is not showing up. Please help!
<html>
<head>
<title>Welcome to I</title>
<link rel="stylesheet" href="n.css">
</head>
<body>
<div id ="nav">
<div id = "nav_wrapper">
<ul>
<li>Home</li><li>
Home1</li><li>
Home2</li><li>
Home3
<ul>
<li>Home3.1</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
////////////////////////////////////////////
css file
body {
margin: 0;
padding: 0;
background: #ccc;
}
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li: hover ul{
display: block;
}
#nav ul ul{
display: none;
position : absolute;
}
Try below CSS
body {
margin: 0;
padding: 0;
background: #ccc;
}
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul ul{
display: none;
position : absolute;
}
#nav ul ul li a{
background: #333;
color: #fff;
}
#nav ul li:hover ul{
display: block;
}
JSFIDDLE DEMO
MUTLI-LEVEL MENU
MULTI-LEVEL MENU WITH HOVER EFFECT
You need to add position: relative to #nav ul li and set the child ul 100% from the top, then give it a background-color in this case the same as the nav.
Then give the child ul an absolute position
body {
margin: 0;
padding: 0;
background: #ccc;
}
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
position: relative; /*add this*/
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover >ul{
display: block;
background: #222;
}
#nav ul ul{
display: none;
position : absolute;
top: 100%;
left: 0
}
<html>
<head>
<title>Welcome to I</title>
<link rel="stylesheet" href="C:\Users\lenovo\Desktop\Spring Semester\IP\Lab02\test\n.css">
</head>
<body>
<div id ="nav">
<div id = "nav_wrapper">
<ul>
<li>Home</li><li>
Home1</li><li>
Home2</li><li>
Home3
<ul>
<li>Home3.1</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Related
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
I'm having issues centering the Navigation bar of my Drop Down menu (See Code Below). To specify what I mean I'll leave an image here aswell.
As you can see the middle and bottom Navigation bars aren't centered, and when I attempt to center them, they stack on top of each other in the middle of the screen instead of just centering the line. All of the HTML for the Navigation bar is the same, so I've left the first section for it in the code. Any help is appreciated.
/*CSS*/
#menu {
z-index: 1;
clear: both;
margin: 0;
padding: 0 40px 0 0;
font: bold 15px/26px Avenir;
height: 2em;
}
#menu ul {
float: left;
list-style: none;
margin:0;
padding: 0;
}
#menu li {
display: inline;
list-style: none;
position: relative;
float: left;
}
#menu li a {
display: block;
float: left;
padding: 0 0.5em;
text-decoration: none;
color: #000;
}
#menu li.current_page_item a {
background-color: #FFF;
color: #333;
}
#menu li.current_page_item ul li a {
background-color: transparent;
color: #333;
width: 9em;
}
#menu li:hover {
background: #ECECEC;
}
#menu li a:hover {
color: #333;
}
#menu>ul a {
width: auto;
}
#menu ul ul {
position: absolute;
display: none;
}
#menu ul ul li {
border-bottom: 1px solid #CCC;
width: 9em;
}
#menu ul li:hover ul {
display:block;
background-color: #AAA;
width: 9em;
}
#menu ul ul li:hover ul {
display:block;
background-color: #555;
}
#menu ul ul {
top: 2em; left: 0em;
}
#menu ul ul ul {
top: 0em; left: 9em;
border-top: 0.1em solid #CCC;
}
/*HTML*/
<div id="menu">
<ul>
<li>Alternative & Natural Building <ul>
<li>Earthbag</li>
<li>Strawbale</li>
<li>Tiny Houses</li>
<li>Underground Houses</li>
<li>Yurts</li>
</ul></li>
I'm looking to make a dropdown menu that shows up inside/on top of the parent menu. I would like to do this in pure css. I have made a quick example of what I am looking for(in Photoshop). Here is a link. Here is what I have now, but this makes a normal dropdown menu and not one that stays in the parent container.
CSS:
.titlebox ul {
text-align: center;
font-size: 15px;
font-family: arial,sans-serif;
line-height: 32px;
margin: 0;
width: 100%;
background: #555;
list-style: none;
border-radius: 2px !important;
transition: all 0.15s ease;
}
.titlebox ul:hover {background: #666;}
.titlebox ul:active {background: #444;}
.titlebox ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 32px !important;
}
.titlebox ul li:hover {
background: #666;
}
.titlebox ul li:hover ul {
display: inline;
opacity: 1;
visibility: visible;
}
.titlebox ul li ul {
padding: 0;
position: absolute;
top: 0px;
right: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
.titlebox ul li ul li {
display: inline;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.titlebox ul li ul li:hover {background: #666;}
HTML(Quick):
<ul>
<li>Hi<br/>
<ul>
<li>Google<br/></li>
<li>HOLA<br/></li>
<li>HALO<br/></li>
</ul></li>
</ul>
Any and all help is appreciated! I know this might be kinda confusing but I don't know how else to explain it. If you have any questions, feel free to ask!
Thanks,
Usama Khan
EDIT 1: Here's the link to the JSFiddle.
i think this is your looking for .if not ,can you tell me where i am wrong.
ul {
text-align: center;
font-size: 15px;
font-family: arial, sans-serif;
line-height: 32px;
margin: 0;
padding: 0;
width: 300px;
background: #555;
list-style: none;
border-radius: 2px !important;
transition: all 0.15s ease;
}
ul:hover {
background: #666;
}
ul:active {
background: #444;
}
ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 32px !important;
}
ul li:hover {
background: #666;
}
ul li:hover ul {
display: inline;
opacity: 1;
visibility: visible;
margin-left:10px;
}
ul li ul {
padding: 0;
position: absolute;
top: 0px;
right: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
display: inline;
color: #fff;
text-shadow: 0 -1px 0 #000;
float: left;
width: 33%;
}
ul li ul li:hover a{
color: white;
}
ul li ul li:hover {
background: #777;
}
<body>
<ul>
<li>Hi
<ul>
<li>Google1</li>
<li>Google2</li>
<li>Google3</li>
</ul>
</li>
</ul>
</body>
The HTML
I removed the /br from the html, because it was forcing the navigation menu to drop down.
<body>
<ul>
<li>Hi
<ul>
<li>HOLA</li>
<li>HALO</li>
</ul>
</li>
</ul>
</body>
The CSS
Read the comments in the css for all changes / explanation (ask if there is something you do not understand). I also removed a lot of unnecessary css from your code (and some of it probably still is).
ul {
text-align: center;
font-size: 15px;
font-family: arial, sans-serif;
line-height: 32px;
margin: 0 auto;/*center nav-menu*/
padding: 0;
width: 300px;
background: #555;
list-style: none;
border-radius: 2px;
}
/*unnecessary now
ul:hover {
background: #666;*/
}
ul:active {
background: #444;
}
ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 100%;
}
/*unnecessary now
ul li:hover {
background: #666;
}*/
/*hide ul and making it the same dimensions as its parent*/
ul li ul {
padding: 0;
position: absolute;
left: 0px;
right: 0px;
top:0px;
bottom: 0px;
display: none;
}
/*make submenu appear on hover of ul*/
ul li:hover ul {
display: block;
}
/*style the subnavigation-list*/
ul li ul li {
display: block;
width: 50%;/*accomidates for 2 list items, adding more will drop them below*/
float: left;
}
/*style your buttons*/
ul li ul li a{
text-decoration: none;
color: white;
text-shadow: 0 -1px 0 #000;
display: block;
height: 100%;
width: 100%;
background-color: #555;
box-shadow: 0px 0px 1px 1px white inset;
}
/*style button on hover*/
ul li ul li a:hover{
background-color: #999;
}
JSFiddle
Vertical submenu postion is correct but links are on top of each other. And it won't hide when hovering in main menu. Hides when hovering outside menu. I don't know what to add/change in css.
Vertical submenu
nav {
padding-top: 183px;
margin-left: auto;
margin-right: auto;
}
ul {
padding: 0;
margin: 0;
}
nav ul {
list-style: none;
font-weight: bold;
font-size: 20px;
margin: 5px;
width: 200px;
}
nav ul ul {
display: none;
margin: 0px;
padding: 0px;
}
nav ul li {
float: left;
}
nav ul a {
display: block;
width: 145px;
text-align: center;
text-decoration: none;
color: #fff;
border: 1px solid #004c99;
border-radius: 8px;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
}
nav ul a:active {
background: rgba(255,255,255,0.4);
color: #FFF;
}
nav ul li a:hover, ul a:focus {
text-decoration: none;
background-color: #6699cc;
color: #FFFFFF;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
nav ul li a {
display: block;
margin-top: 0px;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
margin-top: -35px;
position: relative;
margin-left: 165px;
}
nav ul ul li a:hover {
background: #6699cc;
}
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
background-color: #3370AD;
}
nav ul li:hover {
margin-top: 0px;
}
nav ul li:hover > ul{
display: block;
position: absolute;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
Thanks in advance!
change your nav ul li a {
display: block;
margin-top: 0px;} to ... margin-top:5px and see if that does the job. that will fix the spacing issue anyway
This happened to me when I nested the submenu incorrectly:
<ul id="main menu">
<li>
<a>Menu item</a>
<!-- DO NOT CLOSE THIS LI TAG YET! -->
<ul>
<li>Submenu item</li>
</ul>
</li> <!-- NOW YOU CAN CLOSE IT -->
</ul>
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/