http://jsfiddle.net/#&togetherjs=d0aVDl0LjI
The dropdown for the 'Games' tab is going all the way to the bottom of the page, instead of right under the tab.
Any ideas what is going on? I've looked at the css and I can't see any issues.
You need to tell the system where the list should be positioned absolutely.
The way to do that is to give position: relative; on the parent.
Change your css to include this as below:
li {
padding-left: 10px;
display:inline;
background-color: #2c3e50;
line-height:40px;
position: relative;
}
Once you do, the drop-down shows in the right place vertically, but all the way to the left. To fix that, simply add left: 0; to the ul subnav css:
.nav ul ul {
display: none;
position: absolute;
top:100%;
left: 0;
}
Finally, you'll want to style the subnav li / a elements to be display block, so they show up properly:
.nav ul ul li {
float:none;
position: relative;
display: block;
}
.nav ul ul li a {
display: block;
}
Related
ok hi guys i am really confused here now.I have my CSS and HTML code below.
CSS-:
#nav_wrapper ul li{
//float: left;
padding-left: 70px;
position: relative;
left: 33px;
display: inline;
}
#nav_wrapper ul li a{
text-decoration: none;
//display: block;
border: 1px solid black;
}
Below is my HTML CODE-:
<div id="nav_wrapper">
<ul>
<li>ELECTRONICS </li>
<li>APPLIANCES</li>
<li>MEN</li>
<li>WOMEN</li>
<li>BABY&KIDS</li>
<li>HOME&FURNITURE</li>
<li>BOOKS&MORE</li>
</ul>
</div>
Now my issue is when i use display: inline; in #nav_wrapper ul li all the li elements align them self horizontally.And then when i write display: block;(commented for now) in #nav_wrapper ul li a(commented for now) they align them self vertically.Now if i comment display: inline; and remove comments from //float: left;.They align them self horizontally again.How is it working ?????
MY POINT IS-:
How does display: inline; and float: left; property are adjusting them self with //display: block; or i am doing something wrong?
Basically There is two type of element in HTML.
Block type
Inline
Anchor tag(a) is a inline element. So when you use 'display: block;' in Anchor tag(a), it behave like block type element and like other Block type element it takes full width and it looks like vertically aligned. So use the following code and hope it will be helpful -
#nav_wrapper ul li{
display: inline;
}
#nav_wrapper ul li a{
text-decoration: none;
border: 1px solid black;
padding: based on your design;
margin: based on your design;
}
Normally list(li) are shown vertically. But when we have to arrange the list(li) horizontally we can give the display property as inline or can give float:left. Normally block elements like div are shown vertically. If we want to arrange them in horizontal, we can give style as display: inline or give float as left. Please go through the link which i have posted previously to understand about the display properties.
nav_wrapper ul li{
float: left;
padding-left: 70px;
position: relative;
left: 33px;
display: inline-block;
}
#nav_wrapper ul li a{
text-decoration: none;
border: 1px solid black;
}
//try the above code
I'm trying to create navigation menu in which last element is on the right side. When I use
float: right
That element is slightly lower that other elements of the navigation menu. Why is that and how can I fix it?
Here is my css:
nav ul{
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
padding: 5px 1em;
}
nav ul li:last-child{
float: right;
}
And link to JSFiddle: https://jsfiddle.net/sLqnm8r5/
Your elements would align correctly if you added a float:left; to your first elements.
checkout Fiddle
I am trying to have equal spacing between four different li elements, but I end up with this:
HTML:
<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>
CSS:
ul li {
width: 25%;
display: inline-block;
text-align: center;
}
I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:
(Equal spacing)
My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.
ul {
/* Use flex boxes to align li items */
display: flex;
justify-content: space-around;
/* Remove default padding from major browsers */
padding: 0;
/* Hide the default decorations for li items */
list-style: none;
}
ul > li {
/* Display the elements in one line */
display: inline-block;
}
Check out this JSFiddle to see it working.
Try this
ul {
width:100%;
margin-left: 0;
margin-bottom: 0
}
li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
I created a navbar and I can't figure out how to get the padding areas of the link to be clickable just like the link.
I have the padding configured in this part of my CSS..
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
padding: 25px 20px;
}
I created a fiddle. Mine doesn't look like this, but it is enough to show the hover effect and how the padding areas of the link are not clickable to go to the link.
How can I make the padding areas clickable to go to the link?
https://jsfiddle.net/mykx37n9/
You just need to add the padding to the link within the <li>
try:
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
}
.spectator_nav li a{
padding: 25px 20px;
}
In my main horizontal navigation, I have a container called #main-nav, and buttons in the form of anchor tags within. The anchor tag size won't match up with the #main-nav container, and I can't figure out why.
oh, also, the dropdown menus sit higher on the baseline of the menu than they should a few pixels, I'm not sure if this is related.
I currently have the highlight color and dropdowns the same as the menu bar to disguise the problem, but this isn't optimal. (A code inspector clearly shows the problem)
My site is http://www.darkmatter-designs.com/
Any help would be greatly appreciated, I've run out of ideas.
Use max-width and margin 0 auto to center your ul in nav
#main-nav ul {
/* display: inline-block; */
position: relative;
max-width: 960px;
margin: 0 auto;
}
CSS Centering:
If you just want the anchors to be "centered":
#main-nav ul {
position: relative;
/* display: inline-block; */
max-width: 960px;
margin: 0 auto;
text-align: center;
}
#main-nav ul li {
/* float: left; */
display: inline-block;
}
To fixe the dropdown you can add padding-top to #main-nav ul ul
#main-nav ul ul {
background: #1E344A;
position: absolute;
top: 100%;
z-index: 1;
padding-top: 3px;/*was added*/
}
and since you are using position absolute to ul ul make sure you add position:relative to the parent element like this:
#main-nav ul li {
float: left;
position: relative;/*was added*/
}