I have this list, and I have tried a bunch of css that I think is making my html display incorrectly. I am trying to get the .submenu list items to show on hover and hide when they are not highlighted.
http://jsfiddle.net/marcuccione/Lwjsry4h/
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Fly Hays</title>
<--<link rel="stylesheet" type="text/css" href="navbarsnippet.css"> -->
<style>
*{
font-family:Helvetica, Arial, Tahoma, Verdana, sans-serif;
padding:0;
margin:0;
}
.clearfix:after {
display:block;
clear:both;
}
nav {
height:50px;
margin:0px auto;
background-color:#2E2728;
}
nav ul{
height:50px;
width:750px;
margin:0 auto;
font-weight:bold;
}
nav ul li {
margin:0px;
list-style-type:none;
width:150px;
float:left;
}
nav ul li .submenu{
}
nav ul li .submenu a, li a{
text-decoration:none;
color:white;
line-height:50px;
display:block;
text-align:center;
}
nav a {
transition:all linear 0.15s;
}
.submenu a:hover, li a:hover{
background-color:#c0c0c0;
color:#830300;
z-index:1;
opacity:1;
}
.submenu{
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
position:absolute;
}
.submenu li a {
padding:10px 30px;
display:block;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Flights
<ul class="submenu">
<li>Book a Flight</li>
<li>Check Flight Status</li>
<li>View Timetable</li>
<li>TSA Guidelines</li>
<li>Denver Airport Map</li>
<li>Directions to the Airport</li>
</ul>
</li>
<li>Visitors
<ul class="submenu">
<li>Places to Eat</li>
<li>Things to See</li>
<li>Where to Stay</li>
</ul>
</li>
<li>General Aviation
<ul class="submenu">
<li>Field Condition Report</li>
<li>Airport Information</li>
<li>Prior Permission Request</li>
<li>Businesses at the Airport</li>
</ul>
</li>
<li>Transportation
<ul class="submenu">
<li></li>
</ul>
</li>
<li>About Us
<ul class="submenu">
<li>FAQ's</li>
<li>Events</li>
<li>Media Gallery</li>
<li>Public Notices</li>
<li>History</li>
<li>Rent the Conference Room</li>
<li></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I changed a few things around, added some javascript and changed the opacity on submenu in css. Here is the working jsfiddle version
$(document).ready(function(){
$('#flight').hover(function(){
$('#flightsub').fadeTo('fast', 1);
});
});
Related
CSS
#nav > li {
list-style:none;
letter-spacing:3px;
}
<ul id="nav">
<li>Home</li>
<li>About US</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Mobile Development</li>
<li>Consultancy</li>
</ul>
</li>
</ul>
I am using child selector to make the list style none, which only unstyles children list items. But, letter-spacing property is adding spacing to the grandchildren list items. It is confusing me.
The default behaviour of letter-spacing, text-* and font-* are to inherit from the parent. So you have reset on your children:
#nav > li {
list-style: none;
letter-spacing: 3px;
}
#nav > li li {
letter-spacing: normal;
}
<ul id="nav">
<li>Home</li>
<li>About US</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Mobile Development</li>
<li>Consultancy</li>
</ul>
</li>
</ul>
#nav > li {
list-style:none;
letter-spacing:3px;
ul{
list-style:none;
letter-spacing:0;
}
}
or
#nav > li {
list-style:none;
letter-spacing:3px;
ul{
li{
list-style:none;
letter-spacing:0;
}
}
}
On Firefox, the navigation menu appears below the area the navigation menu is supposed to be in. On Internet Explorer the drop-down does not work. It works fine on Chrome and Opera. I used the visibility:hidden and visibility:visible for the sub-menus.
Here is what it looks like on Firefox: http://i.imgur.com/bQbKvhw.png
Here is how it supposed to look: http://i.imgur.com/LKip7Dv.png
The menu goes ALL the way across the screen.
Here is the HTML:
<div id="header">
<img src="jawapa-logo.png" id="logo" height="60px" width="60px;">
<ul>
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a>
My Projects ▿
</a>
<ul>
<li>
<a href="upside-down-text.html">
Upside Down Text
</a>
</li>
<li>
<a href="random-number.html">
Random Number
</a>
</li>
<li>
<a href="code-editor.html">
Code Editor
</a>
</li>
<li>
<a href="templates.html">
Website Templates
</a>
</li>
<li>
<a href="snake-game.html">
Snake Game
</a>
</li>
<li>
<a>
Random ▹
</a>
<ul>
<li>
<a href="matrix.html">
Matrix
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
<li>
<a href="about.html">
About
</a>
</li>
</ul>
</div>
Here is the CSS:
#logo {
margin-right:20px;
}
#header {
height:65px;
line-height:65px;
background-color:#222222;
margin-top:0px;
padding-left:20px;
padding-right:20px;
border-bottom:3px solid #28B899;
}
#header a {
color:#999999;
text-decoration:none;
display:block;
text-align:center;
}
#header a:hover {
}
#header ul {
list-style:none;
display:inline-table;
padding:0;
margin:0;
position:absolute;
}
#header ul li {
display:inline;
position:relative;
background-color:transparent;
width:150px;
float:left;
padding:0;
margin:0;
text-align:left;
min-width:200px;
}
#header ul li:hover {
background-color:#111111;
}
#header ul ul {
visibility:hidden;
position:absolute;
}
#header ul ul li {
background-color:#333333;
min-width:200px;
text-align:left;
}
#header ul ul li:hover {
background-color:#222222;
}
#header ul li:hover > ul {
visibility:visible;
position:relative;
}
#header ul ul ul {
visibility:hidden;
position:absolute;
}
#header ul ul li:hover > ul {
visibility:visible;
position:absolute;
left:100%;
top:0;
border-bottom:none;
}
The problem is that you have not defined a top value on #header ul.
This should fix it:
#header ul {
...
top: 0;
}
JSFiddle example
im trying to create a Horizontal menu:
CSS
#menu {
display:inline;
float:right;
}
#menu > li {
display:inline;
list-style:none;
width:40px;
border-top:4px solid #FFFFFF;
padding-top:20px;
margin-top:25px;
}
HTML :
<div id="menu">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</div><!-- menu -->
i have added display:inline; but they are not displaying correctly with the top-border when i remove the display:inline; it works fine but they all display in a vertical list
You are missing UL tag. Now I have update your code. check below code
CSS
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline;
list-style:none;
width:40px;
border-top:4px solid #000;
padding-top:20px;
margin-top:25px;
}
HTML
<div id="menu">
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!-- menu -->
JSFiddle Demo
You're missing a UL element, which basically says that the following list items are part of an un-ordered list. Here it is in a fiddle:
http://jsfiddle.net/VgRYv/
<div id="menu">
<ul id="navlist">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div>
ul#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
use disply:inline-block; for the li and just float for the ul
http://jsfiddle.net/c94hG/1/
(I have changed the color of the border for display purposes. it was white)
use display: inline-block; instead of inline (or, as alternative, apply a float: left to every <li>)
add float:left to li,or add display:inline-block to li
try this
#menu {
display:inline;
float:right;
}
#menu > li {
list-style:none;
width:40px;
border-top:4px solid #FFFFFF;
padding-top:20px;
margin: 25px 8px 0 8px;
float:left;
}
Everything works, text is in the middle of an anchor. Whole ul tag is in the middle of the page, but this is only problem. When text is little bit longer it breaks and my anchor tag goes up, I'm not sure what is the problem. check it live and mojgolub(.)com
HTML
<div id="speeddial-wrapper">
<nav>
<ul>
<li> POPIS GOLUBOVA </li>
<li> POPIS GOLUBOVA MALO VECI TEKST NEGO UOBICAJENO</li>
<li> POPIS GOLUBOVA></li>
<li> POPIS GOLUBOVA </li>
<div style="clear:both; margin-top:25px;"></div>
<li> POPIS GOLUBOVA </li>
<li> POPIS GOLUBOVA MALO VECI TEKST NEGO UOBICAJENO</li>
<li> POPIS GOLUBOVA></li>
<li> POPIS GOLUBOVA </li>
</ul>
</nav>
</div>
CSS
#speeddial-wrapper
{
width:90%;
margin:0 auto;
margin-top:30px;
text-align:center;
}
#speeddial-wrapper nav ul
{
list-style-type:none;
margin:0;
padding:0;
}
#speeddial-wrapper nav ul li
{ display:inline-table;
}
.speeddial
{
font-family:speeddialfont;
color:#FFFFFF;
text-align:center;
text-decoration:none;
height:200px;
width:200px;
border:7px solid #AEAEAE;
background-color:#49A655;
border-radius:5px;
display:table-cell;
vertical-align:middle;
margin-right:30px;
margin-bottom:30px;
}
Change the display
#speeddial-wrapper nav ul li
{
display:inline-table;
}
to
#speeddial-wrapper nav ul li
{
display:inline-block;
}
Add this rule
#speeddial-wrapper nav ul li { vertical-align: middle; }
Good afternoon,
My current task is to create several stylesheets for a website. One of the websites styles requires me to create a drop-down menu, I however am not allowed to change the HTML code at all, so basically I'm asked to create a drop-down like menu with CSS only.
Here is the HTML code I have to display in form of a drop-down menu:
<div id="global-nav">
<ul>
<li>Products
<ul>
<li>Widgets</li>
<li>Sites</li>
<li>Gadgets</li>
</ul>
</li>
</ul>
There however are different requirements as well:
There shouldn't be any dots or circles preceding each list item.
I'm wondering whether it is possible to accomplish this task with CSS only or not.
Is there any way I can do this with CSS?
Vertical menu with horizontal expansion
jsBin demo
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
/*VERTICAL MENU*/
nav.vertical{
position:relative;
width:200px;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
background:#667;
transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;
}
/* INNER UL HIDE */
nav.vertical ul ul{
position:absolute;
left:0%;
top:0;
width:100%;
visibility:hidden;
opacity:0;
transition: transform 0.2s;
transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
left:100%;
visibility:visible;
opacity:1;
transform: translateX(0px);
}
<nav class="vertical">
<ul>
<li>Home</li>
<li>Products +
<ul>
<li>Widgets</li>
<li>
Sites +
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</li>
<li>
Gadgets +
<ul>
<li>Gadget 1</li>
<li>Gadget 2</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Vertical menu (mobile only)
this one might best suit for mobile (smaller screens CSS) otherwise the show/hide would troll with User Experience
jsBin demo
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
/*VERTICAL MENU*/
nav.vertical{
position:relative;
background:#667;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;
}
/* INNER UL HIDE */
nav.vertical ul ul{
background:rgba(0,0,0,0.1);
padding-left:20px;
transition: max-height 0.2s ease-out;
max-height:0;
overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
max-height:500px;
transition: max-height 0.25s ease-in;
}
<nav class="vertical">
<ul>
<li>Home</li>
<li>Services +
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Products +
<ul>
<li>Widgets</li>
<li>
Sites +
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</li>
<li>Gadgets +
<ul>
<li>Gadget 1</li>
<li>Gadget 2</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Just a slightly enhanced version of the great solution above.
<style type="text/css">
#global-nav {
width: 121px;
float: left;
background: #e8eef4;
}
#global-subnav {
width: 121px;
background: #09C;
}
#global-nav a {
color: #034af3;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
text-indent: 10px;
text-decoration:none;
font-weight: bold;
width: 100%;
}
#global-nav ul{
background: yellow;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: orangered;
position: relative;
top: -10px;
left: 40px;
}
#global-nav li{
list-style: none;
border-bottom: #5C87B2 solid;
border-width: 3px;
}
#global-nav ul ul li{
display:none;
}
#global-nav li:hover {
background: #fff;
}
#global-nav li:hover ul li{
display:block;
}
</style>
<div id="global-nav">
<ul>
<li>One
<div id="global-subnav">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</li>
<li>Two
<div id="global-subnav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</li>
</ul>
</div>
The code is wrong on the last post.
You can't have more than 1 ID with the same name in a document, so if you use the code above, you'll need to change
ID="global-subnav" to class="global-subnav"
and then change the CSS from
#global-subnav to .global-subnav