I'm working on a simple static page and almost have my navigation bar right. Right now, the menu items are stretching across the width of the entire nav bar, rather than staying contained in their "list area" if that makes sense. I feel like I've tried everything, and I think it has something to do with the z-index I have on the nav and photo carousel (so that the nav menu items show up on top of the carousel) and the positioning, but I can't figure it out.
nav ul {
background: #A6CE4F;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
display: table;
}
nav ul ul {
display: none;
width: 100%;
background: #f37b35;
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #1f354b;
}
nav ul ul li {
float: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #e2550e;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
<nav style="position: relative; z-index: 2;">
<ul>
<li>
ICAB Leadership Group
<ul>
<li>Requirements
</li>
<li>Roles & Responsibilities
</li>
</ul>
</li>
<li>
Site Cabs
<ul>
<li>Community Input
</li>
<li>Cross Network Collaborations
</li>
</ul>
</li>
<li>
Community Toolbox
<ul>
<li>Community engagement templates and documents
</li>
<li>Network and Community fact sheets
</li>
<li>Training materials
</li>
<li>FAQs
</li>
<li>Community Research Resources
</li>
<li>Acronyms
</li>
<li>Email Alias Lists
</li>
</ul>
</li>
<li>
Contacts & Email Lists
</li>
</ul>
</nav>
It's because you have width: 100% set to .nav ul ul. If you want the width to remain variable, set width: 100% to width: auto in .nav ul ul
Example here: http://codepen.io/anon/pen/MaRJXZ
That's happening because you have width set to 100% to your dropdown ul.
Add a width like this:
width: auto;
See fiddle here.
Related
I have two nav elements that I'm using one just below the header and another one where I have the nav element nested inside an aside element. I added the code for the HTML for the nav elements and added the code for the CSS for the nav elements at the bottom of the page. I also have a picture of the website that you guys can look at which is also at the bottom of the page. What I am trying to do is add a horizontal navigation bar for one nav element and a vertical navigation bar for another nav element, but the first nav element I created is overriding the CSS for my second nav element. I'm trying to figure out a way to separate the two so the second nav element has its own CSS code. I don't know if I can use a class attribute or id attribute for the second nav element so it's separate from the first nav element I created. I can really use some help in figuring out this issue.
Here is the HTML code for the first nav element:
<nav>
<ul>
<li>
<a class="current" href="index7.html">Home</a>
</li>
<li>
Product List
</li>
<li>
Personal
</li>
<li>
Decoration Ideas
<ul class="submenu">
<li>
Outdoor
</li>
<li>
Indoor
</li>
<li>
Table
</li>
<li>
Treats
</li>
</ul>
</li>
<li>
Join Email
</li>
</ul>
</nav>
<aside>
<nav id="nav_list">
<ul>
<li>
Props
</li>
<li>
Costumes
</li>
<li>
Special Effects
</li>
<li>
Masks
</li>
</ul>
</nav>
</aside>
Here is the CSS code for the first and second nav elements
/* nav styles */
nav {
position: absolute !important;
top: 0px !important;
left: 0px !important;
display: block !important;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
nav ul > li {
float: left;
}
nav a {
display: block;
width: 160px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #000000;
color: white;
font-weight: bold;
}
.current {
color: orange
}
.submenu {
position: absolute;
display: none;
top: 3em;
}
.submenu li {
float: none;
}
.submenu a:hover {
background-color: gray;
}
nav ul li:hover > ul {
display: block;
}
/* second nav element */
aside {
position: absolute !important;
top: 100px !important;
left: 0px !important;
display: block !important;
}
#nav_list ul {
list-style-type: none;
<!-- margin-left: 1.25em; -->
margin-bottom; 1.5em;
}
#nav_list ul li {
width: 200px;
margin-bottom: .5em;
<!-- border: 2px solid blue; -->
}
#nav_list a:hover {
background-color: gray;
}
Website screenshot below:
Your CSS is targeting all nav elements because you asked it to. You have no specific nav or ul classes (or id's) assigned.
I would suggest you give each nav element different classes (or Id's) so you can then target each one separately in your CSS and apply your desired styling. For example you can give the horizontal nav a class="horizontal-nav" and the vertical nav a class="vertical-nav".
That way, one is separate from the other style-wise.
check out the !important stuff.
<style>
/* nav styles */
nav {
position: absolute !important;
top: 0px !important;
left: 0px !important;
display: block !important;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
nav ul > li {
float: left;
}
nav a {
display: block;
width: 160px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #000000;
color: white;
font-weight: bold;
}
.current {
color: orange
}
.submenu {
position: absolute;
display: none;
top: 3em;
}
.submenu li {
float: none;
}
.submenu a:hover {
background-color: gray;
}
nav ul li:hover > ul {
display: block;
}
/* second nav element */
aside {
position: absolute !important;
top: 100px !important;
left: 0px !important;
display: block !important;
}
#nav_list ul {
list-style-type: none;
<!-- margin-left: 1.25em; -->
margin-bottom; 1.5em;
}
#nav_list ul li {
width: 200px;
margin-bottom: .5em;
<!-- border: 2px solid blue; -->
}
#nav_list a:hover {
background-color: gray;
}
</style>
<nav>
<ul>
<li>
<a class="current" href="index7.html">Home</a>
</li>
<li>
Product List
</li>
<li>
Personal
</li>
<li>
Decoration Ideas
<ul class="submenu">
<li>
Outdoor
</li>
<li>
Indoor
</li>
<li>
Table
</li>
<li>
Treats
</li>
</ul>
</li>
<li>
Join Email
</li>
</ul>
</nav>
<aside>
<nav id="nav_list">
<ul>
<li>
Props
</li>
<li>
Costumes
</li>
<li>
Special Effects
</li>
<li>
Masks
</li>
</ul>
</nav>
</aside>
In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio section, a drop down appears allowing you to choose between two other sections, "Writing Samples" and "Photoshop." I am trying to accomplish this using only CSS.
This is my HTML section:
<nav>
<ul>
<li>
<a href="index.html" >About</a>
</li>
<li class="subNav">
<a class="selected" >Portfolio</a>
<ul>
<li>Writing Samples</li>
<li>Photoshop</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
And CSS:
nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
nav ul li.subNav ul {
display: none;
}
nav ul li.subNav:hover ul {
display: block;
}
I have reached the point that when I hover over the Portfolio list item, you see the resulting list items "Writing Samples" and "Photoshop", except that it displays these two items as a part of the original unordered list, and moves the "Portfolio" list item above the rest of the items. I would like "Writing Samples" and "Photoshop" to appear vertically under "Portfolio", but I can't quite figure this out with CSS.
This is the basics of it:
nav {
position: absolute;
padding: 10px 0;
}
nav ul {
list-style: none;
;
padding: 0;
}
nav > ul > li {
display: inline-block;
position: relative;
border: 1px solid lightgreen;
/* for demo */
}
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: pink;
}
nav ul li.subNav:hover ul {
display: block;
}
<nav>
<ul>
<li>
About
</li>
<li class="subNav">
<a class="selected">Portfolio</a>
<ul>
<li>Writing Samples
</li>
<li>Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
The parent li is given position:relative to provide positioning context.
The submenu is positioned absolutely, at the bottom of the parent li and aligned left.
Note that I have used the direct child selector > to target only the elements I want to.
Then, since the submenu is too wide to be contained within the parent's width, I added white-space:nowrap so that the text will flow as required.
You have the right idea; the comment tags in the HTML below are used to remove space between the "li" elements.
Instead of using display:none, I use visibility: hidden for S.E.O purposes.
Even though you use position: absolute, you should also use z-index so that menu elements are able to be clicked if they are overlapping other content.
.mm,
.sm {
list-style: none;
}
.mm {
position: relative;
margin: 0px;
padding: 0px;
background-color: #000;
border-bottom: 4px solid red;
}
.sm {
position: absolute;
z-index: 1;
visibility: hidden;
background-color: #000;
border-width: 0px 4px 4px 4px;
border-style: solid;
border-color: red;
}
.mm > li {
display: inline-block;
}
.mm > li > a {
display: inline-block;
padding: 8px;
}
.sm a {
display: block;
padding: 8px;
}
.mm > li > a:hover + .sm,
.sm:hover {
visibility: visible;
}
.mm a {
text-decoration: none;
color: #FFF;
}
.mm a:hover {
text-decoration: underline;
color: yellow;
}
<nav>
<ul class="mm">
<li>AAA</li><!--
--><li>BBB
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li><!--
--><li>CCC
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li>
</ul>
</nav>
<h1>CSS NAVIGATION</h1>
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
I'm working on a website as part of a revision tool, however I cannot seem to get my menu's layout to function properly, when trying to create dropdowns for multiple sections on the same list they either spawn on top of each other or layout to the side of where they should be, to note, a solution should only be using HTML and CSS.
To clarify, the dropdowns should appear underneath their respective "title heading" so to speak.
#menu a:link {
color: #C7C1C1;
text-decoration: none;
}
#menu a:visited {
color: #C7C1C1;
text-decoration: none;
}
#menu a:hover {
color: #FFFFFF;
}
#menu {
text-align: center;
top: 0px;
position: absolute;
margin-bottom: -61px;
font-size: 20px;
}
#menu ul {} #menu ul li {
display: inline;
padding-left: 30px;
padding-right: 30px;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: inline-block;
top: 50px;
left:
/*when applying this makes all dropdowns stack*/
;
position: absolute;
background-color: #4D4D4D;
text-align: center;
}
<div id="menu">
<div>
<ul>
<li>Introduction
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>History
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>National Flags
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>International Maritime Signal Flags
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
</ul>
</div>
</div>
You need to add position: relative; to the parent element to position the child absolute to it:
#menu ul li{
display: inline;
padding-left: 30px;
padding-right: 30px;
position: relative; // IMPORTANT
}
and you should only add the display: inline-block property to the hover #menu ul li: hover ul and the rest of the styling within the normal class definition: (just for convenience)
#menu ul li ul{
display: none;
top: 50px;
position: absolute;
background-color: #4D4D4D;
text-align: center;
width: 100%;
}
Set position: relative; to <li>
#menu ul li{
display: inline;
padding-left: 30px;
padding-right: 30px;
position: relative; // add this
}
And then set left: 0; position to <ul>
#menu ul li:hover ul{
display: inline-block;
top: 50px;
left: 0px; // Begin on the left of the li
position: absolute;
background-color: #4D4D4D;
text-align: center;
}
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>