I have tried but can not make li tag wrap completely a tag inside with its padding. I want the width of the li depends on a''s padding but how ever I try, it doesn't work, if you know whats wrong, Please help me?
<ul>
<li>TAB 1<br />
<ul class="sub-ul">
<li>TEXT1</li>
<li>TEXT1</li>
</ul>
</li>
<li>TAB 2<br />
<ul class="sub-ul">
<li>TEXT2</li>
<li>TEXT2</li>
</ul>
</li>
</ul>
//STYLE
ul >li {display: inline-block; margin-left: 0;}
ul >li > a {padding: 10px 15px;} I need li wrapping around this padding.
I think this is what you are looking for. Hope it helps.
li {
display: inline-block;
margin-left: 0;
}
li > a {
padding: 10px 15px;
}
li ul li {
display: block;
}
Related
I am learning CSS and trying to get a nested navigation menu working. I am able to float the main items and stack all the child elements under it, but the position relative for the child menus are not working. I intend to move the child menu items to the right relative to its parent. Please let me know where I am going wrong.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
*{
margin:0;
padding:0;
}
h1{
text-align: center;
text-decoration: underline;
margin-bottom: 10px;
}
li{
list-style: none;
}
ul li a{
text-decoration: none;
display: block;
width:100px;
height: 25px;
border: 1px solid green;
text-align: center;
}
.main > li{
float:left;
position: relative;
}
.main > li > li {
position: absolute;
top:0px;
left:10px;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<ul class="main">
<li>Menu 1
<ul class="sub1">
<li>Menu 1.1
<ul class="sub2">
<li>Menu 1.1.1</li>
<li>Menu 1.1.2</li>
<li>Menu 1.1.3</li>
<li>Menu 1.1.4</li>
</ul>
</li>
<li>Menu 1.2</li>
<li>Menu 1.3</li>
<li>Menu 1.4</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</body>
</html>
Link to Plnkr - Plnkr Link
The primary issue is that your selector:
.main > li > li
Selects nothing.
This > means "immediate descendant". There only immediate descendant to .main > li is a ul, so the selector should read:
.main > li > ul
And, once you have that working, then you can hide the ul (under normal circumstances) and show it on hover:
.main > li > ul {
display: none;
position: absolute;
top:27px;
left:10px;
}
.main > li:hover ul {
display: block;
}
See this revised plunker
EDIT
Your question is not very clear. I just realized reviewing the code in the plunker that you also want a sub-sub menu.
I've revised the plunker, so it is correct. Basically, you also need to set the position / display of the sub-sub menu as well. Revised css below:
main > li > ul {
display: none;
position: absolute;
top:27px;
left:10px;
}
.main > li > ul > li > ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
.main > li:hover > ul,
.main > li:hover > ul > li:hover > ul {
display: block;
}
And, while we are at it, you do NOT need float: left. Float is something that has very specific, practical uses - and this isn't one of them. Change it simply to be display: inline-block, and you are set, without the other consequences of using float. (Note: with display inline-block, you may notice the nav items are spaced apart about 4px - this is due to whitespace and has a simple solution (hint: it's this answer)
I can't get the hover in my menubar to work. The html and css is below. I can get the display: none to work by itself. I can get the hover to work by itself. They just won't work together. Not sure what I am doing wrong.
This is the html:
<nav>
<ul>
<li><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top">
<li id="menudrop" class="rightbar">Menu</li>
<ul data-toggle="">
<li>Account Settings</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
This is the css:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li ul:hover li {
display: block;
}
Besides fixing some missing closing tags the main adjustment is to change this
nav ul li ul:hover li {
display: block;
}
into that
nav ul li:hover ul {
display: block;
}
As the nav ul li ul ist set to display:none; it's not possible to set a hover on it.
Adjusted in Fiddle
And without the image:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li id="menudrop" class="rightbar">Menu
<ul data-toggle="">
<li>Account Settings
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</nav>
I am trying to target the header element of a drop down menu which I load in jfiddle here: http://jsfiddle.net/DZLtm/16/
I am trying to get it so when you roll over nav ul li it show black instead of red. Here are the lines that I would have thought would do it.
nav ul li {float: right; width: 172px; height: 35px; background-color: red;}
nav ul li:hover > ul {display: block; text-align: left; background-color: black;}
Here is the HTML:
<nav>
<ul>
<li>BUTTON IMAGE
<ul>
<li>Accreditation Client Login</li>
<li>Training Client Login</li>
<li>Training Registration</li>
<li>Guardian Tracking</li>
</ul>
</li>
</ul>
</nav>
Can someone please tell me why nav ul li:hover wont work and what is > ul have to do with it. When I remove it it breaks the menu. Thank you Frank!
Just add nav ul li:hover {
background-color:black;
}
http://jsfiddle.net/weissman258/DZLtm/17/
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 want to position an unordered list of items on the left-hand side of a menu header (horizontally displayed, not vertically). For example where you see Home, HTML, etc:
How do I accomplish this effect with CSS?
Floats
ul
{
margin: 0;
list-style-type: none;
}
ul li
{
margin: 0;
list-style-type: none;
float: left;
}
ul li a
{
display: block;
}
<ul>
<li>Home</li>
<li>HTML</li>
<li>...</li>
</ul>
To get the lists like you have in your image, you will need to have two sets of UL and then apply a float: left; to the left one and a float: right; to the right.
With floats you have to clear them to avoid "breaking" your design later. You can do this by adding a <br style="clear: both;" /> below the lists. You can also add that style to the next div.
.menu{
text-align:left;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
display:inline;
margin:0px;
padding:0px 10px 0px 10px;
text-align:center;
}
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>