I'm trying to do a dropdown menu that I designed with photoshop. However, there is a border in the top of this menu. The image, can explain it better:
Using CSS, all I get is a line that covers more that it is designed to. I tryed to use z-index position to make, but without success. Take a look at my code:
nav{
display: inline;
font-weight:900;
text-transform:uppercase;
font-size:13px;
margin-left:95px;
}
.menu > li > a {
width:auto;
padding:10px 20px 10px 10px;
background-image:url('img/seta_menu.png');
background-repeat:no-repeat;
background-position:right 50%;
}
.menu>li{
width:auto;
margin-right:45px;
padding:10px;
border-left: solid 1px #F8FAFA;
border-right: solid 1px #F8FAFA;
border-top:solid 1px #F8FAFA;
border-bottom:solid 1px #F8FAFA;
}
.menu>li:hover{
border-left: solid 1px #bdc9c5;
border-right: solid 1px #bdc9c5;
border-top:solid 1px #bdc9c5;
border-bottom:solid 1px #bdc9c5;
background-color:white;
}
nav>div{
display:inline;
}
nav>div>ul{
display: inline;
}
.menu li{
display: inline-table;
}
.menu>li:hover >ul{
display:block;
}
.sub-menu{
position:absolute;
display:none;
padding:10px;
margin-left:-11px;
margin-top:10px;
border-left: solid 1px #bdc9c5;
border-right: solid 1px #bdc9c5;
border-bottom:solid 1px #bdc9c5;
/*border-top:solid 1px #bdc9c5;*/
background-color:white;
}
.sub-menu ol, ul {
padding:0px;
margin:0px;
}
.sub-menu > li{
display:block;
}
http://jsfiddle.net/btgfE/
Problem solved...
jsfiddle: http://jsfiddle.net/btgfE/2/
1) uncomment the top border of the .sub-menu
2) comment out the bottom border of the .menu>li:hover
3) give .sub-menu the css rule z-index:-1;
4) decrease the margin-top of .sub-menu to 9px
Really what this is doing is letting the top level menu item slightly overlap ontop of the sub-menu item's top border, giving the appearance you are looking for
I have edited your fiddle here:
http://jsfiddle.net/btgfE/4/
I gave the .submenu a z-index of -1, this fixed it.
I also changed the colours so they are more easily visible. You will want to set the green to white, I did this so that you can see the border is on top of the sub-menu's border
Related
I'm developing my web design recently, I tried to use as much css as I can without javascript. Problem came when I'm making my navigation menu which should stay on top. Here is a copy of my code :
ul {
background: rgba(37,39,44,.80);
list-style-type:none;
margin : 0;
padding: 0;
overflow:visible;
font-family:Kreon;
min-width:1349px;
width:100%;
top:0;
position:fixed;
border-bottom: 5px solid #22A85B;
}
li {
float : right;
}
li a{
display:block;
color : white;
text-align:center;
padding: 15px 20px 15px 20px;
text-decoration :none;
border-right:0.5px solid #22a85b;
transition: 0.3s all;
}
li a:hover {
background:#22a85b;
}
.dropdown-arrow {
position:relative;
top:1px;
display:inline-block;
width:0;
height:0;
margin-left:5px;
border: 4px solid transparent;
border-top-color:#fff;
}
.dropdown {
float:right;
position:relative;
display:inline-block;
color: white;
text-align:center;
padding: 15px 20px 15px 20px;
cursor:pointer;
border-right:1px solid #22A85B;
}
.dropdown:hover{
background:#22a85b;
}
.dropdown:focus {
pointer-events:none;
background:#eee;
color:#000;
}
.dropdown-content {
position:absolute;
background-color:#eee;
min-width:150px;
z-index:1;
opacity:0;
visibility:hidden;
transition: 0.2s linear;
margin-top:36px;
margin-left:-50px;
border : 1px solid #bbb;
border-top:none;
}
.dropdown-content a{
text-align:right;
color: black;
font-family:kreon;
text-decoration:none;
padding: 10px 15px 10px 15px;
display:block;
transition: 0.1s linear;
border-bottom: 1px solid #20D23F;
}
.dropdown-content a:hover{
background: #22a85b;
color:#fff;
}
.dropdown:focus .dropdown-content{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.dropdown:focus .dropdown-arrow{
border: 4px solid transparent;
border-bottom-color:#000;
margin-bottom : 4px;
}
<ul>
<li style ="float:left; margin-left:150px; border-left:1px solid #22A85B;">Logo Here</li>
<li style="margin-right:60px;">About Us</li>
<li>Hire Us!</li>
<div tabindex="0" class="dropdown">
<li class="fol">Follow Us <span class="dropdown-arrow"></span></li>
<div class="dropdown-content">
Twitter
Facebook
Pinterest
</div>
</div>
<li>Be Our Designer!</li>
<li>Portfolio</li>
<li style="border-left:1px solid #22A85B;">How Do We Work</li>
</ul>
So to make the menu stay on top, I put position : fixed; on my CSS. But when I resize the browser, the floating menu move to the bottom of some menu. Then I tried to set the min-width only to find out that some of my menu were missing when I resize my browser (can't see it even though I'm scrolling to the left) due the position : fixed.
Any help from you guys would be appreciated. thanks!
I cannot reproduce the described problem when resizing my browser.
Edit: I think I do now understand what you mean (the line break in the menu when you reduce the screen width). You can't change that, only if you change the menu on smaller screen sizes bar like Bootstrap does (see the example below)
See https://jsfiddle.net/bdtbz74f/ (Fiddle of your code)
I also added
body {
margin-top: 60px;
}
ul {
width:100%;
top:0;
left:0;
right:0;
position:fixed;
}
and remove the min-width. The margin-top on the body prevents the content from hiding behind your navbar.
Tip: Take a look at the CSS code of Bootstraps Fixed Top Navbar Example
made a menu like this:
nav
{
margin: 20px;
background-color:pink;
border: 2px solid black;
}
nav a
{
margin:10px;
text-decoration:none;
font-weight:bold;
background-color:red;
border: solid 1px;
background-color:black;
color:Yellow;
padding:10px 30px;
border-radius: 15px;
display:inline-block;
}
<nav >
HTML
CSS
JavaScript
jQuery
</nav>
The problem is no matter what I set the nav height, still it will display very narrow like 50px so menu items display outside of nav.
I am using google Chrome.
Final verdict: OK I got a working solution but no idea why display:inline-block for anchors fixed it.
Looks like setting margin for inline anchors did not have any effects.
Your CSS is broken:
border: 2px solid black /* you forgot the closing ; here */
height:150px;
Therefore the height rule on the next line is not being parsed, causing it to size to its inline content elements.
add display:inline-block; to the nav a selector:
also, the height and width of the nav or unnecessary, as they are set automatically by its content
nav
{
margin: 20px;
background-color:pink;
border: 2px solid black;
}
nav a
{
margin:10px;
text-decoration:none;
font-weight:bold
background-color:red;
border: solid 1px;
background-color:black;
color:Yellow;
padding:10px 30px;
border-radius: 15px;
display:inline-block;
}
<nav >
HTML
CSS
JavaScript
jQuery
</nav>
Here's my situation:
I want to make a CSS dropdown. Normally I can do this no problem with embedded ULs. However, I want to make a multi-column dropdown. I need the dropdowns to be of dynamic width though.
I have accomplished this with tables, but Id like to see if I could do it with DIVs.
My CSS for the drop down UL/LI is:
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
position: relative;
float:left;
margin-left:16px;
}
#nav li ul {
position: absolute;
display: none;
z-index:10;
}
#nav li:hover ul {
display:block;
}
#nav ul li a.main {
display: block;
height:47px;
text-decoration: none;
color: #fff;
padding: 0 16px 0 16px;
line-height: 48px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
font-weight:bold;
}
#nav ul li a.main:hover {
background:#FFF;
color:#222222;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
That creates the horizontal navigation with drop downs with this HTML:
<ul>
<li><a class="main">HO Scale</a>
<ul>
</ul>
</li>
</ul>
Using a table, I can put it inside the inner UL and use this CSS
.inner{
float:left;
background:#FFF;
border:1px solid #000;
border-top:0;
padding:12px 0 12px 12px;
}
By putting a Table with class of inner in those inner ULs it will work perfectly, space them out, 3 columns, all dynamic width.
I'd like to accomplish that with DIVs, but the problem is when I float (or don't float) the "inner" DIV it puts all of the links on the inside one to a line, I can't seem to make them go side by side. If I put the DIV OUTSIDE thee dropdown, it works just fine.
Any suggestions?
EDIT:
This is how it should look (and does with tables):
This is how it looks with DIVs (wrong)
I have a very specific problem as I am trying to create a navigation that has angles using purely CSS without images or javascript. I have figured it out so that it works perfectly but the problem I am coming across is that IE 9 and Chrome look different. I can get both to work by changing the margins of the pseudo elements but I would prefer a single solution to work in both. If anyone can figure out why the margins are different and give me a single CSS solution to work in both browsers that would be great. Otherwise I will have to add a seperate class for IE and force it to work using a seperate CSS entry.
Here is the jsfiddle to work with arrow-nav
Here is the HTML
<ul>
<li><a href="#" >Some Navigation</a></li>
<li>More navigation</li>
<li>Another Nav</li>
<li>Test Nav</li>
<li>A Test Navigation</li>
</ul>
The CSS
ul {
float:right;
list-style-type:none;
margin:0;
padding:0;
width: 300px;
}
ul li a {
float:left;
width:300px;
}
ul li{
float:left;
width: 300px;
height:50px;
line-height:50px;
text-indent:10%;
background: grey;
margin-bottom:10px;
border:1px solid black;
}
ul li:before {
content:"";
position:absolute;
margin-top:-1px;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
border-right: 21px solid black;
margin-left:-22px;
}
ul li:after {
content:"";
position:absolute;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 20px solid grey;
margin-left:-320px;
}
You can fix this by using absolute positioning on the pseudo elements. To make this work correctly, set the position of ul li to relative (which will cause elements positioned absolutely within it to be relative to the li). Then, update the position of the pseudo elements to use left instead of margin-left:
ul li{
position: relative; // Add this.
float:left;
width: 300px;
height:50px;
line-height:50px;
text-indent:10%;
background: grey;
margin-bottom:10px;
border:1px solid black;
}
ul li:before {
content:"";
position:absolute;
margin-top:-1px;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
border-right: 21px solid black;
left:-22px; // Update from margin-left to left
}
ul li:after {
content:"";
position:absolute;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 20px solid grey;
left:-20px; // Update from margin-left to left
}
http://jsfiddle.net/ryanbrill/jSdWR/5/
You need to specify the position for the elements (for example top and left values). And for some reason, which I don't fully understand - to add position: relative to the li (not the ul):
http://jsfiddle.net/jSdWR/4/
how to get rid of the border-bottom which under test text in the li when the mouse hover on the test text by css?
the html :
<div class="rank">
<ul>
<li class="tab1 active">test</li>
<li class="tab2">one</li>
</ul>
</div>
<div class="content">....</div>
my style(it's doesn't get rid of the bottom under test text):
.active{
background-color:#FFFFFF;
}
rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
ps: why when i use overflow:hidden to rank div, it can prevent the float to the content div?
#zhuanzhou; may be you have to play with margin padding
for example
.rank ul{
border-bottom:1px solid #D5D5D5;
}
.clr{
clear:both;
}
.active{
background-color:#FFFFFF;
padding-bottom:1px;
margin-bottom:-1px;
}
.rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
margin-right:10px;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
check live demo http://jsfiddle.net/PBBED/
NOTE:in my example i am using clear:both instead of overflow:hidden for clear floated child element.
.active {
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
margin-bottom: -1px;
}
.active{
background-color:#FFFFFF;
}
ul li{
display:inline;
}
li{
border-bottom:1px solid;
}
li:hover{
border-bottom:none;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
Remove line 7 in your css then start a new selector using the css psuedo class :hover at the end
rank ul li:hover {
border-bottom: none;
}
Although, older browser will disregard that unless it is on an a tag.