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.
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;
}
ul li defined as float left,so the main li's are came side by side,but how first li's childs are coming one after other,but it seems ul li properties applying on first li's child too..can some explain me
<html>
<head>
<style>
ul {
margin:0px;
padding:0px;
list-style:none;
}
ul li {
list-style:none;
float :left;
width:150px;
height:30px;
line-height:30px;
text-align:center;
background-color:yellow;
}
ul li a {
text-decoration:none;
color:red;
}
</style>
</head>
<body>
<ul>
<li>Home
<ul><li>Honda</li>
<li>Maruthi</li>
<li>Suzuki</li>
<li>Kawaski</li>
</ul>
</li>
<li>ContactUs
<ul><li>Honda</li>
<li>Maruthi</li>
<li>Suzuki</li>
<li>Kawaski</li>
</ul>
</li>
<li>Report</li>
<li>FeedBack</li>
</ul>
</body>
</html>
You are using descendant selectors, which means ANY li in your document will be styled that way.
If you only want to target the first ul and those first li's use a class for the ul and the child selector, like this:
.first > li { }
Is this what you are looking for?
http://jsfiddle.net/19xxvhpt/
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;
}
I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.
I know I have display:none; in ul style but can you change that to display:block; when hovered over the word info?
HTML Code:
<ul id="Menu">
<li>Home </li>
<li>Info
<ul style="display:none;">
<li>Program</li>
<li>Getting Started<li>
<li>Credits</li>
</ul>
</li>
<li>Video </li>
<li>server </li>
<li>Profile </li>
<li>Help</li>
</ul>
CSS Code:
#Menu {
list-style:none;
font-size:16px;
font-weight:Bold;
padding:14px 0 0;
width:415px;
margin-top:0;
float:left;
margin-left:0;
}
#menu { list-style:none;}
li:hover > ul {display:list-item;}
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;}
li { float:left; margin-left:10px; }
li ul li { float:none; margin:0; display:inline;}
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;}
li { display: list-item; text-align: -webkit-match-parent;}
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;}
Help in advanced. any help is apreciated :)
also post a code not only telling me whats wrong thanks!
use #Menu before your css class names : DEMO
like: #Menu li:hover > ul {display:list-item;}
NOTIC: css Class names are Case-Sensitive
I am thinking this is because the html code contains an inline display:none.
In the inner <ul>, we should remove <ul style="display:none;"> in the above html.
I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.