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.
Related
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.
I am using jmenu.js and setting child menu elements to have transparency. Problem is that the child elements with transparency show the parent's (i.e. main menu bar) background. What I want is have transparency on the child menus which show through to the page background. The CSS is:
.jMenu {
display: table;
margin: 0 0 0 50px;
padding: 0;
}
/* First level */
.jMenu li {
display: table-cell;
background: url('../images/tile_gray.png');
margin: 0;
}
.jMenu li a {
padding: 10px;
padding-right:55px;
display: block;
background-color: transparent;
color: white;
text-transform: uppercase;
margin-top:2px;
cursor: pointer;
font-size: 14px;
font-family: Myriad Pro, Lucida Sans, Segoe UI, Calibri, sans serif;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
/* Lower levels */
.jMenu li ul {
display: none;
position: absolute;
z-index:9999;
padding: 0;
margin: 0;
}
.jMenu li ul li {
background-color: #fff;
display: block;
padding: 0;
}
.jMenu li ul li.arrow {
background: url('../images/tile_pink.png');
padding: 0;
border-bottom: none;
padding-bottom: 5px;
margin-top: 10px;
}
.jMenu li ul li a {
font-size: 13px;
text-shadow: 0px 0px 0px rgba(0,0,0,0);
text-transform: none;
padding: 7px;
display: block;
border-top: 1px solid transparent;
text-decoration: none;
}
.tran {
background: rgba(120, 120, 120, .2);
}
.jMenu li ul li a.isParent {
background: url('../images/tile_darker.png');
}
.jMenu li ul li a:hover {
background: url('../images/tile_green.png');
}
UPDATED
I changed the css to have the background transparent not on the anchor but on the li:
.jMenu li ul li {
background-color: #fff;
display: block;
background: rgba(0, 0, 0, .4);
padding: 0;
}
It looks like you have a background image on all .jMenu li. Even though you think you are just applying this background ('.../images/tile_gray.png') to only the first level, it is leaking down into the inner <li>'s
Try adding background-image: none; to your child li:
.jMenu li ul li {
background-color: #fff;
background-image: none;
display: block;
padding: 0;
}
This might work but it is hard to tell what exactly is going on without seeing it in action and without your HTML.
i'm trying to center the navigation tabs on top of a div. basically, I want the navigation centered on top of the div with a 2px stage in between each tab. The nav tabs now don't seem to sit centered on the .row.
any help would be GREATLY APPRECIATED!
.row {
margin: 0 auto;
width: 960px;
}
#top-menu{
font-family: "LeagueGothicRegular",sans-serif;
text-align: center;
margin-top:240px;
}
#top-menu li{
display: block;
float: left;
line-height: 1;
margin: 0 17px;
text-align: center;
}
#top-menu a{
font-family: 'LeagueGothicRegular', sans-serif;
background-color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #000000;
display: inline-block;
font-size: 1.97em;
line-height: 1;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
padding: 6px 18px;
text-decoration: none
}
#top-menu a:hover,
#top-menu .active a{
color: #fff;
background: #E80B44;
}
#top-menu a:hover .nav-arrow{
border-top-color: {{settings.nav_hover_colour}};
}
#top-menu ul .first ul{
left: 0;
}
#top-menu ul ul li{
color: #000000;
display: inline-block;
font-family: 'LeagueGothicRegular', sans-serif;
text-shadow: 1px 1px 1px transparent;
}
#top-menu ul ul {
font-family: 'LeagueGothicRegular', sans-serif;
display: inline-block;
border: none;
text-shadow: 1px 1px 1px transparent;
}
#top-menu > ul > li {
font-family: 'LeagueGothicRegular', sans-serif;
}
Change display: block; of #top-menu li to display: inline-block; and remove float: left;
Add text-align:center; to #top-menu ul
When this is done, your navigation will be centered when you decrease the margins.
I've created a drop down menu using css where the drop down appears as a horizontal row instead of a vertical list. My only problem is that the drop down menu does not line up with the rest of menu. I want it to be flush with the left side of the navigation bar.
The page is up at this address: http://concept82.com/CBHweb/index2.html
The code for my drop down menu is:
#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
#nav {
margin: 1px;
padding: 0px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-align: center;
margin-top: 5px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
width: 140px;
}
#nav li a:hover {
color: #201E30;
}
#nav li ul {
display: none;
}
#nav li ul a{
width: auto;
font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-right: 1px solid #594361;
padding: 0px 15px 0px 15px;
margin-top: 3px;
margin-bottom: 3px;
white-space: nowrap;
}
#nav li.first, #nav li.hover li.first {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-left: 1px solid #594361;
padding: 2px 15px 2px 5px;
margin-top: 3px;
white-space: nowrap;
}
#nav li:hover li a, #nav li.hover li a {
color: #201E30;
background-color: #FFFFFF;
}
#nav li li a:hover {
color: #201E30;
}
Thanks ahead of time!
You should change position of #navholder as relative.
#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
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;
}