I am trying to create a slide down vertical menu. My menu pushes down the other li's in the main part of the section like it's supposed to. The only problem is that the submenus move are moved to the right, and I want them lined up with their parent. This jsfiddle shows that problem. The source code is below, but all of it is in the jsfiddle.
Thanks,
Kirie
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DEMO</title>
<style>
div{
width:180px;
}
div ul ul {
display: none;
}
div ul li:hover > ul {
display: block;
}
div ul li {
list-style:none;
background:#F00;
width:180px;
}
div ul ul li {
background:blue;
width:180px;
}
div ul ul li a{
width:180px;
color:white;
}
div ul ul ul li {
background:red;
width:180px;
}
</style>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
</body>
</html>
Add the below to your CSS:
ul ul{
padding:0; /* stop children from being offset left */
}
Demo Fiddle
Is this what you are looking for.
Add a class to the sub menus and style it as folowing
.sub
{
padding: 0px;
}
Related
please forgive me if my question is not presented in the usual manner, this is my first time on this forum.
That being said, I have a question regarding the css float. Everything was going fine, that's the problem.
I was making a drop-down menu and made an #ul li { float:left; }. Now when I added a sub menu which is also a "ul li" the float didn't make a difference for the sub menu list. I was searching for answers but the question is so specific it's really hard to find it. I think that it has something to do with the fact that i gave the list items width and height, but I'm not completely sure. Any help would be appreciated.
So I did get the result i was looking for i was just expecting the li's under the info li to also float left since i entered ( #nav ul li {float left;}. It applied to the first row of li's but not to the sub-menu, why?
The code:
Html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="./awesome/css/all.min.css">
<title>navfinal</title>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>About us</li>
<li>What is our goal
<ul>
<li>Past</li>
<li>Present</li>
<li>Future</li>
</ul>
</li>
<li>Something</li>
</ul>
</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
CSS code:
body {
background:#847E7E;
}
#wrapper {
width:960px;
height:900px;
background:#8A8888;
margin:0 auto;
padding:0;
}
#nav {
background:#363535;
height:50px;
}
#nav ul {
list-style:none;
padding:0;
margin:0;
}
#nav ul li {
background:#363535;
width:170px;
height:50px;
text-align:center;
float:left;
}
#nav ul li a {
font-size:22px;
line-height:50px;
display:block;
text-decoration:none;
color:#D31496;
}
#nav ul li a:hover {
background:#C41BCA;
color:black;
}
#nav ul li a:active {
background:#514E4E;
color:#9314C2;
}
#nav ul li > ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
#nav ul li ul li ul {
position:absolute;
top:0;
left:100%;
}
#nav ul > li {
position:relative;
}
#nav i {
float:right;
font-size:35px;
color:#218BE4;
text-align:center;
line-height:50px;
padding:0 20px;
}
I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.
I'm new with CSS and testing some stuff. I created a dropdown menu but this doesn't work correctly.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href = "üben_css.css" rel = "stylesheet" type="text/css">
<title> xx</title>
</head>
<body>
<div id="nav">
<ul>
<li> Home </li>
<li> xx
<ul>
<li> Hc </li>
<li> Scc </li>
</ul>
<li>Zubehör </li>
<li> Service </li>
<li> Forum </li>
</ul>
</div>
</body>
</html>
CSS code:
body{
margin:0;
padding:0;
}
#nav{
background-color:silver;
position:relative;
}
#nav ul li{
display:inline;
}
#nav ul ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul li{
display:block;
}
The problem is that the nav bar is displayed inline but when I hover over my "xx" element the rest of my nav bar appear under my dropdown list. How can I fix this?
http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png
Remove these lines from your css:
#nav ul li:hover ul{
display:block;
}
Using
#nav ul li{
display:inline-block;
}
Compared to just inline. If it was just inline the absolute positioning below would cause multiple dropdowns to all appear in the same place according to the #nav div.
#nav ul li:hover ul{
position: absolute;
display:block;
}
This still doesn't look very good but it's functional. Checkout at tutsplus for some good tutorials.
At the same time, I'm sure you could solve this much more efficiently with jQuery.
I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.
I wonder if you can help me. I'm trying to create a drop down menu using just HTML and CSS. However, my hover function isn't working in IE10 as before it was. It works with other browsers like firefox and chrome but not with IE10.
My HTML code
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "centeredmenu">
<ul>
<li>Home</li>
<li>Client
<ul>
<li>Create Client</li>
<li>View Clients</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Search</li>
<li>View All</li>
</ul>
</li>
<li>Suppliers
<ul>
<li>Add Supplier</li>
<li>View All</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
My CSS Code
.centeredmenu ul li ul { display:none; }
.centeredmenu ul li:hover > ul { display:block; }
.centeredmenu ul li ul li ul { display:none; }
.centeredmenu ul li ul li:hover > ul { display:block; }
.centeredmenu ul {
background:#9bbe3c;
width:99.8%;
margin-top:0.5%;
z-index:1;
list-style:none;
position:relative;
display:inline-table;
font-family:'Calibri' !important;
font-size:1em;
border:1px solid #596f1b;
}
.centeredmenu ul:after { content: ""; clear:both; display:block; }
.centeredmenu ul li { float:left; }
.centeredmenu ul li a {
display:block;
color:#fff;
text-decoration:none;
padding:14px 22px 14px 23px !important;
}
.centeredmenu ul li a:hover{ background:#586f1b; }
.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }
.centeredmenu ul li ul li { float:none; position:relative; }
.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }
Today I ran into a similar problem. The drop down menu was working fine on Firefox, but not at all in IE.
1- I changed the file from html to asp.
This allowed me to see that I had some orphan fragment of code.
-> My code
-> </div>
<td class="whatever">
-> <div>
I removed it, and everything was working fine.
I just added the following code in "head" and its works for me.
meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag
When I place your HTML and CSS on JSFiddle, it works as expected.
May be something else wrong while you are accessing on your machine.
<div class = "centeredmenu">
<ul>
<li>Home</li>
<li>Client
<ul>
<li>Create Client</li>
<li>View Clients</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Search</li>
<li>View All</li>
</ul>
</li>
<li>Suppliers
<ul>
<li>Add Supplier</li>
<li>View All</li>
</ul>
</li>
</ul>
</div>
Refer LIVE DEMO
I ran into the exact same issue. It turned out I was missing .
Entering the following at the top of my HTML page solved my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The problem is that IE10 renders in "quirks" mode. So if you changed it to "standards" mode it should work fine.
Add the following in the head of your website to force IE 10 to use standards mode
if you are using php... credit for the answer goes to:
IE10 renders in IE7 mode. How to force Standards mode?