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;
}
}
Related
I'm working on a site but I'm trying to set the navigator bar at the right and that works good but when I'm trying to give the <ul> a color it doesn't give it the color if I remove float:right; it only works.
Does someone knows how to do this?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styling.css">
<head>
<body>
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
div.navi li {
font-size:30px;
display:inline-block;
width:12%;
float:right;
}
div.navi {
background-color:red;
}
Your div should have some width and height
div.navi li {
font-size:20px;
padding-right:10px;
float:right;
}
.navi {
background-color:red;
width:100%;
height:20px;
}
ul{
list-style:none;
}
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
div.navi {
background: red;
float: right;
width: 12%;
}
div.navi li {
font-size: 30px;
display: inline-block;
}
Please try
Since div.navi only contains floated elements, it doesn't have any height of its own (i.e. height 0), so you don't see any background color.
To avoid this (and let div.navi wrap the lielements), add overflow: auto to div.navi
div.navi li {
font-size: 30px;
display: inline-block;
padding: 0 10px 5px 10px;
float: right;
}
div.navi {
background-color: red;
overflow: auto;
}
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
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;
}
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>
I am attempting to create a drop down menu bar for the "Our Collections" but my attempts are not working. Can anyone lend me a hand please. Below is my html and the css for it. I have removed my random trial and errors for it, and kept .menu ul ul {display:none}
* html .clearfix {
height: 1%;
overflow: visible;
}
* + html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
body {
margin: 0;
padding: 0;
}
.menu {
text-align: center;
background-color: #222;
}
.menu ul {
list-style: none;
height: auto;
padding: 40px;
width: 500px;
float: right;
}
.menu ul li {
float: left;
padding: 0 20px;
font-size: 20px;
font-family: Impact;
}
.menu ul ul {
display: none;
}
.menu ul li a {
color: white;
text-decoration: none;
transition: 350ms;
}
.menu ul li a:hover {
color: #ed702b
}
.title {
float: left;
font-size: 40px;
margin-left: -173px;
margin-top: 37px;
}
.title a {
text-decoration: none;
color: white;
}
.center {
width: 980px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="includes/site.css">
<title>Home</title>
</head>
<body>
<div class="menu">
<div class="center clearfix" style="height: 124px">
<h1 class="title">My first web</h1>
<ul class="clearfix">
<li>Home
</li>
<li>Our Collections
</li>
<ul>
<li>First Collection
</li>
<li>Second Collection
</li>
</ul>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
I got an old menu I made a long time ago.
I think you can work from this: Fiddle
Link 3 is the dropdown menu. Just look at the Fiddle
<div id="mainnav">
<nav>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>2011</li>
<li>2012</li>
<li>2013</li>
</ul>
</li>
<li>link4</li>
<li class="end">link5</li>
</ul>
</nav>
</div>
If you need more help just say so.
I threw this together really quick for you as well. It's nothing elegant, but it's a great starting point and uses your original skeleton for your menu
Link to the fiddle:
http://jsfiddle.net/Lgpapw2p/
<ul class='menu'>
<li>
Home
</li>
<li>
Our Collections
<ul>
<li>First Collection</li>
<li>Second Collection</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
.menu{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
.menu li{
float:left;
margin-right:10px;
position:relative;
}
.menu a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
.menu a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
.menu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.menu ul li{
padding-top:1px;
float:none;
}
.menu ul a{
white-space:nowrap;
}
.menu li:hover ul{
left:0;
}
.menu li:hover a{
background:#008;
text-decoration:underline;
}
.menu li:hover ul a{
text-decoration:none;
}
.menu li:hover ul li a:hover{
background:#333;
}
I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...
<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
<li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink" id="second"> Second
<div class= "secondsubmenu">
<ul>
..and so on
</ul>
</div>
Right now, my css is looking like
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink:hover
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited
{
background-color:#ADD8E6;
color:#FFFFFF;
}
Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is
.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red;
width : 930px;
height : 25px;
z-index : 10;
}
But now that I added the links (made every list element within an block), firstsubmenu no longer appears.
The css for each link looked something like this
.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.
You can use the below css and create pure css based menu.
Css:
body { padding: 3em; }
#navbar * { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}
#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul {
display:block;
}
#navbar:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
Structure:
<div id="navbar">
<ul>
<li>Home</li>
<li>Abous Us »
<ul>
<li>About us 1</li>
<li>About us 2 »
<ul>
<li>XXX
<li>XXX
<li>XXX
</ul>
</li>
</ul>
</li>
<li>Download</li>
<li>Menus »
<ul>
<li>Menus 1</li>
<li>Menus 2 »
<ul>
<li>Menus 2-1
<li>Menus 2-2
<li>Menus 2-3
</ul>
</li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
jsBin live demo
I had to fix lot of errors in your HTML. Here is the css:
#navbar ul{
list-style:none;
margin:0; padding:0;
display:table;
}
#navbar li{
top:0px;
background:#bbf;
display:inline-block;
width:100px;
}
#navbar li ul li{
display:none;
}
#navbar li:hover li{
display:block;
}
And the fixed HTML:
<div id="navbar">
<ul>
<li>
First
<ul class="firstsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
<li>
Second
<ul class="secondsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
</ul>
</div>
Now, after it works, do with colors whatever you want.
Use also alt tags in your links and images, it improves your SEO and compilance.