HTML Drop-down Sub-menu IDs in VS 2015 - html

I'm having a bit of an issue getting drop down sub menus to work in the site I'm crafting. Is there a way to use ID tags like I have to target the groups specifically or do I need to roll through ul ul ul etc? Either way I can't seem to get my sub-menus to appear.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="StyleSheet.css" type="text/css">
<title>Confederacy of Vulcan</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Confederacy of Vulcan</h1>
<div id="nav">
<ul>
<li><a class="active" href="#news" title="Announcements from the Confederacy of Vulcan">NEWS</a>
<ul id="news-sub-nav">
<li>CURRENT</li>
<li>ARCHIVES</li>
</ul>
</li>
<li>ABOUT
<ul id="about-sub-nav">
<li>CHARTER OF LOGIC</li>
<li>MINISTRY OF STATE
<ul id="ministry-of-state-nav">
<li>FIRST MINISTER</li>
<li>SECOND MINISTER</li>
<li>AMBASSADORIAL STAFF</li>
</ul>
</li>
<li>HIGH COMMAND
<ul id="high-command-nav">
<li>MINISTER OF DEFENSE</li>
<li>MINISTER OF SECURITY</li>
<li>MINISTER OF THOUGHT</li>
</ul>
</li>
<li>MINISTRY OF TRADE</li>
<li>MINISTRY OF SCIENCE</li>
<li>MINISTRY OF RECORDS</li>
</ul>
</li>
<li>HISTORY</li>
<li>TRADE</li>
<li>REPORTS</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
CSS
body {
background-image:url("http://images.akamai.steamusercontent.com/ugc/271725310712894092/9D39DEAA6DDB0B7E2824685BBDEB07DD66235A39/");
}
h1 {
color:#f8d813;
font-size:75px;
font-family:'Agency FB';
text-align:center;
}
ul {
list-style:none;
position:relative;
display:inline-table;
width:976.55px;
margin:auto;
padding:0;
overflow:hidden;
background-color:#696969;
}
ul:after{
content:"";
clear:both;
display:block;
}
#nav {
text-align:center;
height:50px;
}
#nav ul {
font-size:25px;
font-family:'Agency FB';
}
#nav ul li {
display:inline-block;
}
li a {
display:block;
color:black;
text-align:center;
padding:15px 50px 15px 50px;
text-decoration:none;
}
li a:hover {
background-color:#c0c0c0;
}
#news-sub-nav{
display:none;
}
#nav ul li:hover ul{
display:block;
float:none;
position:absolute;
width:176.55px;
font-size:20px;
top:100%;
padding:0;
background:radial-gradient(bottom, #353535 0%, #808080 90%);
background:-moz-radial-gradient(bottom, #353535 0%, #808080 90%);
background:-webkit-radial-gradient(bottom, #353535 0%, #808080 90%);
}
#about-sub-nav{
display:none;
}
#ministry-of-state-nav{
position:absolute;
left:100%;
top:0;
}

Related

What is going on with my vertical drop down menu?

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;
}
}

background color is not working when hover .main class?

When I hover .main li ,.sub class is display as sub-menu.but i give background color to .sub is not work here...
nav{
width :500px;
background :#dd8932;
min-height:30px;
}
.main{
width:500px;
line-height:30px;
}
.main li{
width:150px;
float:left;
}
.sub{
display:none;
}
.main li:hover > .sub{
display:block;
width:150px;
background:#99aaaa !important;
color:black;
}
<nav>
<ul class="main">
<li>Home
<ul class="sub">
<li>Login</li>
<li>Sign Up</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Hi now define this css
.main li:hover > .sub{
display:inline-block;vertical-align:top; //add this css
display:block; // remove this line
}
nav{
width :500px;
background :#dd8932;
min-height:30px;
}
.main{
width:500px;
line-height:30px;
}
.main li{
width:150px;
float:left;
}
.sub{
display:none;
}
.main li:hover > .sub{
display:inline-block;vertical-align:top;
width:150px;
background:#99aaaa !important;
color:black;
}
<nav>
<ul class="main">
<li>Home
<ul class="sub">
<li>Login</li>
<li>Sign Up</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
=================== Second Option here =======================
or second option is this used to this css
.main li:hover > .sub:after {
display: table;
clear: both;
}
.main li:hover > .sub:after, .main li:hover > .sub:before {
content: "";
}

Since you have set a rule for every li to be floated, you need to set overflow: hidden to .sub
.main li:hover > .sub {
overflow: hidden;
DEMO
nav{
width :500px;
background :#dd8932;
min-height:30px;
}
.main{
width:500px;
line-height:30px;
}
.main li {
width:150px;
float:left;
}
.sub{
display:none;
}
.main li:hover > .sub{
overflow: hidden;
display:block;
width:150px;
background-color:#99aaaa;
color:black;
}
<nav>
<ul class="main">
<li>Home
<ul class="sub">
<li>Login</li>
<li>Sign Up</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

On hovering through main menu only my last submenu is displaying and remaining first three submenus are not displaying

HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu3.css">
<title>Menu Bar</title>
</head>
<body>
<div id="nav">
<ul id="menu">
<li>home
<ul>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</li>
<li>about us
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
<li>About5</li>
</ul>
</li>
<li>services</li>
<li>careers</li>
<li>contacts</li>
</ul>
</div>
</body>
</html>
CSS code:
#nav ul,#nav ul ul
{
padding:0;
margin:0;
}
#nav ul li,#nav ul ul li
{
list-style-type:none;
display:inline-block;
}
#nav ul li a
{
font-size:18px;
text-transform:uppercase;
text-decoration:none;
color:white;
background:black;
padding:5px;
display:inline-block;
}
#nav ul ul li a
{
font-size:18px;
text-transform:uppercase;
text-decoration:none;
color:white;
background-image:url('bg.jpg');
padding:5px;
display:inline-block;
}
#nav ul li
{
position:relative;
}
#nav ul li a:hover
{
background:grey;
}
#nav ul ul li
{
display:none;
position:absolute;
top:30px;
left:0px;
width:400px;
}
#nav ul ul li a
{
padding:15px;
}
#nav ul li:hover ul li
{
display:block;
}

You only see the last submenu item because they are all displayed at the same place because of the position:absolute rule.
You should use position:absolute with the whole submenu ul and not each li items.

ul {
margin:0;
padding:0;
list-style-type: none;
}
ul > li {
display:inline-block;
height:20px;
position:relative;
}
ul > li > ul {
position: absolute; top:20px;
display: none;
}
ul > li:hover > ul {
display: block;
}
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>Services
<ul>
<li>Services</li>
<li>Services</li>
<li>Services</li>
</ul>
</li>
</ul>

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 */
}

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>