I want to reposition my navbar. In its current position:
#navbar ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
background-color: #5D2C2C;
/*position: relative;
bottom: 115px;*/
}
#navbar ul li {
float: left;
/*position: relative;
left: 420px;*/
}
#navbar li li {
display: none;
}
#navbar li:hover li {
display: block;
width: inherit;
}
#navbar a {
font-family: "Palatino Linotype";
color: #FFF;
text-decoration: none;
padding: 2px 5px;
}
the dropdown displays correctly
but when I remove the /* comments */ so the bar is correctly positioned, the menu drops down but the two items aren't showing and I cannot find out why
the HTML if needed:
<div id="navbar">
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritme Signals: Letters</li>
<li>Maritme Signals: Numbers </li>
</ul>
</li>
</ul>
Related
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
My navigation bar is centered, but when the window is smaller, it just goes onto the next line, rather than getting smaller to fit the size of the window, and I don't know how to resolve it. It's got drop down elements on it. I'll also be looking at turning this to a vertical list when viewed on mobile devices, but nowhere near doing media queries yet.
Here's my HTML:
<nav id="page-navigation">
<ul>
<li>Home</li>
<ul class="top-menu">
<li>Photography
<ul class="sub-menu">
<li>BMC Himley Mini Show 2015</li>
<li>Kinver Snow</li>
<li>"Mini Runs" Collection</li>
<li>Hofner Bass</li>
<li>Nature</li>
<li>Haynes Motor Museum</li>
<li>Miscellaneous</li>
<li>Classic Mini</li>
</ul>
</li>
<li>Graphic Design
<ul class="sub-menu">
<li>"Story Bag" Artwork</li>
<li>Business Cards</li>
<li>Logo Design</li>
<li>"The Mexican Job"</li>
<li>Magazine Covers</li>
<li>WPAP Artwork</li>
<li>Lyrics Posters</li>
</ul>
</li>
<li>3D Modelling</li>
</ul>
<li>About</li>
<li>Recognition</li>
</ul>
</nav>
And here's my CSS:
/*navigation*/
#page-navigation
{
width: 60%;
height: 53px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul li
{
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
float: left;
}
li
{
position: relative;
}
li.title
{
display: none;
}
li a
{
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link
{
text-decoration: none;
}
li a:visited
{
text-decoration: none;
color: white;
}
li a:hover, .top-menu > li:hover > a
{
background-color: rgb(48,48,48);
}
li a:active
{
background-color: dimgray;
}
ul.sub-menu
{
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li
{
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu li:hover ul
{
left: 0;
}
ul.sub-menu li a
{
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a
{
border-bottom: none;
}
ul.sub-menu li a:hover
{
background-color: darkslategray;
}
ul.sub-menu li a:active
{
background-color: gray;
}
Thank you.
Your menu is specified as a variable width of 60%:
#page-navigation
{
width: 60%;
...
}
This will cause the width of the bar to scale with the window, and affect the position of the elements within it. To prevent this, specify a static width, such as:
#page-navigation
{
width: 1000px;
...
}
I just insert a line of code and I think it looks pretty nice right now :)
ul.top-menu{
padding: 0;
}
If you resize the screen there is in front of the navigation (next line) a small space and this resolves the problem.
See the resolution also on jsfiddle.
Answer:
Because of the way your HTML document is structured, it's not possible for you to get the intended effect for the following reason:
You have an unordered list nested directly in another unordered list which is (1) not considered correct (see this discussion); but more importantly, while it looks like your navigation has 6 top level items, you really only have 4. So no matter what CSS you apply to it, it won't work.
Recommendations:
Fix the structure of your HTML document first by using the proper classes only on the top navigation items and properly nest your navigation items.*
I would advise restructuring you information architecture to contain less navigation items on the menu. For example, the recognition would make sense to go in your About page. And if this is a portfolio type website, collapsing your Photography, Graphic Design, and 3D Modeling into Projects would work well. And if you're concerned with the separation, that will happen within the page as a sub-navigation.
If you are set on keeping the navigation structure, it's advisable to either collapse your menu into a select menu or hamburger menu on mobile devices since having a large chunk someone's mobile device screen consumed by your navigation is not a good experience for your user. On top of it, you have to consider that users can't "hover" on mobile devices and the size of those dropdowns would be difficult to navigate at best.
*Solution: Demo
HTML (Fixed):
<nav id="page-navigation">
<ul>
<li>Home</li>
<li class="top-menu">Photography
<ul class="sub-menu">
<li>BMC Himley Mini Show 2015</li>
<li>Kinver Snow</li>
<li>"Mini Runs" Collection</li>
<li>Hofner Bass</li>
<li>Nature</li>
<li>Haynes Motor Museum</li>
<li>Miscellaneous</li>
<li>Classic Mini</li>
</ul>
</li>
<li class="top-menu">Graphic Design
<ul class="sub-menu">
<li>"Story Bag" Artwork</li>
<li>Business Cards</li>
<li>Logo Design</li>
<li>"The Mexican Job"</li>
<li>Magazine Covers</li>
<li>WPAP Artwork</li>
<li>Lyrics Posters</li>
</ul>
</li>
<li>3D Modelling</li>
<li>About</li>
<li>Recognition</li>
</ul>
</nav>
CSS (Fixed and Updated):
/*navigation*/
#page-navigation {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul {
text-align: center;
}
#page-navigation ul li {
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
/* float: left removes any possibility of it centering */
display: inline-block;
}
li {
position: relative;
}
li.title {
display: none;
}
li a {
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
color: white;
}
li a:hover,
.top-menu > li:hover > a {
background-color: rgb(48, 48, 48);
}
li a:active {
background-color: dimgray;
}
ul.sub-menu {
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li {
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu:hover ul {
left: 0;
}
ul.sub-menu li a {
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a {
border-bottom: none;
}
ul.sub-menu li a:hover {
background-color: darkslategray;
}
ul.sub-menu li a:active {
background-color: gray;
}
ul.top-menu {
padding: 0;
}
There are still some minor stylings to adjust, but this should get you what you wanted based on your question.
I am new to website design, and there are a few flaws in my navbar that I cannot fix.
I cannot get the navbar to center properly.
When the screen resolution changes, the list overflows into the next line.
there is 1 list element that is sized differently and I cannot seem to figure out why.
Here is the code:
https://jsfiddle.net/b02nm6ae/#update
CSS:
.nav_wrapper {
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
min-width: 50px;
}
.nav_wrapper ul {
display: block;
position: relative;
position: fixed;
/* fixes automatic values set by ul */
margin: 0;
padding: 0;
}
.nav_wrapper ul li {
list-style: none;
display: list-item;
background-color: #993300;
float: left;
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: list-item;
list-style: none;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
float: none;
position: relative;
}
.nav_wrapper ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover{
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul li > a:after {
content: '\25BE';
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
HTML:
<body>
<!-- NAV -->
<div class="nav_wrapper">
<ul class="nav">
<li>Home</li>
<li>Calandar</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor</li>
<li>History</li>
<li>About Byzantines</li>
</ul>
</li>
<li>Mass Times</li>
<li>Contact Us</li>
</ul>
<div>
<!-- SECTION 1 -->
</body>
</html>
Once you float the li then centering becomes problematical. In these instances, it's often preferred to use display:inline-block and center then by applying text-align:center to the parent ul.
This does have a white-space downside but there are methods around that, one of which (font-size) I have used here.
As for the single element with the greater height...that was caused by the pseudo-element...so slapped a quick patch over it. Frankly, I would be applying a class to the parent li and using a pseudo-element on the li but that's another debate entirely.
body {
font-family: 'Didact Gothic', sans-serif;
padding: 0;
margin: 0;
background-color: #CCCCFF;
}
.nav_wrapper ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
/* remove whitespace */
}
.nav_wrapper ul li {
list-style: none;
display: inline-block;
vertical-align: top;
background-color: #993300;
position: relative;
font-size: 1rem;
/* font-size reset */
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
top: 100%;
left: 0;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: block;
width: 100%;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
position: relative;
width: 100%;
}
.nav_wrapper ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover {
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul> li > a:after {
content: '\25BE';
line-height: 0;
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
<div class="nav_wrapper">
<ul class="nav">
<li>Home
</li>
<li>Calendar
</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor
</li>
<li>History
</li>
<li>About Byzantines
</li>
</ul>
</li>
<li>Mass Times
</li>
<li>Contact Us
</li>
</ul>
<div>
Well I notice that if I set a 25 pixel height to
.nav_wrapper ul li a
that removes the extra space for example..
.nav_wrapper ul li a{
height:25px;
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
https://jsfiddle.net/b02nm6ae/9/
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.
I am looking to make a navbar menu that drops down when hovering over a specific navbar li.
My navbar looked and worked fine until I tried to get a hover drop down to work. Specifically this is what I am looking for:hover over "work" and get a drop down menu of "videos" and "photography". I don't think that I am nesting anything wrong, so I figure that it is the CSS that is wrong. I have tried a few different suggestions, but nothing has worked.
Side note: I recently gave the nav items the id of "menu". I had it so that the current page on the nav would be a certain darker color and when the current page nav was hovered it would stay that same color. This worked before I changed to id to "menu" (before it was "nav ul li"). Now when you hover, it changes the color. what made this change happen?
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
}
ul#menu li#sub:hover ul {
display: block;
}
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">work
</li>
<ul>
<li>videos
</li>
<li>photography
</li>
</ul>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
JSFiddle
I think you have got the nesting wrong. You want the list which is revealed when you roll over the work list item to be a child of that list item. Try updating your HTML / CSS as follows (see fiddle):
HTML:
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">
work
<ul>
<li>videos</li>
<li>photography</li>
</ul>
</li>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
CSS:
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
position: absolute;
top: 35px; left: 115px;
background-color: #b2c1a2;
}
li#sub ul li {
display: block;
}
ul#menu li#sub:hover ul {
display: block;
}