I'm designing a Homepage like this: https://dl.dropboxusercontent.com/u/178536659/new/Document.htm and I'm currently working on the dropdown menu. My problem is that my dropdown menu is not fully displayed. I tried so many ways such as using "float: left" (what what I'm using now) or using "dislay:inline" for the ul li, it still doesn't work.
try this
in this class #nav li ul z-index give then menu show properly,
#nav li ul {
background-color: black;
display: none;
left: -60px;
margin: 0;
padding: 0;
position: absolute;
width: 257px;
z-index: 1;
}
#nav ul li ul li {
border-bottom: 2px solid #2185C5;
padding: 14px;
width: 89%;
}
Add the following to remove the extra blue border:
#nav ul li ul li {
padding: 14px 25px 14px 14px;
border-bottom: 2px solid #2185C5;
width: 100%;
margin-left: -40px;
}
#aftercolor {
position: absolute;
top: 99px;
height: 8px;
width: 960px;
background-color: #2185C5;
}
also add margin:0 to your body to make your site good looking.
body{
margin: 0;
}
Related
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I have a navigation dropdown element that I would like to make selectable - currently the link only works when the text is hovered and not the box surrounding it. Is there a way in which I can do this in CSS.
My CSS code:
.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
z-index: 2000;
}
.main-menu ul {
width: 50%;
background-color: #333;
display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
}
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}
.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Jsfiddle is: http://jsfiddle.net/9BdTK/
Method 1
You can simply move the <a></a> outside of <li>.
E.G:
<li>Home</li>
DEMO HERE
Note: I have only done this for the first two links.
Method 2
A better way to do this is the following:
HTML:
<div id="con">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
CSS:
#con {
width: 100%;
background: #eee;
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
width: 80px;
height: 50px;
outline: 1px solid #000;
}
a {
display: block;
height: 100%;
width: 100%;
}
Keep <a> inside and set it to display: block;, then set the width and height to 100% and this will take up the whole div creating a div link.
Demo of div link - DEMO HERE
Demo with hover - DEMO HERE
Hope this helps.
I have this on my site, but I also managed to do so from this site.
have a look :
Don't put padding in the 'li' item. Instead set the anchor tag to
display:inline-block; and apply padding to it.By Stussa
As said on : Make whole area clickable
Goodluck
I have a sidebar on the page that should look like this
but What I get is this
The submenu doesn't show as it should, my code look like this
.submenu{
position: absolute;
}
.submenu ul{
height: auto !important;
background-color: transparent !important;
}
.submenu ul li{
position: static !important;
}
When I assign right: value the behavior of the component is not usual. Here is a jsfiddle
Thank you!
Okay I got this to work but not in the fiddle you provided. When making a fiddle for a question on overflow try to isolate only the code that pertains to the question or problem. When you add everything in there it makes it a little hard to find the related material.
I made a fiddle for you to show how it works and if you like how it is then feel free to just use that. This is a css dropdown and doesn't require any scripting. What you need to do is nestle a ul inside of the main ul's li tag. You then have to hide the nested ul to later be revealed on a hover action.
The triangle I made does not have to be a CSS3 triangle, you can use an image.
HTML
<div class="sideBar">
<ul>
<li>¿Porqué Nosotros?</li>
<li><span class="tri"></span>Pregrado
<ul>
<li>Diseño & Comunicación Visual</li>
<li>Comunicació y Relaciones Públicas</li>
</ul>
</li>
<li>Posgrado</li>
<li>Maestría</li>
<li>Calendario</li>
</ul>
CSS
.sideBar {
position: absolute;
top: 0;
left: 0;
background: black;
color: #fff;
width: 200px;
}
.sideBar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sideBar ul li {
height: 20%;
width: 180px;
padding: 10px 0 10px 20px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.tri {
content: "";
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 10px solid red;
position: absolute;
width: 0;
height: 0;
padding: 0;
margin: 0;
left: 100%;
top: 20%;
display: none;
z-index: 1000;
}
.tri:after {
height: 38px;
left: 100%;
top: 0;
content: "";
position: absolute;
width: 10px;
display: block;
}
.sideBar ul li:hover .tri {
display: block;
}
.sideBar ul li:hover {
background: red;
}
.sideBar ul li ul {
display: none;
position: absolute;
top: 30%;
left: 100%;
}
.sideBar ul li ul li {
background: #7b7b7b;
border: none;
padding-left: 20px;
width: 260px;
}
.sideBar ul li ul li:hover {
background: black;
}
.sideBar ul li:hover ul {
display: block;
}
Here is a fiddle you can use for a visual reference.
jsfiddle
If you need more help then let me know.
I'm stuck on a problem with the drop down menu on this site http://www.leithonthefringe.com/ (hover over performer information to see problem).
Basically a large gap appears between the main menu and the first item in the drop down, it affects FF/IE/Chrome.
Any thoughts greatly appreciated!
CSS is as follows:
#menu-main-nav { margin: 0px; padding: 0px; }
#menu-main-nav li { float: left; list-style: none; height: 40px; font-size: 20px; }
#menu-main-nav li a { display: block; background: #333333; padding: 12px 24px 8px 24px; text-decoration: none; border-right: 1px solid #444444; color: #EAFFED; white-space: nowrap; }
#menu-main-nav li a:hover { background: #222222; }
#menu-main-nav li ul { margin: 0px; padding: 0px; height: 40px; position: absolute; visibility: hidden; border-top: 1px solid white; z-index: +1 }
#menu-main-nav li ul li { float: none; display: inline; }
#menu-main-nav li ul li a { width: auto; background: #750000; color: #FFFFFF; border-right: none; }
#menu-main-nav li ul li a:hover { background: #8d0101; }
//Update
The problem seems to be cufon rendering a white space that doesn't seem to exist as cufon text - any thoughts on why that would happen also appreciated.
The solution turned out to be to render cufon on #main-menu-nav a rather than #main-menu-nav...
Theres a cufon in the way.
<cufon class="cufon cufon-canvas" alt=" " style="width: 4px; height: 20px; "><canvas width="14" height="22" style="width: 14px; height: 22px; top: -2px; left: 0px; "></canvas><cufontext> </cufontext></cufon>
the issue is padding, specifically in #menu-main-nav li a The padding-top value needs to be 0.
I'm on Chrome/Firefox. I've read several tutorials and questions here too on this topic.
I have a UL containing LI. I set the LIs to "display: inline;", but they won't. They're still vertical.
What am I doing wrong?
Thx.
Here's my css:
.menu{
width: 100%;
padding: 0px;
margin: 0px;
outline: 1px solid grey;
background-color: #f6f6f6;
font-size:100%;
}
.menu ul{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
background-color: #f6f6f6;
}
.menu li ul{
display: none;
height: auto;
padding: 0px;
margin: 0;
background-color: #f6f6f6;
outline: 1px solid gray;
position: absolute;
z-index: 200;
left: 20px;
top: 30%;
}
.menu li:hover ul{
display: block;
}
.menu li:hover{
background-color: #005ea2;
}
.menu li{
display: inline;
padding: 0;
margin: 0;
border-bottom: 1px dotted grey;
}
.menu ul li:last-child{
border: none;
}
.menu a{
display: block;
color: #333333;
text-decoration: none;
margin: 0px;
margin-left: 5px;
}
.menu a:hover{
color: white;
background-color: #005ea2;
}
.menu .menu_header{
color: #333333;
}
.menu .menu_header a:hover{
color: white;
}
The <li> elements need to have float:left
first of all you might consider adding the relevant HTML to your answer, to help answerers understand your situation better.
I can spot several strange things that might be related to your problem.
First, the li ul selector are not very useful: it's more likely that you meant the opposite, ul li.
Second, I see that on hover you have something changing to display: block. This is a very
strange behavior to have on hover, are you sure?
Third, I see that you have a { display: block }. This does not play nicely if its container is display: inline so you might want to switch to display: inline-block for the container (which is what I would suggest for an horizontal menu anyway)