I'm brand new to HTML and CSS, and right now I'm following this tutorial. My problem see picture is that the items in my drop-down list are not in a vertical line, but all cluttered together.
I'm sure it's a simple problem with a simple solution but I am not making any progress finding one...
I would be so grateful for some suggestions! :)
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
All you have to do is add position:relative to #nav ul li :
#nav ul li {
float: left;
position: relative;
}
but you should use this only for the li parent and you shouldn't use float:left in the li of the ul child.
So your css will become like this
#nav > ul > li {
float: left;
position: relative;
}
Add a specific width to #nav ul ul, gave it 200px as example considering parent ul width
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
width: 200px;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
You have applied rules CSS for all children of the ul parent, so all chidren of ul ul they will be inherited the rule of parent CSS.
Try to use selector reference '>' when you want to target only parent element
For this exemple you just change
#nav ul li {
float: left;
}
by
#nav > ul >li {
float: left;
}
Related
I am currently having difficulties trying to get a bar I made using hover to appear in the a element bottom instead of the top, do you guys have any suggestions? I am new with CSS and been googling for the better part of 2 hours and cannot find a solution.
Heres the code I am using
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css.css">
<title>Untitled Document</title>
</head>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
<body>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
height: 40px;
padding: inherit;
}
nav li:hover {
background-color: white;
height: 5px;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
padding: 18px 12px;
position: relative;
text-transform: uppercase;
}
Instead of setting the height of nav li, just set the padding of li and add border-bottom color to the hovered element. Also remove the padding of nav li a
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
/* height: 40px; */
padding: 10px 15px;
}
nav li:hover {
border-bottom: 5px solid #fff;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
/* padding: 18px 12px; */
position: relative;
text-transform: uppercase;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
I'm posting here to get some help.
I'm trying to make a simple dropdown menu and I'm stacked with the submenus (limpieza and balance).
What i'm trying to achieve here is to make the limpieza and balance buttons have the same width and text align as the rest of the buttons. I just dont know how. It looks like once the relative attribute is added to the container and the absolute attribute is added to limpieza and balance, I can't control their width or text align anymore. I guess is bc they are out of its cointainer. I'm really confused here since this is the first time I try css.
I would appreciate if some1 could provide some help.
Here is the code.
#charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
body {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
/*ESTILOS GENERALES*/
.header {
left: 0;
position: fixed;
top: 0;
width: 100%;
background:white;
}
.barrasup {
background:#203c6e;
padding-top: 10px;
padding-bottom: 10px;
min-height: 29px;
z-index: 2;
}
.contenedor {
margin: 0 auto;
max-width: 1200px;
}
.social {
background: #203c6e;
display: block;
float: none;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
width: 75px;
}
.instasocsup {
margin-right: 10px
}
/*MENU*/
.barrainf {
margin-top: 10px;
}
.menu {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
list-style:none;
padding: 0;
}
.menu li {
line-height: 2.5rem;
position: relative;
}
.menu li .item2 ul {
position: absolute;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > ul > li >div > a {
text-decoration:none;
color: white;
display: block;
}
.menu li ul {
display: none;
}
.menu li:hover ul {
display:block;
}
.item1 {
margin-left: 10px;
margin-right: 10px;
background: white;
}
.item2, .item3, .item4, .item5 {
margin-left: 0px;
margin-right: 10px;
background:white;
}
.subitem1, .subitem2 {
margin-left: 0px;
background: #203C6E;
color: white;
}
/*1ER NIVEL*/
.menu > ul{
background: #DF2529;
display: table;
width:100%;
}
.menu > ul > li {
float: left;
width: 20%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin tÃtulo</title>
<link href="css/styleIndigo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="barrasup">
<div class="contenedor">
<div class="social">
<img src="Instagram_logo.png"></img>
<img src="twitter_logo.png"></img>
</div>
</div>
</div>
<div class="barrainf">
<div class="menu">
<ul>
<li><div class="item1">Inicio</div></li>
<li><div class="item2">Comprar
<ul>
<li id="listamenu"><div class="subitem1">Balance</div></li>
<li id="listamenu"><div class="subitem2">Limpieza</div></li>
</ul>
</div></li>
<li><div class="item3">Blog</div></li>
<li><div class="item4">Quienes somos</div></li>
<li><div class="item5">Contacto</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just use calculate css for width that works with inherited table display properties. View it here http://codepen.io/anon/pen/reMpRj
.menu > ul > li > div > ul {
width: calc(100% - 10px);
}
Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).
However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
color: #FFCC00;
font-weight: bold;
font-size: 12px;
}
.style4 {
color: #000099;
font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
* { padding: 0; margin: 0; }
body { padding: 5px; }
ul { list-style: none; margin: auto}
ul li { float: left; padding-right: 0px; position: relative; }
ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
ul a:hover { background-color: #0066FF; }
li > ul { display: none; position: absolute; left: 0; top: 100%; }
li:hover > ul { display: inline; }
li > ul li { padding: 0; padding-top: 0px; }
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table;
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display:inline
}
-->
</style></head>
<body>
<div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
<li>
Home
</li>
<li>About Us
<ul>
<li>History</li>
<li>Guest Comments</li>
</ul>
<li>News</li>
<li>Accommodation
<ul>
<li>Rooms</li>
<li>Bedrooms</li>
<li>St Joseph's Annexe</li>
</ul>
<li>Visiting St Katharine's
<ul>
<li>Retreats</li>
<li>B&B</li>
<li>Events</li>
<li>Conferences</li>
<li>Catering</li>
</ul>
<li>Contact Us
<ul>
<li>Find Us</li>
</ul>
<li>Walled Garden</li>
<li>Sue Ryder Legacy
<ul>
<li>Sue Ryder</li>
<li>Prayer Fellowship</li>
<li>LRWMT</li>
</ul>
</ul>
</body>
You aren't really using a table, but you can add something like this: #horizontal-list {margin: auto; width: 850px;}
JS Fiddle with your code
I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/
am having a problem getting multiple levels working on a responsive css menu, the base of the menu i have followed this tutorial on tuts.com
I need more than 2 sub levels on this menu for my site, though when i add the extra 's to the html, the extra level is not working as it should, am sure its possible to add an extra level to the original menu, but i cant figure out what extra css i need, i had tried adding extra css code for li li li li but thats not working for me.
the extra level displays wwith the 2nd sublevel, where it should only display for the hover of the 2nd sub-menu.
i have created a jsfiddle (my first one) here: http://jsfiddle.net/DizzyHigh/Bpubu/4/
html:
<div id="left_container"></div>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test"> HOME
</li>
<li> LOCATIONS
<ul class="nav">
<li> Boroughs
<ul class="nav">
<li> Enfield
<ul>
<li>E-Locations
</li>
<li>E-Unit Bases
</li>
<li>E-Parking
</li>
</ul>
</li>
<li> Barnet
<ul>
<li>B-Locations
</li>
<li>B-Unit Bases
</li>
<li>B-Parking
</li>
</ul>
</li>
</ul>
</li>
<li> Maps
<ul class="nav">
<li> Enfield map
<ul>
<li>ME-Locations
</li>
<li>ME-Unit Bases
</li>
<li>ME-Parking
</li>
</ul>
</li>
<li> Barnet Map
<ul>
<li>MB-Locations
</li>
<li>MB-Unit Bases
</li>
<li>MB-Parking
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> CONTACT
</li>
<li> LINKS
</li>
</ul>
</div>
<div id="right_container"> </div>
css:
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
JS:
$(document).ready(function() {
var ww = document.body.clientWidth;
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
})
can any css gurus point me in the right direction?
Bryn try the follwing code:
I use 'NormalMenu' class for css hover event on normal menu
Java Script
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$('.nav').removeClass('NormalMenu').find('ul').hide();
$(".nav li a").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
var _sub = $(this).siblings('ul')
if($(_sub).is(':visible')){
$(_sub).hide();
$(_sub).find('ul').hide();
}else{
$(_sub).show();
}
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav li a").unbind('click');
$(".nav").show().addClass('NormalMenu').find('ul').removeAttr('style');
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
/* background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: right;
}
ul.NormalMenu ul{
width: 100%;
display:none;
position: absolute;
}
ul.NormalMenu li{
line-height:40px;
}
ul.NormalMenu li:hover > ul{
width: 100%;
display:block;
left:0;
}
ul.nav ul li{
background: #1d7a62;
}
ul.NormalMenu li li:hover> ul{
width: 100%;
display:block;
top:0;
left:100%;
}
ul.nav ul li li{
background: #1d7a00;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
/*background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.nav ul{
margin-left:5%;
width: 95%;
}
ul.nav li{
line-height:30px;
}
}
See Demo: http://jsfiddle.net/ducwidget/Bpubu/21/
you can check this out ...I have made this menu in Plain html5 and css https://github.com/Saransh27/Dashboard. You can always extend it to you needs and let me know if you have any questions.