I am learning how to make nav bars with drop downs. This works well on Firefox and Chrome, but not in Edge. The problem is that once the drop down has been displayed after the mouse was hovering over it, when the mouse is moved and it's time for it to have display: none, you can still see a tiny amount of the bottom sticking out where the dropdown was. This is only when the ul is floated.
I've removed a lot of css to leave what mainly is essential, but included the whole html, in case anyone wants to just copy and paste into a file to see. I'm am wondering if this is something I've done wrong, or a bug in Edge, and if anyone can tell me how I can prevent this from happening.
<html>
<head>
<style>
.right {
float: right;
}
.nav {
background-color: #444;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
font-size: 1.1em;
display: inline-block;
}
.nav .dropdown {
position: absolute;
display: none;
background-color: #444;
font-size: 0.9em;
}
.nav .dropdown li {
display: block;
}
.nav li:hover ul {
display: block;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a {
padding: 15px 25px 15px 25px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li class="right">Your...
<ul class="dropdown">
<li>Profile</li>
<li>Bookmarks</li>
<li>Songs</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I may have been hasty posting this question. I have figured out a way of hiding the problem by adding a border to the nav bar.
.nav {
background-color: #444;
border-bottom: solid #444 thin;
}
Related
My website project has a navigation bar at the top of the page. I made it on the index/home page and then copied and pasted it onto the other three pages so that there would be no differences. It looks the same on all of the pages, except for one page, where it has less margin/padding. I'll insert the pictures, but I've been told that the difference isn't clear unless you see it in real life on my screen.
Correct margin/padding, incorrect margin/padding.
.navigation {
list-style-type: none;
margin: 5px;
padding: 1px;
text-align: center;
background-color:#bee7b8;
overflow: hidden;
}
.navigation img {
width: 250px;
float: left;
}
.navigation a {
display: block;
width: 10px;
color: #0c7c59;
font-family: Nunito;
font-size: 28px;
text-decoration: none;
padding-left: 100px;
}
.navigation li {
float: left;
padding-top: 32.5px;
width: 295px;
}
.navigation a:link {
color: #0c7c59;
}
.navigation a:visited {
color: #28c191;
}
.navigation a:hover {
color: #799b74;
}
.navigation a:active {
color: #4c2e05;
}
<header>
<ul class="navigation">
<img class="navigation" src="https://i.imgur.com/x4oWsIA.png">
<li>HOMEPAGE</li>
<li>PRODUCTS</li>
<li>REGISTER</li>
<li>FAQ</li>
</ul>
</header>
I'm wondering if it's like this because I've tried using an image slideshow from W3 schools (shown in this question of mine), but removing that has not helped.
EDIT: I found out that linking to the w3 stylesheet is what causes it! IDK how to fix this though...
have you reset your CSS code? If you haven't then try this on top of your CSS code:
* {
margin: none;
padding: none;
}
also, make sure you didn't miss anything when you copied the code.
I have a navigation menu on my website. It works, however when hovering over a menu item with sub-items they disappear when trying to click on them. It appears that there is a spacing issue with these items.
*Additionally, I am trying to figure out how to insert a | between the menu items. If you could share some insight that would be amazing. I only have basic coding knowledge as you can probably tell from my post.
I appreciate the assistance!
/* do not change */
.container {
overflow: unset;
}
#container ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
#container ul li ul li {
display: none;
}
/* can change */
#container {
text-align: center;
}
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
#container ul li a {
color: black;
text-decoration: none;
font-weight: bold;
display: block;
}
#container ul li a:hover {
text-decoration: none;
border-radius: 0px;
color: #1dcdfe;
}
#container ul li:hover ul li {
background-color: white;
display: block;
margin-left: 0px;
}
<div id="container">
<ul>
<li><a href='#scroll-home'>Home</a></li>
<li><a href='#'>About Us</a>
<ul>
<li><a href='#scroll-whyhere'>Why You're Here</a></li>
<li><a href='#scroll-ourmethod'>Our Method</a></li>
<li><a href='#scroll-whyus'>Why Choose US</a></li>
<li><a href='#scroll-testimonials'>Testimonials</a></li>
</ul>
</li>
<li><a href='#'>Our Services</a>
<ul>
<li><a href='#scroll-wetreat'>What We Treat</a></li>
<li><a href='#scroll-packages'>Packages & Pricing</a></li>
</ul>
</li>
<li><a href='#scroll-faq'>FAQs</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
If I'm understanding you correctly, you want horizontal separators on your top-most navigation elements.
To do this, you can add borders to your li elements and then exclude the last one, like so:
#container ul li {
// ... other styles here
border-right: 1px solid black;
}
/* Add this additional style so that the last item doesn't receive the border */
#container ul li:last-child {
border-right: none;
}
A working example can be found at https://codepen.io/BrandonClapp/pen/wvGqrmQ
Following code add the pipes between menu's
#container > ul > li {
border-right: 1px solid black;
}
#container > ul > li:last-child {
border-right: 0;
}
Well thats because you have given every li a specific height here:
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
Which does not let the box grow when its hovered. You can give the nav buttons that have the hovering option an id and give the following code:
#container ul li #drop_down{
height: 100%;
}
For hindering future confusion, if you want to select direct children, use >, like so:
#container > ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
Here you have not used it, so even the inner ul is having these attributes, which ruins it. If you change it to the code above it will get fixed. Why? because the inner ul has the display: inline-block; attribute in your code which should not be.
Furthermore, Try giving the box a background-color and a z-index, so it will not keep detecting hover in behind boxes, in this case contact button.
For your other question I refer you to this link:
How to make a vertical line in HTML
And, or:
https://medium.com/#hollybourneville/creating-border-lines-using-pseudo-elements-in-css-a460396299e8
In my navagation bar, I want only hovered on elements to stretch out and change color, but it seems the whole navagation bar stretches. I've tried changing what must be hovered on to trigger the animation, but nothing seems to be working. Can you identify and correct my error?
#keyframes mouse {
0% {
background-color: #35B1C2;
height: 40px
}
100% {
background-color: #2F9EBD;
height: 60px
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-name: mouse;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
You can remove the overflow:hidden and add
overflow:visible;
height:45px; /* The height of your navbar */
to your ul element.
Try this:
ul, li a:hover {
font-size: 30px;
color: red;
}
There is actually no error in your code. What happens is that the ul box contains the li boxes. So, when you hover on a li box and the li box's height increases from 40px to 60px, the ul box that is containing that box also stretches out because it needs to contain the li box.
So, you just need to work around that issue. I'd suggest not using the ul box at all, but that's just something I think is more efficient because you realize you don't actually really need it (you'd still need to contain the navigation bar inside of a box, maybe a div or header).
You have not set a nav bar heigh. So when the li height change on hover, the navbar will adjust its height to fit the content. Instead of going with animation, I would do this with a simple transition. Add a min-height to the navbar and apply a transition property to the ul tag. Also apply an overflow:visible on hover
See snippet below
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
min-height: 50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li :hover {
background-color: #2F9EBD;
height: 60px;
transition: all 1s;
}
ul:hover {
overflow: visible;
}
li {
border-right: 1px solid #bbb;
transition: all 1s;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
</body>
</html>
I don't know how to explain what's happening, but I have a logo image on my site and when you hover over some of it, it works right, but if you hover over some of the other parts it doesn't act like a link. It acts on it randomly so it's not like half of the image is just not a link or something it's like hover over the letter "P" it works hover over "in" it doesn't work hover over "kT" it works again (the logo says "Pink Tangerine").
It's a png with a transparent background so I'm wondering if that has something to so with it, but that doesn't make any sense. I've never ran into a problem like this before, can you guys tell me what's wrong?
HTML5
<div id="main-banner">
<header>
<a id="image" href="index.html">
<img alt="Logo" src="Images/PT-logo.png">
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</div>
CSS3
I don't imagine most of my CSS should be relevant, but I included all the link description and main header/banner stuff just in case. The one class that deals with the image is at the bottom of the CSS and it only makes it so I don't get a weird border when I hover over the image.
/*Link Info */
a {
text-decoration: none;
color: #DB7093;
}
a:link, a:visited {
text-decoration: none;
color: #FFC0CB;
}
a:hover, a:active {
text-decoration: none;
background-color: #DB7093;
color: #F0F8FF;
}
/*Banner Navigation*/
#main-banner {
width: 100%;
height: 110px;
padding: 25px 0 0;
background-color: #FFC0CB;
}
#main-banner header {
width: 70%;
margin: auto;
}
#main-banner header img {
width: 300px;
height: 100px;
float: left;
margin-left: 10%;
}
#main-banner header nav {
position: relative;
height: 20px;
left: 105px;
top: 50px;
}
#main-banner header nav ul {
list-style: none;
margin: auto;
}
#main-banner header nav ul li {
float: left;
display: inline;
}
#main-banner header nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
#main-banner header nav ul li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 12px;
}
/*Image Links*/
a#image {
background-color: transparent;
}
So the issue is the nav tag and the left/top/height css style, because it's container is the same as the image link so there is overlap.
removing the left/top/height fixes it as seen here. It depends on what your ultimate goal is as far as looks go in order to fix it and still have the appearance you want.
#main-banner header nav {
position: relative;
}
EDIT:
I would think using some margin to move the element would get you what you want, just not sure where the placement is supposed to go.
Figured it out thanks to something Charles380 pointed out. I made the image absolute and just the nav relative so I could move it like I wanted. Thanks for your help guys.
Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}