I am pretty new on css and I want to learn use css effectively but I have now couple of problems/questions, I want to make grey border under my menu but when I zoom in and out border behave so strangely? Sorry my code is not very clean. And how can I retouch my code for better standing?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul>
<li>sub</li>
<li>sub2</li>
</ul>
</li><!---End of DropDown Videos menu--->
<li>link4</li>
<li>link5</li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
Without completely reworking your code, just think of added a bottom border per 'li'...
Remove your id='grey' and add your border-bottom to your #header li {}. Refresh but note how your 'sub' menus then each have a bottom border now. They inherited it, so you then need to turn those off...hence add border-bottom: none to the #header ul ul li declaration.
Now...if we did a quick rework of your code...
HTML
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>sub</li>
<li>sub2</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</div>
CSS
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
Using more naming conventions with your sub menus is safer than just drilling down through the css. You also need to note that any top-level CSS declaration is inherited by all the children within. Such that if you declare #nav li as being black but want all the 'sub' list elements to be blue, that needs to be stated explicitly...AFTER the initial declaration in the CSS document.
Hope this helped...
Related
I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
Having a menu with li and ul tags
<div class="menu">
<ul class="hide-for-small">
<li>one
</li>
<li>two
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</li>
<li>three
</li>
<li>four
</li>
</ul>
</div>
I want to divide this menu in four equal parts, to do that I added
.menu {
height:555px;
margin-top:40px;
width:980px;
position:absolute;
z-index:9999;
top:0
}
.menu ul {
display:inline;
list-style:none;
width:100%;
position:relative;
margin-top:40px
}
.menu li {
float:left
}
.menu li a {
font-family:Bariol, Arial;
font-size:20px;
text-transform:uppercase;
color:#000
}
.menu li a:hover {
opacity:.8
}
.menu li:nth-last-of-type(-n+3) {
float:right;
margin-left:38px
}
.menu li:nth-child(-n+3) {
margin-right:38px
}
.menu ul li:hover ul {
visibility:visible;
opacity:1;
transition-delay:0
}
.menu ul li ul {
visibility:hidden;
opacity:0;
transition:visibility 0 linear .5s, opacity .5s linear;
list-style:none;
float:left;
clear:both;
position:absolute;
margin:0;
width:auto;
z-index:999999
}
.menu ul li:hover ul {
visibility:visible;
opacity:1;
transition-delay:0
}
.menu ul li ul li {
float:left;
float:none !important;
position:relative;
display:block;
height:25px;
margin:0 !important
}
.menu ul li ul li a {
font-size:15px;
display:block;
margin:10px 0;
background-color: #fff
}
and chaged width from 100% to 25%
.menu ul {
display:inline;
list-style:none;
width:100%;
position:relative;
margin-top:40px
}
But I am getting undesired result.
How to change the css to split in 4 the menu?
Please take a look at jsfiddle
Table layout with table-layout: fixed; can split the 4 li equally.
display:table; table-layout: fixed; - for ul
display:table-cell; for li, and remove float for li.
JsFiddle
Remove float:right; from following class.
.menu li:nth-last-of-type(-n+3) {
margin-left:38px
}
jsFiddle
when I set the "width" attribute of the .topMenu li, the .subMenu width is too narrow, even though I set it's position to absolute. It also is horizontal instead of vertical. Why?
the html
<div id="navigation">
<ul id="navBlock">
<li>HOME</li>
<li class="topMenu">
ABOUT US
<ul class="subMenu">
<li>WELCOME</li>
<li>HISTORY</li>
</ul>
</li>
</ul>
</div>
the css
#navBlock{
margin: 0;
padding: 0;
list-style-type: none;
}
#navBlock li{
display: inline-block;
border:1pt solid #ccc;
width:20%;
text-align:center;
background:#fff;
position:relative;
}
#navBlock li:hover{
cursor:pointer;
background:orange;
}
.topMenu:hover .subMenu{
display:block;
position:absolute;
}
.subMenu{
display:none;
margin: 0;
padding: 0;
}
.subMenu li{
border:1pt solid #aaa;
background:#fff;
width:200px;
display: inline;
position:absolute;
}
.subMenu li:hover{
float:none;
}
http://jsfiddle.net/L28Lf3se/
The problem is one of specificity. Your CSS for .subMenu li is being overridden by the #navMenu li because it thinks it's more specific. That whole block isn't being used. Re-label the .subMenu li to #navBlock li ul li and you'll be good to go.
Change the width in px than %
#navBlock li{
display: inline-block;
border:1pt solid #ccc;
width:150px;
text-align:center;
background:#fff;
position:relative;
}
Everything will work smooth
#navBlock li(0-1-0-1) more specific than .subMenu li(0-0-1-1) that's why the width you set for .subMenu li are get overrided.
You shouldn't touch your #navBlock li width.
Change #navBlock li to #navBlock>li and magic will happen.
This is best you can do to solve your problem.
I made a drop down menu, which works fine for top level items.
But I dunno what CSS to add for second level menu items, to be move them to the right side of the hovered item.
Here is my HTML content:
<ul class="menu">
<li><a href="#" >item1</a></li>
<li>item2</li>
<li>item3
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3
<ul>
<li>subsubitem1</li>
<li>subsubitem2</li>
</ul>
</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>
and my actual CSS:
.menu {
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul {
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#333333 url("seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2 url("hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {
background:url('sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#2580a2 url('hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
jsfiddle
I'm trying to do a submenu of a submenu of a list menu and told that this may work but i dont know how to add it to css. and weather or not the styles would apply to it if its put into css.
[SOLVED]
Okay, so i managed to solve this ( and now I just have to style widths and hovers ). What I Did was chuck in the css from the answer below, added in this css aswell
.tabs .widget ul, .tabs .widget ul {
margin: 0;
padding: 0;
overflow: visible;
list-style: none;
}
For some reason it was set to { overflow:hidden ; } (wtf!) so i changed that and it seemed to overflow correctly now.
In the menu html, I changed
<ul>
<li><a href="#" >item1</a></li>
....
</ul>
to
<ul class="menu_top">
<li><a href="#" >item1</a></li>
....
</ul>
on line one of the given html.
Now all that I need to do is style {width:225px; } and change the :hover element, thanks for everyones help!
You can use the following CSS:
ul.menu_top {
float:left;
width:70%;
margin: 8px 100px 0 0;
border-radius:4px;
background-color: #c4092a;
list-style-type: none;
z-index:+1;
}
ul.menu_top li {
float: left;
position: relative;
margin: 4px 2em 4px 4px;
padding: 0;
}
ul.menu_top li ul {
visibility: hidden;
position: absolute;
top:100%;
left:0px;
padding:0.5em;
list-style-type: none;
white-space:nowrap;
background-color: #c4092a;
border: 1px solid white;
border-radius:4px;
z-index:+1;
}
ul.menu_top li:hover > ul {
visibility: visible;
z-index: +2;
}
ul.menu_top li ul li {
padding: 0;
margin: 12px 4px;
float:none;
border:0;
min-width:3em;
}
ul.menu_top li ul li ul {
top:0;
left:99%;
}
ul.menu_top a {
background-color:#c4092a;
color:white;
text-decoration:none;
padding:4px;
font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
background-color:white;
color:blue;
text-decoration:none;
}
ul.menu_top li a.haschildren:after {
content:"\00A0\00A0\25BC";
}
a {
color:#0000aa;
background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
margin:0;
padding:0;
}
It's taken from my old question. The .menu_top class is used only for distinguishing between the navigation menu and another unordered lists.
JSFiddle code & result page
hello
what i am trying to is to create a sub menu from a sub menu. for example if a user hovers over Actions this then drops to show say billing - mail etc. i would like to create another sub if a user hovers over billing. i have attached the code i am using which is stu nicholls pro dropdown. thanks
menu css
.nav {
height:35px;
background: url(images/pro_line_0.gif) repeat-x;
margin-top:100px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:500;
}
.nav .table {
display:table;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
padding:0 5px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a {
display:block;
height:35px;
float:left;
background: url(images/pro_line_2.gif);
padding:0 0 0 10px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a b {
display:block;
padding:0 30px 0 15px;
background:url(images/pro_line_2.gif) right top;
}
.nav .select a:hover,
.nav .select li:hover a {
padding:0 0 0 15px;
cursor:pointer;
color:#088;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 5px 0 15px;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#f00;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(images/back_0.gif);*/
padding:0;
z-index:100;
left:0px;
text-align:left;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 5px 0 30px;
margin:0;
white-space:nowrap;
border:0;
color:#444;
}
.nav .current .sub li.sub_show a {
color:#088;
cursor:default;
/*background:url(images/back_1.gif);*/
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
font-weight:bold;
/*background:url(images/back_1.gif);*/
}
sample html
<ul class="select"><li><a href="#nogo"><b>Control Panel</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li>Tickets</li>
<li>Messages</li>
<li>Actions</li>
<li>History</li>
<li>Settings</li>
<li>Destruction</li>
<li>Contacts</li>
<li>Users</li>
<li>Companies</li>
</ul>
</div>
Try using nested <ul>s in your HTML. That is, build your menu like so:
<ul class="menu">
<li>
<a>My Link</a>
<ul class="submenu">
<li><a>My Nested Link</a></li>
</li>
</ul>
Then use a simple Javascript solution like Superfish (or one of your chosing)
http://users.tpg.com.au/j_birch/plugins/superfish/