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.
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'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment)
That has been fixed by adding the right red border using pseudo elements. However, the anchor tags have been disabled. I think it's due to the red border's "absolute" position, but I can't get the menu to appear as it should without the absolute position. Now, it looks how I want it, but the top menu links don't work anymore: http://jsbin.com/poginowibe/1/edit?output
Any ideas on how this can get sorted out? Any help would be appreciated.
/* This is the original code when the white bottom borders appeared weird */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
border-right: 1px solid #990800;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
/* This is the code after the wonky appearance is fixed but the tags were disabled */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li::after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border-right: 1px solid #990800;
}
With some tweaks to Joerg's code, I was finally able to make it work!
#topmenudiv ul {
margin-top: 0px;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 38px;
line-height: 40px;
float: left;
position: relative;
z-index: 3;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li a {
height: 100% !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Thanks a bunch! :)
Remove the #topmenudiv li::after from your css and change #topmenudiv li in this way:
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #990800;
}
Update
Use this code and see the remarks below:
#topmenudiv ul {
height: 40px;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 40px;
float: left;
border-bottom: 3px solid #FFFFFF;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid blue;
outline: 0;
}
#topmenudiv li a {
height: 40px !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Remove all your topmenudiv stuff in CSS, also this one above the comments.
I made the border-bottom line for hovering blue, so you can see that it works.
You are using an image on the right site of the topbar, #sphere. This should be an background-image in CSS, so you have not to handle with z-index and then the rest of the links will work.
What I have done is, give the a tags some height and line-height and bind the red border-left to it. I also removed some paddings and margins.
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;
}
I just installed drop down menus on my website: http://www.squeakybooks.com/ On Mozilla they work like a dream. I haven't had a chance to check safari or Chrome yet, but in IE the drop down menus actually drop to the right. This is a HUGE pain because when you try to click on something in the drop down menu, it'll make the NEXT drop down menu activate even farther to the right.
However, it does work on this website: http://squeakytestblog.blogspot.com/ Even though I uploaded the exact same .xml file to both.
Here's the CSS I'm using:
#jsddm {
width:960px;
margin: 0;
padding: 0px;
z-index:1000000000;
position:relative;
left:5%
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:0px 0px;
border: 0px solid #AAAAAA;
background: #;
background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
background: -moz-linear-gradient(top, #, #);
padding: 2px 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 0px 0;
color: #363d1b;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
text-style: center;
}
#jsddm li a:hover {
background: #;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border: 1px solid black;
text-style: center;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #96CDCD;
}
#jsddm li ul li a:hover {
background: #D3DC6E;
}
I followed this tutorial: allblogtools.com/tricks-and-hacks/add-beautiful-drop-down-menu-for-blogger/
Please help!
Your submenu does not have any point of reference from where to load from, to fix it you can define your list menu item as relative and position your submenu absolutely to the left of the menu item being hovered. Try this:
CSS
#jsddm li {
float: left;
font: 12px Tahoma,Arial;
list-style: none outside none;
position: relative;
}
#jsddm li ul {
border: 1px solid black;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
}
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)