I have this css for my horizontal menu:
when you hover over the links and a sub menu appears, it shows the sub menu but the page content below moves down slightly.
any ideas?
fiddle here: http://jsfiddle.net/XwDTt/1/
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
change this:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
into this :
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
top:-1px;
}
i think this one is the simplest
nav {
margin: 0 auto;
text-align: center;
height:30px; /* add height to your nav tag */
}
There are two points here:
When you add a border to an element, it often increases the height of the element. You could use a transparent border by default.
Instead of setting a margin property on anchor tags, you could use the property on the sub-menu list-items, which are positioned absolute and doesn't affect the document normal flow.
Use the following:
nav ul li:hover a {
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li:hover li {
margin-top: 5px; /* <-- add margin to sub-menu items */
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid transparent; /* <-- Set a transparent border */
border-bottom: 1px solid transparent; /* <-- Set a transparent border */
}
JSFiddle Demo
You are adding border on hover. You should have transparent borders by default...
And margin too.
nav ul li a {
display: block;
margin-bottom:5px;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
http://jsfiddle.net/XwDTt/3/
Or you can just set the height of li elements:
nav ul li {
float: left;
margin: 0;
padding: 0;
height:30px;
}
Solution 1:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment these
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;*/
}
Solution 2:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment this line only */
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;;
}
and add this line:
nav ul li a {
margin-bottom:5px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
Related
I want to make my navigation have bottom border while in hover, but then it moves all my content 3px down. How do I make it work without moving all content down.
CSS of navigation :
nav {
width: 80%;
margin: 0 auto;
}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
width: 19.7%;
background-color: #e88610;
text-align: center;
border-right: 3px solid gray;
border-top: 1px solid gray;
}
nav ul li:last-child {
border-right: none;
border-bottom-right-radius: 5px;
}
nav ul li:first-child {
border-bottom-left-radius: 5px;
}
nav ul li a {
text-decoration:none;
display: block;
padding: 10px 0px;
color: white;
}
nav ul li a:visited {
color: white;
}
nav ul li a:hover{
background-color: orange;
border-bottom: 3px solid gray;
}
CSS of content below :
#novi_clanak {
background-color: rgba(255, 255, 255, 0.65);
width: 100%;
padding-bottom: 40px;
margin-top:35px;
}
Essentially by adding a border, you're extending the nav by 3px. Have a look at the box-sizing property of CSS at http://www.w3schools.com/css/css3_box-sizing.asp. You want your nav ul li a:hover to have box-sizing: border-box;. That will take the bottom border's 3px into account for the element height.
Alternatively, shorten the nav ul li a:hover height by 3px (set it to 39px).
add to nav css
position: fixed;
I want to make the navigation to look like this, the border needs to look blue for the active links.
Now with this code below:
.main-nav {
list-style: none;
text-align: center;
border-bottom: 2px solid #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
background-color: #ffffff;
padding: 30px 10px;
margin-bottom: 2px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #303030;
text-decoration: none;
}
.main-nav li:active,
.main-nav li:hover {
background-color: #f7f7f7;
border-bottom: 2px solid #439ddc;
border-top: 2px solid #439ddc;
}
My navigation looks like this:
You can use margin-top: -2px and margin-bottom: -2px to fix you problems:
Working example on jsfiddle: https://jsfiddle.net/jqsg0sLa/
.main-nav {
list-style: none;
text-align: center;
border-bottom: 2px solid #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
background-color: #ffffff;
padding: 30px 10px;
margin-top:-2px;
margin-bottom:-2px;
border-top: 2px solid #d9d9d9;
border-bottom: 2px solid #d9d9d9;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #303030;
text-decoration: none;
}
.main-nav li:active,
.main-nav li:hover {
background-color: #f7f7f7;
border-bottom: 2px solid #439ddc;
border-top: 2px solid #439ddc;
}
Sounds like you're thinking of the border-bottom and border-top properties. You are listening for the :hover pseudoclass, to detect if a mouse is over the link. If it is, we will add a blue border.
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
a {
text-decoration: none;
color: black;
}
a:hover {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
<nav>
<ul>
<li>Home</li>
<li>Services</li>
</ul>
</nav>
I'm having some trouble with CSS (to which I am fairly new) - hoping someone can give some advice after my various internet searches have proven fruitless.
My problem is that I have CSS Menu and I have recently changed the width of the main menu element but am stuggling to resize the drop-down child elements to reflect this new size - the sub-menu items are now also appearing next to each other rather than beneath each other.
Any help is appreciated!
JSFiddle: https://jsfiddle.net/anwwgyu8/
CSS:
#wrap2 {
width: 70%;
height: 75px;
margin: 0;
position: absolute;
top: 2190px;
background-color: #2A79BF;
left: 15%;
}
.buttonbar1 {
height: 75px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #2A79BF;
left: 0%;
width: 100%;
}
.buttonbar1 li {
height: 75px;
width: 25%;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #2A79BF;
}
.buttonbar1 a {
padding: 25px 0;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
text-decoration: none;
color: white;
height: 25px;
display: block;
}
.buttonbar1 a:hover {
color: #E0F0FFC
}
.buttonbar1 li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.buttonbar1 li:hover ul {
display: block;
color: #E0F0FF
}
.buttonbar1 li ul li {
background-color: #2A79BF;
color: #E0F0FF
}
.buttonbar1 li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.buttonbar1 li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.buttonbar1 li ul li a:hover {
background-color: #2A79BF;
color: #E0F0FF
}
Float is inherited on submenu items. You should clear your float for submenu:
.buttonbar1 li ul li {
/* ... */
float: none;
width: 100%;
}
https://jsfiddle.net/anwwgyu8/11/
Your float and width properities are being carried down to your sub menu list items. Add the following CSS:
.buttonbar1 li ul li {
display:block;
float:none;
width:100%;
}
.buttonbar1 li ul li{
width:100%;
}
Fiddle: https://jsfiddle.net/anwwgyu8/6/
I have borders on the left and right sides of some items in a list, but I'm getting these white gaps that I don't want, but it's only on the right side which is weird and I haven't been able to figure out what I'm doing wrong.
Any help would be great.
The code:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
width: 150px;
border: 1px solid white;
background: white;
}
ul li:hover {
border: 1px solid black;
}
ul li:hover ul.dropdown {
display: block;
}
ul li:hover li {
border-left: 1px solid black;
border-right: 1px solid black;
}
ul li:hover li.top {
border-top: 1px solid black;
}
ul li:hover li.bottom {
border-bottom: 1px solid black;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
font-size: 14px;
width: 150px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -1px;
}
<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;">
<li><u>Products</u>
<ul class="dropdown">
<li class="top">Apples
</li>
<li>Cans
</li>
<li>Bowls
</li>
<li class="bottom">Cups
</li>
</ul>
</li>
</ul>
The style in ul li
border: 1px solid white;
is causing extra white lines to be drawn
Remove it and you should be good
Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin
Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?
Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}