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>
Related
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.
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 recently changed the design of this webpage but now my dropdown menu lists the "hidden" items vertically instead of horizontally even though i use the inline-block display option.
this is the html code from my menu:
<ul id="menu">
<li id="bordered">News</li>
<li id="bordered">About</li>
<li id="bordered">Research </li>
<li id="bordered">Artists
<ul>
<li id="bordered">1234 1234</li>
<li id="bordered">1234 1234</li>
</ul></li>
<li>Municipalities
<ul>
<li id="bordered">1234567</li>
<li id="bordered">1234 </li>
</ul></li>
<li>
<form id="searchbox" action=" " method=" ">
<input type="text" name="search" value="" />
<input type="submit" value="Search" />
</form>
</li>
</ul>
and this is the CSS:
/*header navigation menu*/
/*STYLING*/
#menu{
margin-top:2px;
font-size:0.8em;
list-style:none;
}
#menu li{
padding:1% 1.5% 1% 1.5%;
display:inline-block;
text-align:center;
vertical-align:middle;
}
#menu li a{
text-align:center;
vertical-align:middle;
font-weight:bold;
}
#bordered{
border-right:1px dotted #f9f9f3;
}
/*DROPDOWN*/
#menu li ul{
visibility:hidden;
position:absolute;
margin:1% 0 0 -2px;
border-top: 1px dotted #f9f9f3;
}
#menu li ul li{
float:left;
white-space:nowrap;
}
#menu li:hover ul, #menu li:active ul{
visibility:visible;
}
help would be very much appreciated :)
You should apply a float:left on #menu li instead of a display:inline-block
It fixes your problem, and it will work on IE7, when inline-block won't.
Also be careful with your bordered IDs. You should use classes.
Demo : JSFiddle
Try giving the #menu li ul a larger width:
#menu li ul{
visibility:hidden;
position:absolute;
border-top: 1px dotted #f9f9f3;
width: 10em;
}
and remove margin:1% 0 0 -2px;
I got a problem with my wordpress theme:
I generated a toplevelmenu using "wp_list_pages('title_li=')" on my website and styled it with css:
.menucontainer li {
float:left;
font-family:arial;
font-size:16px;
text-align:center;
font-weight:bold;
list-style:none;
margin:0px;
margin-top:-3px;
padding:12px;
background: #ffffff;
border-top: 3px solid #0a0a46;
border-bottom: 3px solid #0a0a46;
}
.menucontainer li:hover {
border-bottom: 5px solid #6464A0;
height:18px;
}
.menucontainer li a {
color:#2d2d2d;
text-decoration:none;
}
.menucontainer li a:hover {
color: #50508C;
}
Output: A thicker bottom-border of the hovered menuitem.
<div id="menuwrapper">
<div class='menucontainer'>
<li class="page_item page-item-1 current_page_item">
<a href="http://xxx.de/?page_id=6">
menuitem one
</a>
</li>
</div>
</div>
Question: The 'a' is located within the 'li' and the hovering only triggers if I hover the link-text. So how do I do switch the location of the 'a' with the location of the 'li'?:
<div id="menuwrapper">
<div class='menucontainer'>
<a href="http://xxx.de/?page_id=6">
<li class="page_item page-item-1 current_page_item">
menuitem one
</li>
</a>
</div>
</div>
I want to make sure, that the link and the hover work within the complete 'li'-container.
At the moment you have 2 :hover's. Keep your a tag inside your li and remove the a:hover because that is only going to effect when your hover on the a.
change your css to look like this:
[with this change, the a hover effect will take place when you hover over the li
.menucontainer li:hover {
border-bottom: 5px solid #6464A0;
height:18px;
}
.menucontainer li:hover a {
/* what you want to do with the a */
}
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