Quite difficult to explain, so I created a codepen for you to have a look at. When you hover over a navigation item and the dropdown menu appears. You'll see that some of the items don't line up correctly. I.e. the width of some items are bigger than their sibling items. I just want them all to stretch to the width of the widest list item. (confused yet?) Just have a look at the code pen..
You need to make changes to the below CSS to get them aligned.
For Instance.
#main-navigation ul li ul li {
background: none repeat scroll 0 0 #DE5D48;
width: 140px;
text-align:left;
}
WORKING DEMO
Hope this helps.
You should use display : inline-block instead of float: left in /* list item */ css and should add display : table-row; into /* sub list item */ .
#dark-blue: #31394C;
#light-gray: #E6E6E6;
#gray: #B1B2B5;
#dark-gray: #6D6D6D;
#dark-red: #d7351b;
#red: #ee2a2e;
#light-red: #f75d1f;
#dusty-red: #DE6450;
#light-dusty-red: #fdc29e;
#dark-dusty-red: #b50b03;
#sub-nav-red: #DE5D48;
#white: #ffffff;
#import url(http://fonts.googleapis.com/css?family=Rosario);
body {
background: #dark-blue;
}
#main-navigation {
/* initial list */
ul {
list-style: none;
/* list item */
li {
display: inline-block;
position: relative;
background: #dark-red;
min-width: 105px;
height: 21px;
text-align: center;
margin-right: 10px;
/* link */
a {
color: #white;
display: block;
line-height: 21px;
text-decoration: none;
font-family: 'Rosario', sans-serif;
font-size: 12px;
text-transform: uppercase;
}
a:hover {
color: #white;
background: #dark-red;
}
/* sub list */
ul {
position: absolute;
top: 100%;
left: -40px;
display: none;
border-top: 10px solid rgba(255, 255, 255, 0.0);
z-index: 99;
/* sub list item */
li {
background: #sub-nav-red;
display : table-row;
/* sub list link */
a {
padding: 0 5px 0 5px;
white-space: nowrap;
}
}
}
ul:hover {
display: block;
}
}
li:hover > ul {
display: block;
}
}
}
I suggest moving the background, size, and positioning from the li to the ul, that way the whole list will expand if one item is too big.
Try to give more min-width
#main-navigation ul li {
float: left;
position: relative;
background: #D7351B;
min-width: 140px;
in css, li element has: min-width: 105px;
change it to 155px and it will solve it.
hope that helps.
Its quite simple,
You can't use: top: 100%
You'll be wanting to update this to be top: 0 this will align it to the top of its parent.
You may need top: 11px in your exact case.
Related
I cannot get my vertical menu to go horizontally. Please help, as I tried to floating the ul left and right and tried inline none as well. I'm not quite sure I'm getting confused on which class I should put the inline or float on. Thank you in advance for everyone's help on this one as this one has been driving crazy, and I'm sure it is a simple solution but I just can't see it.
/* define a fixed width for the entire menu */
.horiz_nav {
width: 100px;
float: right;
}
/* reset our lists to remove bullet points and padding */
.mainmenu_horiz {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu_horiz ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu_horiz li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
float: right;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu_horiz a {
display: block;
background-color: #8EC752;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu_horiz a:hover {
background-color: #ABD281;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu_horiz li:hover .submenu_horiz {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu_horiz a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu_horiz a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu_horiz {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<header class="header" id="header">
<div id="horiz_nav" class="horiz_nav">
<ul class="mainmenu_horiz">
<li>Home</li>
<li>Courses
<ul class="submenu_horiz">
<li>Motor Learning</li>
<li>MS II</li>
</ul>
</li>
</ul>
</div>
</header>
First, .menu_horiz li should be .mainmenu_horiz li, and then this should have float: left, not right, plus it doesn't need to be floated * and* display: inline-block - one of those two is sufficient.
.mainmenu_horiz li{
list-style: none;
padding: 0;
margin: 0;
float: left;
}
/* I have just changed your css to this one. Just check if it works for you. */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.
Firefox
Chrome
What would be the difference between these web browsers that would have such an effect on my code?
<nav id="topTab">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">Example1</b></h1>
</div>
</nav>
CSS:
#media only screen and (min-width : 1024px) {
a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
#topTab{
position:relative;
}
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
top: 20%;
}
h1 b {
font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}
Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.
You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.
div {clear: both}
I'm trying to position a nav element in a coloured box. The text in this box should be on the bottom and center of this box.
HTML
<div class="sixteen columns">
<section id="mainNav">
<ul>
<li id="nav2" class="navitem">ux / ui</li>
</ul>
</section>
</div><!--end sixteen columns-->
CSS:
/*navigation styles*/
.sixteen.columns #mainNav {
width: 100%;
margin-top: 50px;
}
#mainNav .navitem {
width: 40%;
display: block;
float: left;
position: relative;
pointer: cursor;
}
#mainNav ul li a {
font-family: print_clearlyregular, "Arial", serif;
font-size: 2em;
color: rgb(255, 255, 255);
text-decoration: none;
position: absolute;
bottom: 15px;
left: 0;
}
#mainNav #nav2 {
background: rgb(3, 106, 113);
opacity:0.8;
filter:alpha(opacity=80);
/* For IE8 and earlier */
margin-right: 4px;
height: 150px;
text-align:center;
}
As soon as I absolute position the "ul li a", the text-align: center doesn't work. How should I fix that?
You can see this bit in jsfiddle as well:
jsFiddle
Add width:100%; to
#mainNav ul li a {}
the fiddle: http://jsfiddle.net/sablefoste/bcM2x/
Don't specify any value for left (or right for that matter) for ul li a.
I'd like to add an alternative solution that doesn't rely on floats or absolute positioning, which can get pretty messy.
Using display: table, display: table-cell, and vertical-align: bottom, you can achieve said result. This also scales well when other items around it may change.
Here is a working jsFiddle demo
CSS Changes
I removed all float and position styles, added display: table to the ul, added display: table-cell and vertical-align: bottom to the li, added display: inline-block to the a along with margin-bottom: 15px to retain that padding your absolute positioning created. I modified the selectors and added a few other minor things that you can use or adjust to your liking.
/*navigation styles*/
#mainNav
{
width: 100%;
margin-top: 50px;
}
#mainNav > ul
{
display: table;
width: 100%;
margin: 0;
padding: 0;
border: none;
}
#mainNav > ul > li
{
display: table-cell;
height: 150px;
text-align: center;
vertical-align: bottom;
pointer: cursor;
background: rgb(3, 106, 113);
opacity:0.8;
filter:alpha(opacity=80);
/* For IE8 and earlier */
margin-right: 4px;
}
#mainNav > ul > li > a
{
display: inline-block;
margin-bottom: 15px;
font-family: print_clearlyregular, "Arial", serif;
font-size: 2em;
color: rgb(255, 255, 255);
text-decoration: none;
background: blue; // added for demo to show width and margin
}
I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my CSS:
.center {
text-align: center;
}
nav {
width: 900px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin: 0 auto 20px auto;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
background: #C0C0C0;
}
nav ul:after {
content:" \2022 ";
clear: both;
display: block;
}
nav ul:last-child:after {
content:"";
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-align: center;
display: block;
padding: 20px 15px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!
Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/
UPDATE: After taking #Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?
Updated JSFiddle: http://jsfiddle.net/VCKMU/6/
Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.
http://jsfiddle.net/VCKMU/6/
The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.
You just need to modify the selector to only target the list-items are the children of the first <ul>:
.center > ul > li {
display: inline-block;
}
http://jsfiddle.net/VCKMU/8/
I think it should work if you give nav { width: auto; margin: auto; }
I usually fool around in the Chrome debugger for issues like this.