I'm in the process of developing my first website and I'm having an issue with the Navigation Bar. I'm using CSS rules to align the bar but unfortunately when I set the rules to float:right; my text is floating right but it’s lining up backwards on the bar. How can I float the text over to the right and align the text correctly?
.nav ul li {
display: inline-block;
float: right;
padding: 10px 10px;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0px;
margin: auto;
font-weight: bold;
border-bottom: 2px solid orange;
margin-top: 5px;
}
.nav ul li a {
color: orange;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0px 10px;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>FAQ
</li>
</ul>
</div>
You need to float the ul list, not individual list items li.
Setting float: right on li allows the first list item to align to the right first and then the rest of the items take their positions similarly. It caused the direction of the list from right to left.
.nav ul {
float: right; /* Added */
}
.nav ul li {
display: inline-block;
padding: 10px 10px;
/* float: right; Removed */
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0px;
margin: auto;
font-weight: bold;
border-bottom: 2px solid orange;
margin-top: 5px;
}
.nav ul li a {
color: orange;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0px 10px;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>FAQ
</li>
</ul>
</div>
Related
I've added submenus to some code I found online. I want the submenu, which is a drop-down list, only to show when I hover over the appropriate <a>. But the submenu is appearing right from the start without me hovering over it. What am I doing wrong?
div.menu3 {
/*width:500px;margin:0 auto;*/
/*Uncomment this line to make the menu center-aligned.*/
text-align: center;
font-size: 0;
height: 25px;
*position: relative;
*top: 1px;
/*Hacks for IE6 & IE7 */
}
div.menu3 a {
display: inline-block;
padding: 0 20px;
margin-right: 1px;
/* It specifies the distance between each tab */
background: #F7F7F7;
color: Black;
text-decoration: none;
font: normal 12px Trebuchet MS;
line-height: 24px;
border: 1px solid #CAD0DB;
border-bottom: 0;
color: #666;
vertical-align: top;
/*ChangeSet#2*/
text-decoration: none;
}
div.menu3 a:hover,
div.menu3 a.current {
background: #E9ECF0;
line-height: 25px;
color: #000;
}
div.menu3sub {
height: 6px;
border: 1px solid #CAD0DB;
background: #E9ECF0;
}
div.menu3sub a:hover,
div.menu3 a.current {
background: #E9ECF0;
line-height: 25px;
color: #000;
}
<div class="menu3">
Home
Employees
Department
<ul>
<li>Add Department</li>
<li>Delete Department</li>
</ul>
Asset
</div>
<div class="menu3sub"></div>
Your html is off. So your dropdown won't display properly. Use un-ordered lists instead of what you have. This should point you in the right direction.
ul.menu {
list-style-type: none;
}
ul.menu li {
display: inline-block;
}
ul.menu li.submenu ul {
display: none;
position: absolute;
}
ul.menu li.submenu:hover ul {
display: block;
}
ul.menu li.submenu ul li {
display: block;
}
<ul class="menu">
<li>Home
</li>
<li>Employees
</li>
<li class="submenu">Department
<ul>
<li>Add Department
</li>
<li>Delete Department
</li>
</ul>
</li>
<li>Asset
</li>
</ul>
I set up a menu that uses buttons with links, ul's, and li's inside them. It works fine in Chrome, Android, Safari, and Opera. In Firefox, when the ul's appear the nav jumps down. In IE, the ul's don't display. In both, the links don't appear.
Edit: I chose to do this with buttons because i thought it gave me flexibility a regular ul menu wouldn't - background images, images inside them, attaching javascript events. It also of course creates a layout that is a row of buttons without any extra styling.
http://codepen.io/briligg/pen/emwXaw?editors=110
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
}
nav button {
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
height: 32px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 7;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
margin-top: 9px;
padding: 6px 2px;
}
nav button:hover li, nav button:focus li {
padding: 8px 2px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #52cbff;
}
Then in the html, the ul's are nested in the buttons, with links, like this:
<button tabindex="4">Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
In even creating this thing i was already at the limits of my knowledge. I don't know how to go about finding work-arounds, or if that is even possible in this case. Help with even knowing where to go to figure this out would be appreciated, never mind an actual solution to the problem. I've been looking for information and haven't found any.
IE has button {overflow:hidden;} style by default, You can rest that as follows.
nav button {
overflow: visible;
}
Edit: In order to get the links working we'll have to redo the markup, I also adjusted the CSS for the HTML changes. see the following code snippet.
nav {
position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
white-space: nowrap;
}
nav > ul > li {
display: inline-block;
position: relative;
font-size: 16px;
height: 32px;
line-height: 32px;
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
}
nav > ul > li > ul {
display: none;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
padding: 6px;
position: absolute;
z-index: 7;
top: 32px;
left: 0;
}
nav > ul > li:hover > ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #52cbff;
}
<nav>
<ul>
<li tabindex="1">Purpose</li>
<li tabindex="2">
Moon vs Mars
<ul tabindex="3">
<li>Ambiance</li>
<li>Communication</li>
<li>There and Back</li>
</ul>
</li>
<li tabindex="4">
Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</li>
</ul>
</nav>
The problem must be caused by this Link inside a button not working in Firefox (and IE).
Full Demo: http://codepen.io/anon/pen/KwOqKv
Instead of putting <a> in <button>, put all <a> inside <li>. Also, as you had, put the secondary links inside another <ul> in the <li>.
<ul class='primary-links'>
<li class='primary'><a href='#'>Primary link</a></li>
<li class='primary'>
<a href='#'>Another primary link</a>
<ul class='secondary-links'>
<li class='secondary'><a href='#'>Secondary Link</a></li>
<li class='secondary'><a href='#'>Another secondary link</a></li>
</ul>
</li>
</ul>
The primary links are display:inline-block in order for them to display horizontally while the secondary links are display:none to initially hide them. The secondary links become visible when the primary links are hovered over. position:absolute removes the secondary links from the document flow preventing the primary links from jumping down when the secondary links become visible.
.primary {
display: inline-block;
}
.secondary-links {
display: none;
position: absolute;
}
.primary:hover > .secondary-links {
display: block;
}
body {
font: 1em/1.5 sans-serif;
}
a:link,
a:visited {
color: #08f;
text-decoration: none;
}
a:hover,
a:active,
a:focus{
color: #f80;
}
ul {
list-style: none;
margin: 0;
padding: .25em;
border-radius: .25em;
background: #fff;
border: thin solid #ccc;
box-shadow: 0 0 .25em #ccc;
}
li {
margin: .5em;
}
nav > ul > li {
display: inline-block;
}
li > ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
}
<nav>
<ul>
<li><a href='#'>One</a></li>
<li>
<a href='#'>Two</a>
<ul>
<li><a href='#'>Two One</a></li>
<li><a href='#'>Two Two</a></li>
<li><a href='#'>Two Three</a></li>
</ul>
</li>
<li>
<a href='#'>Three</a>
<ul>
<li><a href='#'>Three One</a></li>
<li><a href='#'>Three Two</a></li>
<li><a href='#'>Three Three</a></li>
<li><a href='#'>Three Four</a></li>
</ul>
</li>
</ul>
</nav>
I currently have a navbar that stays relative as I scroll; what I want to do is have the bar span the entire top from left to right (responsive to different screens) with no gaps on either side. Also, when I move my cursor over the bar or click on one of the links it begins shrinking from the right to the left, down to about half of it's original size.
Here is a screenshot of my current navbar: http://prntscr.com/5x02ef
Here is my HTML:
<div id="header">
<div id="navbar">
<ul>
<li>
Me
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
And here is my CSS code:
#header {
position: relative;
}
#navbar {
text-align: center;
text-decoration: none;
position: fixed;
top: 10px;
margin-top:1.2%;
}
ul {
position: fixed;
margin: 0px;
height: auto;
}
li {
display: inline;
border: 2px solid rgb(73, 73, 73);
border-left: none;
border-right: none;
border-top:none;
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left:14%;
padding-right:14%;
background-color: #FFFFFF;
}
is this what you want?
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
#navbar {
text-align: center;
text-decoration: none;
}
body{
text-align:center;
}
#header {
position: relative;
text-align:center;
}
ul {
height: auto;
}
li {
display: inline-block;
border: 2px solid rgb(73, 73, 73);
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left: 6.25em;
padding-right: 6.25em;
border-radius: 5px 5px;
background-color: #FFFFFF;
}
<div id="header">
<div id="navbar">
<ul>
<li>Me
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</div>
</div>
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
As a HTML/CSS newbie, I am trying to create a centered horizontal main menu with vertical drop down submenus.
The submenus are supposed to perfectly align with the parent main menu element.
Cannot attach picture due to lack of reputation points, but have a visualization in case that could help anyone.
In my current set-up, the submenu items (Directions and Google Maps) are aligned completely to the left and I cannot get them nicely under the main menu item (Location). I believe the solution lies with the absolute/relative positioning of elements, but I cannot figure out how to implement it without destroying the general layout.
Finally, the sub-menu boxes should all have the same width, while the main menu items can vary according to their normal length.
The end result would be similar to this example, unfortunately the code for it gives a 404 error.
This is my HTML:
#nav {
color: orange;
list-style: none;
font-weight: bold;
text-align: center;
border: 1px solid orange;
border-width: 1px 0;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 1ex;
text-decoration: none;
color: orange;
}
#nav a:hover {
text-decoration: none;
color: white;
background-color: orange;
}
#nav li ul {
display: none;
list-style: none;
position: absolute;
}
#nav li ul li {
display: block;
border-bottom: 1px solid orange;
border-width: 1px 0;
text-align: left;
}
#nav li:hover ul {
display: block;
}
<ul id="nav">
<li>Home
</li>
<li>
Location
<ul>
<li>Directions
</li>
<li>Google Maps
</li>
</ul>
</li>
<li>Pictures
</li>
<li>Prices & Availability
</li>
<li>General Info
</li>
<li>Reservations & Contact
</li>
</ul>
Apologies for the newbie requests & cheers to all for helping!
Parent(#nav li) must be positioned relatively.
Initially ul renders with some padding, you should add padding: 0 to get proper alignment.
#nav {
color: orange;
list-style: none;
font-weight: bold;
text-align: center;
border: 1px solid orange;
border-width: 1px 0;
padding: 0;
}
#nav li {
display: inline;
position: relative;
}
#nav a {
display: inline-block;
padding: 1ex;
text-decoration: none;
color: orange;
}
#nav a:hover {
text-decoration: none;
color: white;
background-color: orange;
}
#nav li ul {
display: none;
list-style: none;
position: absolute;
padding: 0;
left: 0;
}
#nav li ul li {
display: block;
border-bottom: 1px solid orange;
border-width: 1px 0;
text-align: left;
}
#nav li:hover ul {
display: block;
}
<ul id="nav">
<li>Home
</li>
<li>
Location
<ul>
<li>Directions
</li>
<li>Google Maps
</li>
</ul>
</li>
<li>Pictures
</li>
<li>Prices & Availability
</li>
<li>General Info
</li>
<li>Reservations & Contact
</li>
</ul>
I am trying to create a simple navigation menu that when you click on one of the buttons, a secondary menu pops up below, but pushes the content below down with a sliding action.
There will be 6 buttons in the primary menu, spanning the width of the containing div at 960px. Then when you hover on "Products" only, every other primary button will go to a new page, this should open a secondary nav that spans 2 lines. Each button is 159px.
Here is my code:
HTML:
<div id="menu">
<ul>
<li>About Us</li>
<li id="products">Products</li>
<li>Our Suppliers</li>
<li>Find Us</li>
<li>Deliveries</li>
<li>Contact Us</li>
</ul>
<div id="subMenu">
<ul>
<li>Wine & Spirits</li>
<li>Beer & Ciders</li>
<li>Other Drinks</li>
<li>Cheese</li>
<li>Meat & Pate</li>
<li>Vegetables</li>
<li>Dry Stores</li>
<li>Honey & Preserves</li>
<li>Olive Oil & Vinegar</li>
<li>Sweet Things</li>
<li>Hampers</li>
<li>Accessories</li>
</ul>
</div>
</div>
And my CSS:
#menu a {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
letter-spacing: 1px;
color: #fff;
font-size: 12.5px;
text-decoration: none;
padding:0;
margin: 0
}
#menu a:hover {
color: #cff;
}
#menu {
background: #689169;
height:35px;
width: 960px;
transition:height 0.2s;
-webkit-transition:height 0.2s;
}
#menu:hover {
height: 105px;
}
#menu ul {
padding: 0;
margin: 0;
position: absolute;
list-style:none;
}
#menu ul li {
float: left;
}
#menu ul li a {
width: 159px;
padding-top: 10px;
padding-bottom: 10px;
/*padding: 10px; padding-right: 30px; padding-left: 30px;*/
margin: 0;
background: #689169;
text-align: center;
border-right: 1px solid #666;
display:block;
}
#subMenu {
position: absolute;
z-index: 1;
margin-top: 34px;
width: 700px;
height: 600px;
}
#subMenu ul {
position: relative;
float: left;
}
#subMenu ul li {
clear: both;
border-right: 1px solid #666
}
#subMenu ul li a {
background: none;
border: none;
}
#subMenu ul li a:hover {
color: #fff;
}
#outset {
width: 700px; height: 300px;
background: #900;
}
Here's my JSFiddle - http://jsfiddle.net/Jfdvr/1/ - please help!
Many thanks,
Matt
I would look into jQuery easing to bounce out a div with css display: hidden; So when a link is clicked the hidden div will ease out and then set a click anywhere else to revert to hidden