I've created a drop down hover list in the UL tags using CSS, but before I can get the mouse down over the links, they disappear. How can I stop this?
This is my code:
#header {
margin: 0px;
padding: 0px;
width: 100%;
background-color: red;
height: 30px;
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
text-align: center;
}
#header ul {
margin: 0px;
padding: 0px;
}
#header ul li {
display: inline;
text-align: center;
position: relative;
}
#header ul li a {
text-decoration: none;
font-size: 22px;
color: white;
font-weight: bold;
line-height: 30px;
margin-left: 10px;
}
#header ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#header ul li:hover ul {
visibility: visible;
}
#header ul li a:hover {
text-decoration: underline;
font-size: 22px;
color: black;
}
Try adding height
#header ul li a{
text-decoration:none;
font-size:22px;
color:white;
font-weight:bold;
height:30px;
line-height:30px;
margin-left:10px;
}
Since your main menu is positioned at the very top of the page, it goes from 0 pixels to 30 pixels and you've left a 1 pixel gap before starting the submenu at 31 pixels. Either changing the main menu height to 31px or the top of the submenu to 30px should fix your problem.
Related
IS it possible to align menu item center? Actually my website has a lot many menus, So menus are appearing on second line from left so I want to show them as center aligned.Any suggestions?
Please find below my Css. This is edited style sheet of default twenty ten wordpress theme. I am using full width layout.
Thanks.
#access {
background:#cc0000;
margin: 0 auto;
width: 100%;
padding: 0px 0px;
border-top:2px solid #eb9999;
border-bottom:12px solid #000000;
clear:both;
margin-bottom:5px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin: 0 auto;
width: 1024px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 20px;
padding: 0 10px;
text-decoration: none;
}
#access ul{display:inline-block;}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
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 navigation links on my home page that I want black text on a pink background. I want the text to be black in all link variations, but the default color of blue still appears on a link in its normal state. It is black when the link is visited. I have tried different remedies (adding !important, changing the order of the css, using the hexidecimal code for black instead of the word black) but nothing has solved the problem. This is the code right now. What am I doing wrong?
body{background-color:#CC6699}
#header { border: medium dotted #000000;
padding: 20px 0px 20px 0px;
color: black;
font-family: Broadway;
background-color: aqua;
text-align: center;
height: 250px; }
#logo { padding-left: 30px; float:left;}
#wrapper {width:900px; margin:0 auto; background-color:#ffffff; color:black;}
#bar {
background-color: #000000;
height: 200px;}
#content {
margin: 0px;
padding: 10px 0px 10px 0px;
font-family: Verdana;
font-size: large;
text-align: center;
background-color: #ffffff;}
#nav {
width: 900 px;
margin: 0 0px 0 0px;
overflow: hidden;}
#nav ul li {
display: inline;}
#nav ul {
width:100%;}
#nav li {
border-style: solid;
border-width: thick;
border-color: #00FFFF;
margin: 40px 10px 40px 10px;
font-family: "Arial Rounded MT Bold";
font-size: large;
padding: 10px 30px 10px 30px;
background-color: #CC6699;
text-align: center;}
#nav a:{
color: #000000; margin: 10px;}
#nav a: link { color:black;}
#nav a:visited {color:black}
#nav a:focus { color:black;}
#nav a: hover {color:black;}
#nav a:active {color:black;}
img {
padding: 20px 30px 20px 30px;}
Please change the wrong code:
#nav a:{
color: #000000; margin: 10px;}
#nav a: link { color:black;}
#nav a: hover {color:black;}
To:
#nav a{ /* remove : after a */
color: #000000; margin: 10px;}
#nav a:link { color:black;} /* remove space after a: */
#nav a:hover {color:black;} /* remove space after a: */
I want to code this so the active and hover li's appear over the normal li. But what happens is the hover and active li's appear inside the normal li. When I add padding (to hover and active li's) in an attempt to duplicate the size of the normal li, the normal li remains visible and simply expands by the increase padding of the hover and active li and not covered as I need it to be.
Here is my CSS:
/***********HORIZONTAL NAVS***********/
.menu-horizontal {
margin: 3px 2px 0.75em;
}
.menu-horizontal ul.top-level {
background-color: #FFFFFF;
clear: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-horizontal ul.top-level li {
background: #FEAB27;
border-radius: 7px 7px 0px 0px;
display: inline-block;
height: 28px;
padding: 0 25px;
}
.menu-horizontal ul.top-level {
display: inline-block;
float: left;
height: 23px;
margin-left: 173px;
padding-top: 5px;
text-align: center;
text-transform: none;
}
.menu-horizontal ul.top-level li a {
background: none repeat scroll 0 0 transparent;
color: #000000;
display: inline-block;
line-height: 24px;
text-decoration: none;
font-family: Verdana,'Magra','Gafata',sans-serif;
font-size: 102%;
font-weight: bold;
}
.menu-horizontal ul.top-level li.selected a, .menu-horizontal ul.top-level li a:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
text-decoration: underline;
}
.menu-horizontal li ul.second-level {
display: block;
left: -999em;
margin: -1000px 0 0;
overflow: visible;
padding: 0 0 9px;
position: absolute;
text-align: left;
}
.menu-horizontal li:hover ul.second-level, .menu-horizontal li.hover ul.second-level {
left: auto;
}
Thanks!
I am not sure if I got your question right, but did you want something like this?
.menu-horizontal ul.top-level li.selected, .menu-horizontal ul.top-level li:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
}
.menu-horizontal ul.top-level li a:hover, .menu-horizontal ul.top-level li.selected a {
text-decoration: underline;
}
http://jsfiddle.net/svSwA/
If you want to change another element as an A you have to put the :hover selector on it, or you have to use JavaScript.
UPDATE: Okay I changed the margin on #access ul although now when I hover over it looks like this: http://imgur.com/NeUzN
Also is it possible to change the spacing between the page titles (sorry still learning css!)
I'm currently designing my wordpress theme and wondering how I could move the text up a bit to center up with the nav bar: http://i.imgur.com/BExiy.png
I'm using custom font as well. Here is my css:
#access {
background: #252525;
display: block;
float: left;
margin: 0 auto;
height: 40px;
}
#access ul {
list-style: none;
margin: -8px -13px -10px -13px;
padding-left: 0;
color:#000;
text-shadow:1px 1px 1px rgba(14,14,14,0.8);
text-transform:uppercase;
font: 24px Giantypo, Arial, Helvetica, sans-serif;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2.5em;
padding: 0 1em;
text-decoration: none;
color:#f3f3f3;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #3e5d8c;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #3e5d8c;
}
#access ul ul a:hover {
background: #3e5d8c;
}
#access ul li:hover > ul {
display: block;
}
}
Any help would be great!
Cheers,
Scott
Top margin of unordered list must be negatie value. For example:
margin: -7px 0 0 0;
Set the line-height to be equal to its height. On #access a, I believe, but I cannot know for sure without seeing the HTML. And I cannot know its height without seeing all of it live.