I was able to create a drop down menu, but unable to center the text. Its
as if padding-left is set but I didn't set it. I just need help centering
the text in the drop down menu.
//drop down menu
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
background-color:grey;
padding: 5px;
}
.menu li {
list-style:none;
padding: 3px;
}
.menu a {
text-decoration: none;
color: black;
}
.menu > li {
display:inline;
}
.dropmenu {
display:none;
float:right;
position:relative;
top:18px;
left:-422px;
}
.dropdown:hover > .dropmenu {
display:block;
}
.dropmenu {
background-color:grey;
}
</style>
</head>
<body>
<ul class = "menu">
<li>HOME</li>
<li>ABOUT</li>
<li class = "dropdown">SPORTS
<ul class = "dropmenu">
<li>NBA</li>
<li>NFL</li>
<li>MLB</li>
</ul>
</li>
<li>CONTACTS</li>
<li>BLOG</li>
</ul>
</body>
</html>
First, use text-align: center; on the dropdown menus. Your dropdown menus will look off center as there is default padding and margin the ul you are using for your dropdown menus that browser add by default. You will want to remove that padding/margin from the dropdown uls.
.dropmenu {
padding: 0;
text-align: center;
}
If the dropdown menu becomes too narrow after doing this you'll likely want to set a specific width for your dropdown menus.
.dropmenu {
padding: 0;
text-align: center;
width: 100%; /* same width as containing li */
}
jsFiddle: http://jsfiddle.net/7hjqjrjj/2/
If you're looking to clean up/fix alignment of your dropdown menu read below.
You want to apply position: relative; to the li's that contain a dropdown menu. Then apply position: absolute; to that dropdown menu (ul). You'll usually add left: 0; to the drowpdown menu (ul) as well.
Applying position: relative; to the containing li causes the absolutely positioned dropdown menu to position itself relative to the containing li, rather than some place like the top of the page.
We don't want the dropdown to position itself after the anchor tag or other content within the containing li so we use absolute positioning.
Update your CSS selectors as follows:
.menu li {
list-style: none;
padding: 3px;
position: relative;
}
.dropmenu {
display: none;
position: absolute;
top: 18px;
left: 0;
}
You may need to fiddle with your top and left values.
jsFiddle: http://jsfiddle.net/7hjqjrjj/1/
Related
So I am trying to make a pure CSS3 dropdown navigation. Of all the stack overflow questions about this, this was the closest I found.
What I dislike, however, is the use of defined heights, which makes everything a pain to refactor if you wish to change the heights later on.
Below is my own attempt, which uses barely any css and gets close to the desire result. The only issues with it is:
the "drop down" is more of a shove up and
if the first point is fixed, it would look bad in a header (as the entire header would jump about)
How can I fix these issues with minimal CSS and in a way that is dynamic and flexible (e.g. no absolute positionings, no fixed heights, etc)
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
padding: 0;
}
/* hide nested list elements*/
li > ul li{
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>
How is this, just added absolute positioning to the child ul - using absolute positioning doesn't make it any less responsive
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li>ul {
padding: 0;
position:absolute;
width:100%;
background: black; /* not sure if you want background-color on this */
}
/* hide nested list elements*/
li>ul li {
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li {
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>
Use absolute position to style the dropdown.So the height issue will be fixed.Also don't forgot to add position:relative to the parent li tags.So the dropdown will position relative to the li tags
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
padding: 0;
}
/* hide nested list elements*/
li > ul li{
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
.dropdown{
position:absolute;
z-index:999;
width:100%;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul class="dropdown">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>
I already tried "width: 100%;" but the dropdown element then gets the same width as the whole page. I'm working with floats so maybe that needs a different approach?
I swear I've looked at similar questions but none of the solutions there worked for me. Can anyone see what I'm doing wrong? You can find the jsfiddle with all of the code here. I currently "solved" the problem with a fixed width.
Here is the HTML for the navi:
<nav role="navigation" class="navi">
<ul class="nav-elements">
<li>Home</li>
<li>Ongoing Stories
<ul>
<li>Sublink</li>
<li>Another Sublink with a long text</li>
</ul>
</li>
<li>Sleeping Stories
<ul>
<li>Sublink</li>
<li>Another Sublink</li>
</ul>
</li>
<li>News</li>
<li>About/FAQ</li>
</ul>
</nav>
And the CSS:
.navi {
float: left;
margin-bottom: 0.5em;
}
.navi ul {
padding-left: 0; /* Navi aligned left */
margin: 0;
}
.navi li {
background: #808080;
float: left;
padding: 0.2em 0.8em 0.2em 0.8em;
border: 1px solid black;
margin: 0 0.4em 0.4em 0;
list-style: none;
font-size: 1.2em;
border-radius: 10px;
}
/* nav-elements for dropdown-menus */
.nav-elements ul {
margin-top: 0.2em;
padding: 7px 10px 0 0;
}
.nav-elements li ul {
position: absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 1000;
width: 9.25em;
margin-left: -0.85em; /* to counter the padding in .navi li */
}
.nav-elements li:focus,
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */
text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */
}
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */
left:auto; /* Bring back on-screen when needed */
text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/
}
.nav-elements ul li {
float: none;
font-size: .9em;
}
According to your issue that you don't want to use fixed width then please check my Updted fiddle
I have used width:100% so it will change according to parent ul. What you need is to change width:100% and position:relative or parent li(.navi li) and then i removed margin-right as it was extra and you got the result.
Updated
As i have used position:relative so width:100 is taking width inside the border so you are missing 2px gap so just for workaround i have used width:101%. Please check my updated fiddle.
let me know if its what you need. Thank you :)
your second ul element can just be wide as the li element around it. try this:
#subMenuFoo {
display: none;
}
#foo:hover ~ #subMenuFoo {
display: block;
}
<div class="nav-elements">
foo
<div id="subMenuFoo">
bar
</div>
</div>
--
please mind the gap
When I hover mouse over menu items they don't always fit perfectly within the navigation bar, I am also unable to fix that tiny gap between border and last navigation item and the gap changes when I zoom in/out the page, when I zoom in/out on google chrome and hover over menu items the hovered item gets taller than the rest of the bar. I've been trying to figure this out for quite some time now. Thank you for your help in advance.
Main objectives: getting rid of the gap next to "contact", making hovered items fit into the navbar, fixing google chrome navbar zooming issue.
Here's my codepen: http://codepen.io/anon/pen/QbBgKR
<nav class="menu">
<ul class="clearfix">
<li>HOME </li>
<li>PROFILE</li>
<li>STUFF</li>
<li>STUFF</li>
<li id="long"> PRODUCTS<span class="arrow">▼</span>
<ul class="sub-menu">
<li>STUFF1</li>
<li>STUFF2</li>
<li>STUFF3</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav><!-- menu -->
.clearfix:after {
display: block;
clear: both;
}
.clearfix {
margin-left: -37px;
}
nav {
font-size: 1em;
width: 700px;
background-color: #3A5199;
font-family: Verdana;
}
#current {
background-color: #6082ec;
}
.menu li {
display: inline-block;
list-style: none;
position: relative;
width: 15.2%;
text-align: center;
margin-left: -0.4%;
margin-right: -0.4%;
}
.menu li:hover {
background-color: #6082ec;
}
.menu a {
text-decoration: none;
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#long {
width: 24%;
}
.menu .arrow {
font-size: 12px;
line-height: 0%;
}
.sub-menu {
width: 128px;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background-color : #6082ec;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li:hover {
background-color: #3A5199;
}
.sub-menu li {
width: 131%;
display: block;
right: 39.2px;
}
.sub-menu a {
position: relative;
text-align: center;
}
Using a reset stylesheet or something like normalize.css will go a long way in fighting various margin, padding and display inconsistencies across browsers and you won't have to do negative margin "hacks" like you did for .clearfix.
Although you have calculated your percentages correctly for your li to add up to 100%, the gap to the right of Contact arises with the pixel rounding of the percentage width you've applied.
15.2% of 700px = 106.4px
The browser will likely round down to 106px. The change in the gap when zooming is also likely related to the percentage widths. At one zoom level the value gets rounded differently.
106px * 5 = 530px + 24% of 700px (168px) = 698px
Since you're using a fixed with on your <nav> element, why not use fixed widths on the li also? Or change up the percentage values a bit. 15.2% for the home link creates more padding between the text Home and the left and right edges of the li than it does for Profile.
Fixed Width Solution
/* default width for all li */
.menu li {
width: 108px;
}
/* Home */
.menu li:nth-child(1) {
width: 100px;
}
/* Products */
.menu li:nth-child(5) {
width: 168px;
}
As far as zooming in Chrome and getting a height change when hovering, I cannot replicate that issue.
Negative margin for UL is working.
.clearfix {
margin-left: -37px;
margin-right:-0.4%;
}
It's strange math her - imho.
So I have a vertical navbar, and I haven't been able to center the tabs. The text is too far off to the right, and when I hover over it, the highlighted box doesn't extend to the margins. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="style2home.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
margin-top: 200px;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
position: absolute;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
}
#nav li {
position: relative;
list-style: none;
padding: 15px;
width: auto;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
}
#nav li a:hover {
color: #778899;
background-color: black;
}
Browsers, and some CSS resets add default rules to elements like UL/OL to keep style-less html elements looking consistent.
ul#nav { padding-left: 0; }
I would recommend using a CSS reset (normalize, eric meyer's reset, etc) to allow you to start from scratch.
Use chrome/firefox/ie11 dev tools (F12, or right click and inspect element), go to the element in the window and hover over it to see the margin/padding rules. Scroll down the CSS rules on the right side to find where they are being applied Or click on 'computed styles' to see all the rules.
For the hover states,
you need to apply your hover to the li and handle the color separately
#nav li:hover { background-color: black; }
#nav li:hover a { color: #778899; }
You also need to add
#nav { overflow: hidden; }
to maintain your border-radius
You have some padding being applied to your #nav element you can fix it by adding:
#nav {padding:0px;}
To make the background cover the entire line add more padding to a and remove padding from the li with the current markup that will do the trick.
li {padding:0px;}
a {padding:15px;}
you can insted add a hover state to the li element but that but that will cause some problems with being able to click the a element correctly.
I'm still relatively new to coding, so this is probably an easy fix.
I have set up menu with 5 menu items, and submenu items under two of the primary menu items. If I line up the first submenu with its menu item, the second one is too far right. If I line up the second submenu with its menu item, the first one is too far right. Is there a way to make both submenus line up under their respective menu items?
Here is the HTML:
<ul id="menu">
<li>Home</li>
<li>About Me
<ul>
<li>Fairfax Psychological Associates</li>
<li>Credentials</li>
</ul></li>
<li>Publications
<ul>
<li>The Wisdom of the Five Messengers</li>
<li>Other Publications</li>
</ul></li>
<li>Location</li>
<li>Strategic Interactions</li>
And this is the CSS:
#menu {
width: 950px;
height:35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #2B297F;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #2B297F;
background-color: #999;
}
#menu li ul
{font-size:15px;
margin-left:-160px;
margin-top:25px;
position:absolute;
text-align:left;
display:none;}
#menu li:hover ul
{display:inline-block;
}
#menu li li
{list-style:none; display:list-item;}
#menu li li a
{color:#2B297F; text-decoration:none;white-space:nowrap;
}
#menu li li a:hover
{color:#2B297F; background-color: #999 text-decoration:none;}
The site is at http://kerryaltmantest.info if you want to see what I mean about the submenu. Thank you!
There are a few changes in css that need to be made:
#menu li ul {
font-size: 15px;
/* margin-left: -160px; REMOVE */
/* margin-top: 25px; REMOVE */
position: absolute;
text-align: left;
top: 30px; /* add this */
left: 0; /* add this */
padding: 0 /* add this */
display: none;
}
#menu li {
display: inline;
padding: 10px;
position: relative; /* add this */
}
The biggest reason that the ul is not positioning properly is because the li it is contained in did not have a position style set. When this happens, absolutely-positioned elements are positioned according to the first ancestor that has a position type set. Additionally, that was apparently not coming into effect because no positioning rules (top/left/bottom/right) were set in the ul. Adding these two things and resetting the margins/padding fixed the issue (css is directly editable/debuggable in chrome's debugger).
https://developer.mozilla.org/en-US/docs/Web/CSS/position:
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used.
Chrome debugging information: https://developer.chrome.com/devtools/index