I am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
Related
My website has a scaling problem on the chrome browser in android on mobile. This does not happen in Firefox on mobile or in any desktop browser. When the navbar is selected and drops down, it scales the webpage. Note that the page is scaled differently depending on which dropdown has been selected. It seems as though the navbar has invisible content that is breaking frame when the dropdown behavior is engaged.
I have stitched together 4 screenshots of the issue.
Help with either a fix or a workaround would be much appreciated.
#NavigationBarList{
list-style-type:none;
padding:0;
}
li{
font-size:130%;
}
nav a{
display:block;
}
/* This customizes the presentation of the list elements (menu items) in the navbar. */
nav li{
display:block;
font-weight:bold;
font-size:200%;
color:#7F1717;
background-color:#9E939E;
width:25%;
text-align:center;
text-decoration:none;
text-transform:uppercase;
z-index:11;
-moz-box-shadow: inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 1px #000000;
box-shadow: inset 0 0 1px #000000;
}
nav ul{
width:100%;
}
/* Hide the sub menu items. */
nav ul ul {
display:none;
}
nav ul ul ul {
display:none
}
/* When hovered over, the CSS menu will drop down. */
nav li:hover > ul {
text-align:center;
font-size:40%;
display:block;
}
/* Don't underline links in the list elements (menu items). */
ul a {
text-decoration:none;
color:#7F1717;
}
/* Change the background color of hovered list elements. This was both active and hover... */
nav li:hover{
background-color:#625C62;
}
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:100%
}
nav ul ul ul{
position: absolute;
width:400%;
left:100%;
top:0;
}
#totheleft{
left:-100%;
}
nav ul ul ul li{
text-align:center;
font-size:250%;
}
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
}
<nav>
<ul id="NavigationBarList">
<li style="float:left;">Events
<ul>
<li>Tournaments</li>
<li>Kid's Hour</li>
<li>Local Calendar</li>
</ul>
</li>
<li style="float:left;">Programs
<ul>
<li>Summer Camps</li>
<li>In Schools
<ul>
<li>After School</li>
<li>Registration</li>
</ul>
</li>
<li>Local Instructors</li>
</ul>
</li>
<li style="float:left;">Content
<ul>
<li>Posts</li>
<li>Games
</ul>
</li>
</li>
<li style="float:left;">Connect
<ul>
<li>Contact Us</li>
<li>Resources
<ul id="totheleft">
<li>Chess</li>
<li>Go</li>
<li>Xiangqi</li>
<li>Shogi</li>
<li>Backgammon</li>
</ul>
</li>
<li>About Us</li>
</ul>
</li>
</ul>
</nav>
Add this to the head section of all your pages.
<meta name="viewport" content="user-scalable=0">
From the google developers site
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.
So when you visit the webpage on mobile, the view is actually zoomed out to fit all your content. When you touch your navbar, the browser also tries to zoom in. Setting user-scalable=0 prevents this from happening.
The downside is your users will no longer be able to scale the zoom on the website on mobile, but the only alternative would be to rewrite your website to use a fluid layout.
Your <ul>s that contain the dropdown items have width=100%. This means the width will be 100% of the first relatively positioned parent (which in this case is the <body>). This is causing an overflow on the x axis.
You could make the <ul>s 25% width and the <li>s inside 100%, instead of what you have now where the <li>s are 25%.
Giving you
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:25%;
}
and
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
width:100%;
}
I went to your site and checked it out real quick... I noticed you are using absolute positioning to position your content in the center of your page. I assume this is what is causing your issue.
I would look up a tutorial on how to create a repeating background image and use that instead of trying to use one image with no repeat. then you can center your content with margin: 0 auto.
I know its not a definite answer but I hope it nudges you in the right direction.
The workaround I came up with was to set overflow-x:hidden on my overlay. I had tried this previously on the body, but on Android overflow-x does not work on the body; it must be set for a container. There is presumably a related reason that this issue only arose on Android. This workaround works perfectly.
So, in my header, I have a horizontal list of links. Next to them, I wanted a search bar, but when I insert it next to my links, all of them now appear behind my body div.
HTML:
<ul id="unordered">
<li>LInk1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li><input type="text"></li>
</ul>
CSS:
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:400px;
}
#unordered li a{
text-align:center;
color:white;
text-decoration:none;
font-size:18px;
list-style-type:none;
}
#unordered li {
list-style-type:none;
display:inline;
padding-left: 0px;
padding-right: 55px;
padding-bottom: 15px;
}
#unordered li link {
list-style-type:none;
margin-bottom: 10px;
}
Here's screenshots of before and after...
Before: http://prntscr.com/2jfi8i
After: http://prntscr.com/2jfhxz
Thank you.
Edit: I noticed that I forgot form tags. After I inserted them, it's no longer hidden behind the body div, but the links are now above the text box.
So I think what's happening is your #unordered is not wide enough with the position you give it. The text field shifts down. The following fixed it
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:100px; /*It's 100px instead of 400px, the ul is wider*/
}
There are other ways to fix it, the above is just one way.
Update
I removed the form tags, unless you really want those? (they were not in the original code) I then removed the height:0px which resolved the body appearing to be in front of the ul element. It was not allowing for any padding/margin below the text element. Again though, if the page stretches (the width increases) out the text input re-renders inline with the rest.
Please see Fiddle Update
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
I have a drop down menu which has the following html structure:
<ul class="menu">
<li>Menu Item 1
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
</ul>
</li>
</ul>
and I have the following css rules:
.menu {float:left}
.menu > li {position:relative; float:left}
.menu > li > a {display:block}
.sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}
I'm using javascript to show the drop down menu.
The issue I have is that the sub-menus are appearing below a slideshow which I have close to the navigation. No matter how high or how low I set the z-index of .sub-menu, nothing changes.
Does anyone know what could possibly trigger z-index to not work at all?
Thanks.
EDIT: The issue is with all browsers. Testing in Firefox, Chrome and Internet Explorer
I think I have found the issue. I was using opacity on the div containing the menu. For some reason this caused z-index to not work on the sub-menu. I am not sure why this is. It works fine now that I've removed the opacity rule.
Check the z-index of the elements it is supposed to appear above. make sure they are lower.
Also make sure that the parent element hasn't got the overflow hidden.
Set the Z-index of the parent and then set the Z-index of the child.
.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}
which is better for use
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu ul li{
float:left;
width:150px;
height:25px;
background:#F00;
}
or
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu li{
float:left;
width:150px;
height:25px;
background:#F00;
}
which tag is right menu ul li or menu li?
When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?
If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments
.menu > ul > li{
// this matches only list items directly inside a ul directly inside a .menu
}
even better would be this:
#menu > ul > li{
// now you are referencing the menu by id, so you know this is a unique assignment
}
or, if you have multiple menus:
#menubar > .menu > ul > li{
}
because otherwise you are in for surprises, you might actually have a structure like this:
(this is ugly, I know, but just to prove a point)
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3
<ul>
<li id="abc">Menu Item abc</li>
</ul>
</li>
<li>Menu Item 4
<div><div><div><ol><li><div><ul>
<li id="xyz">Menu Item xyz</li>
</ul></div></li></ol></div></div></div>
</li>
</ul>
</div>
(you probably don't want to match items abc or xyz).
It makes no difference until you have to interact with other, similar selectors in the same stylesheet — and then it depends on what those selectors are.
It depends. If you've got an ol and a ul within .menu you'll want to use the more specific .menu ul li. Otherwise, .menu li is fine. You might like to read up on CSS specifity.
Unless you're going to also have ordered lists (<ol>) inside .menu containers, the result is exactly the same. Some will probably say one is faster than the other, but that is irrelevant (and hard to prove as it may differ in every browser)
Your selectors should match your intent - if you mean for any list item, regardless of whether it's inside a UL or OL to be styled the same, then example B. If it's only UL LI's you want to style, then A.
This is a fairly simple example, but this is a useful rule of thumb. Ask yourself "If someone came and stuck an ordered list inside .menu, how would I want it to look?
It's a great way to keep your CSS to just the right level of specificity, while maintaining flexibility in the HTML structure it can apply to.
Mozilla Devcenter recommend to use .menu li. You can red more about Writing Efficient CSS and optimizing css code. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 }.