My problem is here
Hi, can somebody tells me, where is the problem?
My background-image just moving after hover the li with class .cerny
Here is my code.
aside nav ul {
list-style-type:none;
margin:0;
padding:0;
margin-top:25px;
}
li.cerny {
height:50px;
background: url("images/cerny.png") no-repeat top left;
margin-left:-24.2px;
margin-bottom:5px;
}
.cerny:hover {
color:black;
background: url("images/menu_hover.png") no-repeat top left;
}
.cerny a{
text-decoration:none;
color:wheat;
display:block;
padding-top:18px;
padding-left:40px;
font-size:15px;
<aside>
<nav>
<ul>
<li class="cerny">Můj statek</li>
<li class="cerny">Tržiště</li>
<li class="cerny">Město</li>
<li class="cerny">Soutěžní centrum</li>
<li class="cerny">Okolí</li>
</ul>
</nav>
</aside>
May be your images (cerny.png and menu_hover.png) size are not same. check that in Photoshop.
Related
I've some troubles with the navigation bar from my website. The position of the navigation bar changes when the dropdown menu becomes visible.
Also when resizing the browser the navigation bar change.
This is ofcource not really my intention. So please can someone help me?
I would appreciated very much.
This is my css code I'm using.
/*main menu*/
.nav-top {list-style:none;
}
ul.nav-top ul { margin-top:-40px; margin-bottom:-50px; margin-left:-21px; margin-right:-50;
position: relative; display:none; }
ul.nav-top li { display:inline-block;
padding:40px;
margin-right:19px;
position:relative;
}
ul.nav-top li:hover> ul { display:block; }
ul.nav-top li a { display:block;
text-decoration:none;
border-bottom: 2px solid transparent;
}
ul.nav-top a:hover{ color:#686A6A;
border-bottom:2px solid #E4E4E4;
}
/*sub menu*/
ul.nav-top ul ul { clear:both;
border: solid 1px ffffff; }
ul.nav-top li li {
display:block;
/* Introducing a padding between the li and the a give the illusion spaced items */
padding:2px; padding-top:10px;
}
ul.nav-top ul ul li {
}
ul.nav-top ul ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
ul.nav-top ul ul li:hover a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none; background:#FFF;
}
ul.nav-top ul ul li:hover a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
color:#686A6A; border-bottom:2px solid #E4E4E4;
}
thanks for your answer.
This is my HTML:
</head>
<body>
<div id="header">
<img src="images/logo-marco-kaller.png">
<ul class="nav-top">
<li>home</li>
<li>about</li>
<li>work
<ul>
<li>design</li>
<li>paintings</li>
<li>sculptures</li>
</ul>
<li>shop</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
<div id="background"></div>
<div class="wrapper">
<div id="content-background"><br>
<h1>Marco Kaller</h1>
<p>Welkom op de site van Marco Kaller!</p>
<div id="content">
</div>
</div>
</div>
<div id="footer">
<img width="25" height="25" alt="facebook Marco Keller" src="images/facebook.png" />
<ul class="talen">
<li>language:</li>
<li>en</li>
<li>nl</li>
<li>de</li>
</ul>
<hr class="faded" />
</div>
I am trying to create a menu as follows. When hover the menu item, it should be animate the height from bottom to top. So I positioned anchor tag absolute and gave bottom 0. When anchor tag is positioned absolute, It does not show menu properly.
css is as follows.
#navigation
{
position:relative;
float:right;
margin-top:55px;
padding-right:45px;
}
#navigation ul
{
text-decoration:none;
list-style:none;
display:inline;
position:relative;
padding:0px;
height:30px;
margin:0px;
}
#navigation ul li
{
position:relative;
float:left;
}
#navigation ul li a
{
position:absolute;
bottom:0px;
padding:10px 5px;
width:79px;
display:block;
text-decoration:none;
background-color:#1c1c1c;
color:rgb(255,255,255);
/*margin:2px;
margin-bottom:0px;*/
text-align:center;
font-family:Tahoma;
/*position:relative;*/
font-size:15px;
}
html is as follows.
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/90up4hz2/
demo - http://jsfiddle.net/victor_007/90up4hz2/1/
the issue is because of position:absolute for the li and position:relative the width becomes 0 try adding fixed with for li
#navigation ul li {
position:relative;
float:left;
height:30px;
width:89px;
}
http://jsfiddle.net/L0r493ag/2/
I created this for you, dont use ul li or just add the follow css to them or to any object
.boxhead
{
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
padding-left:10px;
padding-right:10px;
height:50px;
}
.boxhead:hover
{
color: #7d7d7d;
}
and then
<div id="navigation">
<a class="boxhead" href="index.php">Home</a>
<a class="boxhead" href="about-us.php">About Us</a>
<a class="boxhead" href="products.php">Products</a>
<a class="boxhead" href="contact-us.php">Contact Us</a>
</div>
I want to display (blue) sub menu in one line but somehow it is coming in multiple lines. It works fine if I add fixed width but it should be flexible as this menu will by dynamic and could be change as per user's request.
Please check Fiddle
http://jsfiddle.net/awaises/meXB9/
HTML :
<div class="left-bar">
<ul class="menu">
<li>
For Sale
<ul class="sub-menu">
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
<li>Agriculture</li>
<li>Land</li>
</ul>
</li>
<li>Rent To Own</li>
<li>Key Money</li>
<li>For Sale at Auction</li>
</ul>
</div>
CSS :
body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
color:#adadad;
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #171717;
display:block;
}
ul.sub-menu{
position:absolute;
background:#1ea3d7;
top:2px; left:150px;
}
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}
Updated Fiddle
make top:0px; in ul.sub-menu
Update:
use display:inline-flex;
Use following.
.sub-menu {
display: table;
}
.sub-menu li {
/* float: left; */
display: table-cell;
}
I have the following menu which works perfectly on desktop. When hover on item, secondary menu appears.
On tablet/mobile device this is a click/touch
I want the menu hover effect (touch on tablet) to disappear when clicked away from on a tablet/mobile device.
E.g. ipad, when click on My Lists, secondary menu shows, but need it to disappear when clicked away from menu
Is this possible?
CSS:
* {outline:none; border:none; margin:0; padding:0; font:14px arial,sans-serif;}
body {background: url(images/bg.gif) repeat;}
#top {background: url(images/top_tile.png) repeat-x; height:140px; width:100%;}
.wrap {width:980px; margin:0 auto;}
#top1 {height:60px;}
.logo {padding-top:10px;}
#menu {height:48px;}
/*NAV*/
#nav{
list-style:none;
font-weight:bold;
/* Clear floats */
float:left;
width:100%;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:20px 25px 7px 15px;
color:#333;
height:25px;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#ff9900;
text-decoration:none;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff;
list-style:none;
position:absolute;
left:-9999px;
min-width:200px;
border-radius:0px 0px 3px 3px;
border:1px solid #ccc;
}
#nav ul li{
padding-top:1px;
float:none;
background:#fff;
}
#nav ul a{
white-space:nowrap;
font-size:13px;
color:#666;
padding: 10px 0px 5px 15px;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#ff9900;
text-decoration:none;
}
#nav li:hover ul a{
text-decoration:none;
background:#fff;
}
#nav li:hover ul li a:hover{
background:#ff9900;
color:#fff;
}
HTML:
<body>
<div id="top">
<div id="top1" class="wrap"><img src="images/logo.gif" class="logo" /></div>
<div id="menu" class="wrap">
<ul id="nav">
<li>My Lists
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>View all Lists</li>
</ul>
</li>
<li>Following
<ul>
<li>Follow 1</li>
<li>Follow 2</li>
<li>Follow 3</li>
<li>View all Follows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Fiddle
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
---As mentioned here. jQuery hide element when clicked anywhere on the page
I would like to center my floated menu(ul tag)in my page and can't figure out what's wrong with my css. Please help. Thanks.
My html
<section>
<div id='index'><img src='images/index_pic.png' title='index Picture'/></div>
<nav>
<ul> ////I want to center this menu, but the 3 buttons all float to left.
<li id=browser ><a href=#></a></li>
<li id=user_management><a href=#></a></li>
<li id=log_out><a href=#> </a></li>
</ul>
</nav>
</section>
and my css
section {
color: blue;
margin: 0 auto;
color:blue;
width:980px;
height:700px;
}
ul{
list-style:none;
}
#browser a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/browser_BT.jpg');
}
#user_management a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url("../images/user_management_BT.jpg");
}
#log_out a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/log_out_BT.jpg');
}
section #index img{
padding:3px;
border:1px solid #a6a6a6;
}
Try this:
ul {
list-style: none;
width: 810px;
margin: 0 auto;
}