I am having some problem with centering this horizontal navigation bar. Here is my JSFiddle: http://jsfiddle.net/W796k/embedded/result/
I'm looking for two things:
1. How can I center the navigation bar horizontally without putting a specified width?
2. How to further add some more 'li' in the 'ul' so that all the 'li's wil be squeezed automatically to make room for the new added 'li's in the navigation bar?
Have I made everything clear? Ask me if you need more info. Thank U all in advance.
Here is my code:
<Doctype! html>
<html>
<head>
<title> horizontal dropdown menu </title>
<style type="text/css" media="screen">
a{
font-family: "verdana", sans-serif;
font-weight: bold;
}
nav ul{
list-style: none;
position: relative;
background: #efefef;
background: linear-gradient (top,#efefef,#bbbbbb);
background: moz-linear-gradient (top, #efefef,#bbbbbb);
background: webkit-linear-gradient (top,#efefef,#bbbbbb);
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
padding: 0 20px;
border-radius: 10px;
display: inline-table;
}
nav ul li{
display: inline-block;
border-right: 1px solid #fff;
}
nav ul li:hover{
background: #5b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li a{
text-decoration: none;
color: #000;
padding: 20px 20px;
display: block;
}
nav ul li:hover a{
color: #ffffff;
}
nav ul ul{
background: #5f6975;
border-radius: 0; padding: 0;
position: absolute; top: 100%;
display: none;
}
nav ul li:hover > ul{
display: block;
}
nav ul ul li{
display: block;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
border-right: 0;
position: relative;
}
nav ul ul li a{
padding: 10px 40px;
}
nav ul ul li a:hover{
background: #4b545f;
}
nav ul ul ul{
position: absolute; left: 100%; top: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Works ↓
<ul>
<li> Photoshop </li>
<li> Illustrator </li>
<li> Web Design →
<ul>
<li> HTML </li>
<li> CSS </li>
</ul>
</li>
</ul>
</li>
<li> Downloads ↓
<ul>
<li> Softwares </li>
<li> Ebooks </li>
</ul>
</li>
<li> About Us </li>
<li> Contact </li>
</ul>
</nav>
</body>
</html>
you can use
nav { text-align: center }
IMO,
nav { margin: 0 auto;}
Explanation: "0" will set the "margin-top" & "margin-bottom" to zero. And "auto" property will set left and right margins equally thus setting nav to the centre;
Apply this style:
nav{
margin: 0 auto;
display: table;
}
demo
Can't you just use:
nav { text-align: center }
In your CSS
Well, you can use a table instead of list. If you are using list, giving width will not set your added list items as you are wishing.
1 & 2.making it center without giving a specific width can be avoided using the table.Give a width to your table and there will be no problem even if you add an extra element to your table.It will auto adjust in the given width with out disturbing your layout.
Simply have this line of code in your stylesheet.
nav {
text-align: center
}
text-align: center; will do the magic for you..
the following will be the css
*{
list-style: none;
margin:0;
padding: 0;
}
nav table{
border-spacing: 10px 0;
}
.make-block{
position:relative;
}
nav table td span{
clear:both;
text-decoration: none;
display: table-cell;
white-space: nowrap;
position:relative;
}
nav table td:hover{
background: #000;
color:#fff;
}
nav table td dl {
display: none;
position: absolute;
}
nav table td:hover dl{
display: block;
}
dd{
padding-right: 20px;
background: #fff;
overflow: hidden;
display: inline-block;
position:relative;
}
ul.l1 li{
clear: both;
font-weight:bold;
font-size:10px;
padding: 5px 0;
}
nav a{
text-decoration: none;
}
.l1{
display: table-cell;
padding: 6px;
white-space: nowrap;
}
the following is the mark-up that you can use.
<nav>
<table>
<td>
<div class="make-block">
<span>a</span>
<dl>
<dd>
<ul class="l1">
<li>b</li>
<li>c</li>
</ul>
</dd>
</dl>
</div>
</td>
<td>
<div class="make-block">
<span>b</span>
<dl>
<dd>
<ul class="l1">
<li>b</li>
<li>c</li>
</ul>
</dd>
</dl>
</div>
</td>
</table>
</nav>
a{
font-family: "verdana", sans-serif;
font-weight: bold;
}
nav ul li{
display: inline-block;
border-right: 1px solid #fff;
}
nav ul li:hover{
background: #5b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li a{
text-decoration: none;
color: #000;
padding: 20px 20px;
display: block;
}
nav ul li:hover a{
color: #ffffff;
}
nav ul ul{
background: #5f6975;
border-radius: 0; padding: 0;
position: absolute; top: 100%;
display: none;
}
nav ul li:hover > ul{
display: block;
}
nav ul ul li{
display: block;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
border-right: 0;
position: relative;
}
nav ul ul li a{
padding: 10px 40px;
}
nav ul ul li a:hover{
background: #4b545f;
}
nav ul ul ul{
position: absolute; left: 100%; top: 0;
}
/* flexbox */
nav {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
nav ul {
background-color: cornflowerblue;
padding: 1rem;
margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || flexbox */
<nav>
<ul>
<li> Home </li>
<li> Works ↓
<ul>
<li> Photoshop </li>
<li> Illustrator </li>
<li> Web Design →
<ul>
<li> HTML </li>
<li> CSS </li>
</ul>
</li>
</ul>
</li>
<li> Downloads ↓
<ul>
<li> Softwares </li>
<li> Ebooks </li>
</ul>
</li>
<li> About Us </li>
<li> Contact </li>
</ul>
</nav>
Related
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle
Hi I am trying to keep my top navigation menu centered while left aligning the submenus that come out. What do i have to change in order to accomplish this? THanks!
<div id="container">
<ul id="nav">
<li>Home</li>
<li>Services <img src="images/tri2.gif">
<ul>
<li>Massages</li>
<li>Body Treatments</li>
<li>Facials & Waxing</li>
<li>Hair & Nails</li>
</ul>
</li>
<li>Packages <img src="images/tri2.gif">
<ul>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
</ul>
</li>
<li>Specials</li>
<li>Contacts</li>
</ul>
</div>
Here is the CSS:
#container {
width: 740px;
margin: -16px auto;
padding: 0 0 0 0px;
font: 100% Helvetica, Arial sans-serif;
font-size:14px;
}
ul#nav {
line-height: 23px;
padding: 0;
}
ul#nav li {
float: left;
position: relative;
list-style: none;
background: #006666;
}
ul#nav li a {
width: 146px;
display: block;
border: 1px solid #000;
text-align: center;
text-decoration: none;
color: #fff;
}
ul#nav li:hover {background: #990000;}
ul#nav ul {
position: absolute;
padding: 0;
left: 0;
top: 23px;
visibility: hidden;
}
ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: yellow;}
http://jsfiddle.net/chuckie365/5LuCA/
what you need here is an additional CSS targeting that a elements:
ul#nav ul li a {
text-align:left;
}
Heres is the demo http://jsfiddle.net/5LuCA/10/
I have been reading and searching the whole day long. I even read this article and tried to work it out but with no success.
So, what I want to do is a CSS menu with sub menus and have the sub menus centered to the page. This is what I have done so far. What I want is that the submenus show up completely centered to the page. Is this possible?
Here's the HTML:
<div id="menu_panel">
<div id="menu_2border">
<div id="menu_section">
<div id='menu1'>
<ul>
<li class='first sub'><a href='#'><span>Hem</span></a>
<ul>
<li><a href='#'><span>Privat</span></a></li>
<li><a href='#'><span>Om Robust</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Koncept</span></a>
<ul>
<li><a href='#'><span>Insikt</span></a></li>
<li><a href='#'><span>Koncept</span></a></li>
<li><a href='#'><span>Aktivering</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Uppdrag</span></a>
<ul>
<li><a href='#'><span>Företag</span></a></li>
<li><a href='#'><span>Privat</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Blogg</span></a>
<ul>
<li><a href='#'><span>Arkiv</span></a></li>
<li><a href='#'><span>Kategori</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Om Robust</span></a>
<ul>
<li><a href='#'><span>Vad erbjuder vi?</span></a></li>
<li><a href='#'><span>Vilka är vi?</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Kontakter</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
And the CSS:
#menu_panel {
width:100%;
height: 49px;
color:#4b4b4b;
display:block;
border-top:#efefef 1px solid;
}
#menu_2border {
width:100%;
border-top:#7a7a7a 1px solid;
}
#menu_section {
width: 960px;
height: 29px;
margin:auto;
padding: 0 0 0 30px;
color:#4b4b4b;
background-color:#fff;
}
#menu1 ul,
#menu1 li,
#menu1 span,
#menu1 a {
margin: auto;
padding: 0;
position: relative;
}
#menu1 {
height: 29px;
background: #fff;
margin:auto;
}
#menu1:after,
#menu1 ul:after {
content: '';
display: block;
clear: both;
}
#menu1 a {
background: #fff;
color: #4b4b4b;
display: inline-block;
font-size: 15px;
line-height: 29px;
padding: 0px 40px;
text-decoration: none;
}
#menu1 ul {
list-style: none;
/* float: left; */
}
#menu1 > ul > li {
float: left;
}
#menu1 li .mainmenu {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover:after { /* faz as setas debaixo dos items do menu */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 7px solid #fff;
margin-left: -10px;
}
#menu1 > ul > li.sub {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li.first {
border-left:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover > a {
background: #efefef;
}
#menu1 .sub {
z-index: 1;
}
#menu1 .sub:hover > ul {
display: block;
background-color:#
}
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin:auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
#menu1 .sub ul li {
*margin-bottom: -1px;
}
#menu1 .sub ul li a {
background: #fff;
filter: none;
font-size: 13px;
display: block;
line-height: 120%;
padding: 10px 30px;
}
Notice that there are pointing arrows in each item of the menu, and they should stay where they are. What should be centered are the big submenu rectangles.
Many thanks in advance!
I dont explicitly understand your situation, do you need something like this? If so, i will make clear understanding on it.
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin-left: -401.5px; /* width divided by 2 */
left: 50%;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
Example / Screen Result
You need to apply absolute positioning to your drop down menu, and have it relate to your top-level menu by applying relative positioning only to it. That direct relationship means you can set your drop-down menu to left: 0 and right: 0, sticking it to the left-most side and right-most side respectively of the top-level menu regardless of where it appears in your HTML (ie. it will match the width of your top-level ul).
Because you have set position:relative to a number of items, and some of your code might be dependant on that, I can't easily change your code to make it work. However, I put together this quick demonstration on jsfiddle to illustrate my explanation. I hope it helps.
I have created the navigation menu listed below:
<div class="menu">
<ul>
<li>
<a href="index.php" target="_self" >Home</a>
</li>
<li>
<a href="preparation.php" target="_self" >Gallery</a>
<ul>
<li>
Storybooks
</li>
<li>
Preparation
</li>
<li>
Ceremony
</li>
<li>
Personal Shooting
</li>
<li>
First Dance
</li>
<li>
Details
</li>
</ul>
</li>
<li>
<a href="login.php" target="_self" >Customers</a>
</li>
<li>
<a href="about.php" target="_self" >About</a>
</li>
<li>
<a href="contact.php" target="_self" >Contact</a>
</li>
</ul>
</div>
The CSS for this menu at the moment is:
.menu {
margin: 0px;
padding: 0px;
font-family: "Times New Roman";
font-size: 14px;
font-weight: bold;
color: #6D6D6D;
}
.menu ul {
height: 26px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
color: #6D6D6D;
display: block;
font-weight: normal;
line-height: 26px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover, .menu ul li:hover a {
background: #ca9875 url("menu_images/hover.gif") bottom center no-repeat;
color: #6D6D6D;
text-decoration: none;
}
.menu li ul {
/*background:#333333;*/
/*background: #B32267;*/
background: white;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
/*width: 225px;*/
width: 135px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
background: url('menu_images/sub_sep.gif') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
/*width: 225px;*/
width: 135px;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 26px;
font-size: 13px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background: #ca9875 url('menu_images/hover_sub.gif') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
.menu p {
clear: left;
}
I would like to know if there is a way to add second-level submenu to the category "Storybooks"? What i mean is that I would like to view another submenu in the right while i hover the mouse over the "Storybooks". Is this possible with css?
Appreciate any help, thanks.
I edited your code above to make it work, see http://jsfiddle.net/BVvc6/1/ for the new code.
Note: I added two menu points below Storybooks called Storybook 1 and Storybook 2. CSS is added to the bottom of the existing code (nothing altered above).
EDIT: You should clear up your CSS code a bit, e.g. use CSS selectors like > to match specific DOM levels.
I'm trying to use the pseudo class ( img:nth-child) in this project but I can't make it work (it's the last line in the css-part). Right now I'm just using the a simple function just to see how it works. The plan is to implement this pseudo class to add a right-border every 5th item. You can see the working code here: jsFiddle
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>module e2</title>
<link href="css/e2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class"main">
<ul class="nav">
<li><a class="mainNav" id="car_1" href="#"><p><img class="mainMenuImg" src="img/singel_car.png" />singelCars<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
<ul >
<li class="borders"><img class="" src="http://placehold.it/178x108/" /> <p class=""> Megane coupe cabriolet</p></li>
<li> <img class=""src="http://placehold.it/179x108/" /><p class=""> Megane </p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane coupe </p></li>
</ul>
</li>
<li><a class="mainNav" id="car_2" href=" #"><p><img class="mainMenuImg" src="img/items_car.png" />varebilder<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="car_3" href="#"><p><img class="mainMenuImg" src="img/ze.png" />z.e<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="security" href="#"><p>security </p></a>
</li>
<li><a class="mainNav" id="services" href="#"><p>service</p></a>
</li>
<li><a class="mainNav" id="aboutRenault" href="#"><p>about</p></a>
</li>
<li><a class="mainNav" id="more" href="#"><p>more<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
</ul> <!-- ends #nav -->
</div> <!-- ends main -->
</body>
</html>
-------------------------------------
body { margin: 0; font-size: 12px; line-height: 1.231; font-family:Arial, Helvetica, sans-serif;}
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* =============================================================================
main
========================================================================== */
.main img{ margin: 0;}
.main{ margin: auto; width: 900px;/* background:url(http://placehold.it/900x500/e67c78);*/}
.nav{ margin:auto; padding:0; list-style-type:none; list-style-position:outside; float: left; background: #CCC; }
.nav li a, .nav li{ float: left;}
.nav li{ position:relative; list-style: none;}
.nav li p{ margin-top: 12px; }
.nav li a{ text-decoration: none; background: #2a2a2a; color: #FFF; }
/*.main #nav .centerText img{ border-left: 1px solid black; border-bottom: 1px solid black; }*/
/*=====================================================================*/
.main a.mainNav, a.mainNav:link, a.mainNav:visited {display: block; height: 49px; background: #282828; border-right: 1px solid #797979; margin-top:0px; text-align:center; color: #fff; text-transform: uppercase; line-height:25px; overflow:hidden; float: left;}
.nav #car_1{ width: 190px; margin-left: 0px; }
.nav #car_2{ width: 190px; }
.nav #car_3{ width: 106px; color: #1f8b95; }
.nav #security{ width: 147px; }
.nav #services{ width: 69px; }
.nav #aboutRenault{ width: 100px; }
.nav #more{ width: 92px; border-right: none; background:#f7b100; }
.nav li .arrowMargin { margin-left: 5px;}
/*main menu images/cars*/
.nav li p .mainMenuImg{ margin-right: 12px; }
/*centering text on images*/
.main .nav .centerText p{ position: absolute; top: 70px; margin-left: 20px; display: solid; font-family: 'Yanone Kaffeesatz', Arial; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; color: black;}
/*main a-tags*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
a.mainNav:hover {color:#000; background:#fff;}
a #more:hover{color:#000; background:#f7b100;}
/*==================UNDER LEVELS======================================*/
.nav li ul{ display: none;/** switch: on/off to show the underlevel*/ position:absolute; left:0; top: 100%; margin: 0; padding: 0; width: 900px;}
.nav li:hover ul{ display: block;}
.main .nav li ul li, .nav li ul li a{ float: left; display: inline-block; border-left: 1px solid black; border-bottom:1px solid black; }
.nav li ul li .centerText img:nth-child(5){ border: 1px solid red; !important; } /* THIS LINE DOEST WORK ? DONT KNOW WHY? */
/*==================styling images (li-elements)===========================*/
Right now, your selector is selecting the fifth img inside the .nav li ul li .centerText element. There is only one image in each, so this won't select anything at all. You need to change it to .nav li ul li:nth-child(5n+1) .centerText img. This will select every fifth li in that nav menu, and then add your border to the image within it.