how do i make a sub menu dissapear and appear when i hover over a link?
this is my menu:
<div class="sideMenu2">
<ul>
<li><a href>retail</a>
<ul class="subsideMenu2">
<li>cabot circus</li>
<li>st. stephen's</li>
<li>silverburn</li>
<li>braehead</li>
</ul>
</li>
<li><a href>sports & leisure</a>
<ul class="subsideMenu2">
</ul>
</li>
</ul>
</div>
This is my current css:
.sideMenu2 ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu2 ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu2 ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu2 li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu2 li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.subsideMenu2 {
display: none;
}
.sideMenu2 li:hover .subsideMenu2 {
display: block;
}
But won't work in old Internet Explorer, for them the only option is javascript.
see this example script of header menu dropdwon style
http://bit.ly/1abEJ9o
Related
I've created a CSS top bar menu that uses the | character as separators. It's rendering exactly as it should on any browser I try for Linux or Windows. But, on Mac, with any browser, the | characters drop down a line or so, and render below the menu bar.
CSS
#menu {
position:relative;
width:80%;
min-width:800px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
text-align:center;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
padding: 12px 12px;
height:1.6em;
font-family: 'Geometria-Medium';
}
#menu ul {
display:inline-block;
margin: 0;
margin-left:auto;
margin-right:auto;
text-align:left;
padding: 0px;
line-height: 1.2em;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
position:absolute;
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 5%;
text-decoration: none;
text-transform: uppercase;
color:#666666;
line-height:2em;
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
}
#menu .active {
}
#sub {
background-color:#CC0000;
line-height:2em;
}
#sub a:hover {
background-color:#ff9999;
}
HTML
<div id="menu">
<ul class="nav">
<li class="navLi" style="vertical-align: top !important;">Home <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">About <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Services <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Portfolio <span style="vertical-align: top !important;"> |</span>
<ul id="sub">
<li>The Sparkle Project</li>
<li>Jam In Jubilee</li>
<li>Connect Now Network</li>
<li>Ovidiu Bistriceanu</li>
<li>The Devon Clifford Music Foundation</li>
</ul>
</li>
<li class="navLi">Testimonials <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Blog <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Contact</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks
If it was me..
I'd put all my css in a css file, not inline. Then I'd use css for visual appearances, like below..
#menu>ul>li{
border-right: 1px solid #000;
padding-right:20px;
padding-left: 10px;
}
#menu>ul>li:last-child {
border-right:none;
padding: none;
}
...
<div id="menu">
<ul class="nav">
<li class="navLi">Home</li>
<li class="navLi">About</li>
<li class="navLi">Services</li>
<li class="navLi">Portfolio
Demo
I've tryed to implement a simple dropdownmenu without using links ( ).
It's list based. My list elements-width are with procentual values that all together comes to 100%. My last element breaks out in a new line thats what I dont understand. Maybe it has something to do with my margin..
Thanks in advance.
Here is a link to my code:
Fiddle
HTML
<div class="dropDown-menu-container">
<ul class="dropDownMenu">
<li style="width: 20%;">
Initiating
<ul>
<li>punkt</li>
<li>punkt</li>
</ul>
</li>
<li style="width: 20%;">
Planning
<ul></ul>
</li>
<li style="width: 40%;">
Monitoring and Controlling
<ul></ul>
</li>
<li style="width: 20%;">
Closing
<ul></ul>
</li>
</ul>
CSS
.dropDown-menu-container {
position:relative;
width:100%;
float:none;
clear:both;
display:inline;
text-align:center;
}
ul {
position:relative;
float:left;
width:100%;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
text-align:center;
height:50px;
margin:4px;
box-shadow:0px 0px 2px 2px grey;
background-color:grey;
position: relative;
float: left;
}
ul li:hover {
background-color:lightgrey;
}
li ul {
display: none;
}
li {
position: absolute;
height:50px;
margin-bottom:5px;
top:0px;
}
li:hover ul {
display: block;
top:32px;
}
li:hover li {
float: none;
font-size: 11px;
}
Kind regards!
You're not including your margins in your calculations
Set your width to calc(20% - 8px)
Fiddle: http://jsfiddle.net/bjPrK/16/
The total of your element area is the sum of margin, padding and border.
See http://www.w3.org/TR/CSS2/box.html
You must include the four pixels of each margin in your calculation.
I am creating a center, nested navigation menu, and am trying to use pure CSS. See a working demo HERE: http://jsfiddle.net/jenstechs/MKtTN/2/
HTML:
<nav>
<ul id="primary">
<li>Link One</li>
<li>Link Two</li>
<li>Link Threee
<ul class="secondary">
<li>Services One</li>
<li>Services Two</li>
</ul>
</li>
<li>Link Four</li>
<li>Link Fiiiiive</li>
</ul>
</nav>
CSS:
nav {
margin:15px auto 10px auto;
width:100%;
}
nav ul#primary {
width: 100%;
padding: 10px 0;
margin: 0;
background-color: #FFF;
text-align: center;
}
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
}
nav ul#primary>li>a {
padding: 0px 30px;
margin-right:-6px;
color: #000;
text-decoration: none;
border-right:2px solid #999;
}
nav ul#primary>li>a:hover,
nav ul#primary>li.active>a {
background-color: #900;
color:#FFF;
padding-top:10px;
padding-bottom:25px;
}
nav ul#primary>li:first-child a {
border-left:2px solid #999;
}
ul.secondary {
padding-top:0;
position:absolute;
display:none;
}
ul.secondary li {
}
nav ul#primary li:hover ul.secondary {
display:block;
}
nav ul#primary li:hover ul.secondary li {
}
ul.secondary li a {
display:block;
width:7em;
color:#FFF;
background-color:#900;
font-size:0.8em;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px solid #FFF;
}
ul.secondary li:last-child a {
border-bottom:0;
}
ul.secondary li a:hover {
color:#DDD;
}
I also have a minimal reset, the only styles it has on lists is a few default margins.
Since this is a centered navigation bar, the CSS I'm using is inline, not floated. So I have no idea what to put in the CSS to position the sub-menu actually underneath its parent element. Most examples I've seen have position:absolute but that seems to keep it at the left. I've tried various methods of hiding and showing (display:, left:) but can't seem to find that magic combination.
Here I only have the one sub-list, actually, but what if I had sublists for all of them?
Thanks for any tips or links to examples...
To make position: absolute elements position relative to their parent, make the parent position: relative.
In your case:
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
position: relative;
}
Demo: http://jsfiddle.net/MKtTN/3/
I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot:
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;
}