im trying to create a Horizontal menu:
CSS
#menu {
display:inline;
float:right;
}
#menu > li {
display:inline;
list-style:none;
width:40px;
border-top:4px solid #FFFFFF;
padding-top:20px;
margin-top:25px;
}
HTML :
<div id="menu">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</div><!-- menu -->
i have added display:inline; but they are not displaying correctly with the top-border when i remove the display:inline; it works fine but they all display in a vertical list
You are missing UL tag. Now I have update your code. check below code
CSS
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline;
list-style:none;
width:40px;
border-top:4px solid #000;
padding-top:20px;
margin-top:25px;
}
HTML
<div id="menu">
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!-- menu -->
JSFiddle Demo
You're missing a UL element, which basically says that the following list items are part of an un-ordered list. Here it is in a fiddle:
http://jsfiddle.net/VgRYv/
<div id="menu">
<ul id="navlist">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div>
ul#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
use disply:inline-block; for the li and just float for the ul
http://jsfiddle.net/c94hG/1/
(I have changed the color of the border for display purposes. it was white)
use display: inline-block; instead of inline (or, as alternative, apply a float: left to every <li>)
add float:left to li,or add display:inline-block to li
try this
#menu {
display:inline;
float:right;
}
#menu > li {
list-style:none;
width:40px;
border-top:4px solid #FFFFFF;
padding-top:20px;
margin: 25px 8px 0 8px;
float:left;
}
Related
can some one explain why the box around my links are acting up
code is
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 20px;
}
#navigationbar ul li a {
padding: 10px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul>
</div>
the box around the links is 19px in height.. the padding makes it 39px, or 41 if i change padding to 11px.. so how do i get it to be 40px like my main navigation container?
or maybe a more efficient way to do all this?
Like this
you use li but forget close li and you do end tag.
please use <li></li> can't use <li></div>
DEMO
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 20px;
}
#navigationbar ul li a {
padding: 10px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
DEMO1
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
background-color:red;
height:40px;
}
#navigationbar ul li a {
padding:11px;
vertical-align:middle;
}
Try this css the height of anchor is 40px now ,
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 19px;
}
#navigationbar ul li a {
padding: 10px 0px 11px 0px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul>
</div>
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 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 trying to build my own multi dropdown menu, and i encounter this problem and have to ideal how to solve it. The best i get is using margin-left:-100px but it will run out of alignment when dropdown more then level 2.
this is what i try to develop
and this is my BEST solution so far... but NOT what i want
this are my html code
<div id="menuBox">
<li class="mainMenu">home</li>
<li class="mainMenu">about</li>
<li class="mainMenu">product
<ul class="w200">
<li>money maker</li>
<li>personal coarch
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
<li class="mainMenu">consult</li>
<li class="mainMenu">contact</li>
</div>
this is my CSS setting
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li{
background:#CCCCCC;
cursor:pointer;
}
ul{
float:left;
position:absolute;
z-index:999;
list-style:none;
}
ul>li{
padding:5px 20px;
}
So which/how should i modify my code?
First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements.
Try with this CSS
#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
padding:0;
margin:0;
}
#menuBox{
white-space:nowrap;
list-style:none;
font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
}
#menuBox li{ /*all li elements*/
position:relative;
background:#CCCCCC;
cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
background:black;
color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
color:black; /*hide all submenus*/
padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
z-index:999;
list-style:none;
position:absolute;
top:80%;
left:50%;
border:1px solid black;
display:none;
}
Demo at http://jsfiddle.net/gaby/g6yX2/
it because in your li.mainMenu padding left is set to 35, remove it.
if you want to keep that padding:
HTML:
<li class="mainMenu"><label>product</label>
<ul class="w200">
<li><label>money maker</label></li>
<li><label>personal coarch</label>
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
CSS:
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 0px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li.mainMenu label {
padding: 0px 35px;
}
Example: http://jsfiddle.net/RaPK9/
i was able to make the dropdown menu already but when i tried to view it on other pc the secondlevel ul was misplaced and not below on it's li. So i tried to recode but i got lost. Please help.
Here is my html markup:
<div id="main-nav" class="menufont">
<ul id="nav">
<li>ONE</li>
<li class="sec">TWO
<ul id="twosecond" class="leveltwo">
<li>TWO A</li>
<li>TWO B</li>
</ul>
</li>
<li class="sec1">THREE
<ul id="threesecond" class="leveltwo">
<li>THREE A</li>
<li>THREE B</li>
<li>THREE C</li>
<li>THREE D</li>
</ul>
</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</div>
And here is my messed up css:
ul.leveltwo {
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
}
ul.leveltwo li {
color: #fff;
}
#twosecond li, #threesecond li {
font: 16px Arial;
display:block;
padding: 3px;
border-bottom: 1px dashed #fff;
}
#twosecond, #threesecond {
display: none;
position: absolute;
}
#nav li.sec:hover ul, #nav li.sec1:hover ul {
display: block;
}
The ul with class .leveltwo shows when i hover on it's main li but the ul of "TWO" is not aligned with it. Thanks alot in advance.
Just add display:none to your .leveltwo class and take out the #twosecond #threesecond tags. The `position:absolute is making the sub menus look like they're showing up under THREE.
Example: http://jsfiddle.net/r4gAQ/3/
Though I will say, I'd look into a jQuery solution, maybe a premade one like MLDDM. They have nice solutions that allow for vertical and horizontal menus. Also, hovering using pure CSS breaks in IE6... not that anyone should use that anymore.
Rechecked my post. This might be the CSS that would help you out. Try it out!
#nav li{
width:200px;
position:relative;
border: 1px solid black;
}
#nav li ul.leveltwo li{
border:none;
}
#nav li ul{
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
color:white;
position:absolute;
left:200px;
top:0;
display:none;
}
#nav .sec:hover ul, #nav .sec1:hover ul{
display:block;
}