I know I've been asking a lot of questions and you guys have been great. There are two problems I'm having with my Nav.
1) First, the NAV isn't spanning the whole way.
2) For whatever reason, under "Services", the dropdown is spanning out long enough to fit all the links, but under "About Us", "Photo Credit" isn't.
Here's the link:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
It looks to me like your <nav> element actually is spanning the full width, but nav ul is not.
Remove display: inline-table; and it spans the full width. This should fix the "Photo Credit" link as well.
Remove the display: inline-table; from the nav ul. This should fix both problems. :)
Related
When I hover over the html section the html & css nav option is moved to the right for some reason, how do I get it to align with the other nav options.
http://codepen.io/anon/pen/bEqPRQ
#nav {
list-style: none;
text-align: center;
padding: 1.250em 0 1.250em 0;
background: #ffffff;
font-size: 106.25%;
font-family: 'Oxygen';
}
#nav li a {
text-decoration: none;
text-align: center;
color: #FFF;
}
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: fixed;
z-index: auto;
left: 400;
vertical-align: left;
}
#nav ul li:hover ul.dropdown {
display: block;
}
#nav ul li ul.dropdown li {
display: block;
}
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
}
#nav > ul > li > a {
text-decoration: none;
color: #000000;
}
#nav > ul > li > a:hover {
color: #00c5a2;
}
Your <ul> has a default styling (padding-left) which has to be removed. Adding
#nav ul li ul.dropdown {
padding-left: 0;
}
moves your text to the left.
You should also check your CSS, vertical-align: left and left: 400 (doesn't have a unit) aren't valid and won't work.
You can solve the problem adding padding left = 0 in the css of #nav ul li ul.dropdown :
#nav ul li ul.dropdown {
padding-left: 0;
}
Try changing the .dropdown style as follows:
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: absolute;
z-index: auto;
left: 0;
vertical-align: left;
}
Then the parent li position to relative:
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
position: relative;
}
This ensures the dropdown always positions itself absolute to its parent (the li).
Also adding padding: 0 to the dropdown ul:
#nav ul li:hover ul.dropdown {
display: block;
padding: 0;
}
Fiddle: https://jsfiddle.net/04zospoj/
I have some HTML code of a menu, I have started creating the CSS for the menu but I have come to a halt as I am not sure where to go next
I have added this CSS so far:
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra li {
display: inline;
margin-right:10px;
}
ul.sub-menu {
display:none;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
}
So, this shows the menu in a horizontal position but I want to display the sub menus in a vertical list below the parent item.
I created a fiddle here:
I made it work by implementing the box-sizing:border-box attribute:
/*Initialize*/
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li {
list-style-type: none;
display:inline-block;
width:20%;
background: #666;
text-align:center;
}
/*Link Appearance*/
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px;
display:inline-block;
margin:0;
box-sizing:border-box;
}
/*Make the parent of sub-menu relative*/
ul#menu-my-integra li {
position: relative;
}
/*sub menu*/
ul#menu-my-integra li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu-my-integra li:hover ul.sub-menu {
display:block;
}
NOTE: you will have to adjust the % width of the 'li' elements depending on how many there are. Hope that helps!
I have a CSS menu using the following CSS.
What is the best way to center the whole menu on the page?
I have tried using another <div> outside <nav> and setting margins but its just aligning left all the time.
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
jsfiddle : http://jsfiddle.net/njuVm/
You can center the navigation bar by using the following CSS rules:
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0; /* << add this */
padding: 0; /* << add this */
display: inline-block; /* << add this */
vertical-align: top; /* << add this */
}
nav ul li {
float: left;
margin: 0; /* << add this */
padding: 0; /* << add this */
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
background-color: pink; /* optional... */
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/
The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.
Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.
Instead of floating the li, you can display them as inline-blocks.
Then, they will be centered relatively to the ul because of text-align: center.
Since the ul is as wide as the nav by default, the li will look like centered relatively to the nav.
nav {
text-align: center;
border: 1px solid black;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav li:hover > ul {
display: block;
}
nav > ul ul {
display: none;
position: absolute;
}
nav > ul ul > li {
border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
color: #666666;
}
<nav>
<ul>
<li>Add Contact</li>
<li>View Contact</li>
<li>Tickets
<ul>
<li><a>TEST1</a></li>
<li><a>TEST2</a></li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
First, when you float the ul's you have to clear the float by adding clear div:
HTML :
<div class="clear"></div>
CSS :
.clear{
clear:both;
}
And for centring the menu you should specify a width of the ul as in example and randomly I have set the width to 560px :
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
Take a Look:
http://jsfiddle.net/njuVm/6/
Recently a few months ago I had to add sublevel functionality into a drop down menu on one of our sites. The tactic I took before worked well for the one column in the navigation, but I was asked to add a sublevel to the column before it which didn't work because I was using relative positioning (see the example below):
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; }
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: relative; left: 188px; bottom:25px ;padding-left:1px }
So I modified the sublevels in the drop down menu to use relative positioning used an overlap approach (due to the way to previous coder originally designed the drop down). The new code looks like the one below:
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
However as the title indicates the LI under the unordered list are now stacking on top of one another. Instead of displaying vertically one after the other. I believe it requires me to clear the float, but it looks like it was done up above. So I'm unsure if I need to redefine the float then clear it in order to make sure the links in the sub list will display vertically.
Edit:
A good thought to add the HTML to show how I'm trying to execute this:
<html>
<head>
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; z-index: 0;}
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Column 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li> Column 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Column 3<li>
</ul>
</div>
</body>
</html>
Try these CSS rules for your sublevels in the drop down:
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {
display: none
}
#nav li ul li:hover ul {
display: block;
position:absolute;
top:0;
left:100%;
}
#nav li ul li ul li {
position:relative;
display: block;
float: left;
border: 1px solid purple;
z-index: 1;
}
How do I get my nav bar to span my web page? I have it set up to be 850px. The container div is set up to be 850px.
Here's the link and the code:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav {
width:850px;
}
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Your nav is 850px, however your black background ( ul ) is not.
To solve: Set the black background to nav instead.
The <ul> doesn't automatically fill the width of the 850-pixel container <div>. Set the <ul> width to 100% and it will.
ul {
width: 100%;
}
If having it 100% of the width of the container is what you want just assign the width of ul as 100%