Ref this tutorial: https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
I used an external stylesheet, and simply put #menu before each CSS item, like this:
#menu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;}
or:
#menu ul li{
display: block;
position: relative;
float: left;}
But, when i reference with #menu, the menu doesn't render properly. It leaves the parent 'li' untouched by CSS.
http://jsfiddle.net/UGW2L/
Any ideas?
Thx,
Dave
Your HTML is this:
<ul id="menu">
Which means your CSS needs to be this:
ul#menu
Your current CSS is looking for an 'LI inside of a UL that is inside of some other element with an ID of MENU'
#menu ul targets this (any ul inside of an element with id='menu')...
<div id="menu">
<ul> <!-- <<-- this element is the target -->
...
</ul>
</div>
(div is just an example, any element with id="menu" can be used above)
ul#menu targets this (the ul with id='menu')...
<ul id="menu"> <!-- <<-- this element is the target -->
...
</ul>
Edit as per comments:
Quote: "...i am missing the 'box' around the parent node."
I think the node to which you refer is the <li>, just inside the parent <ul id='menu'>, and you have not targeted it anyplace at all.
Just add ul#menu li a to your box styling. (Note the comma. It separates two totally unique selectors sharing the same styling.)
ul#menu li a,
ul#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
http://jsfiddle.net/cWpEg/1/
See the difference?
ul#menu is the parent.
ul#menu li is the first item inside the parent.
ul#menu li a is the link inside the first child of the parent.
Since ul#menu li targets any & all <li>'s that are children of the ul#menu parent, you would only need the one selector...
ul#menu li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
http://jsfiddle.net/cWpEg/2/
Also note how it's the full width of the screen.
To target & style just the parent, add something like this.
ul#menu {
display: block;
position: relative;
float: left;
list-style: none;
}
http://jsfiddle.net/cWpEg/6/
Related
I have a dropdown menu on my site's top navigation bar. I'd like the items in this menu to expand horizontally to fit their contents. For some reason they won't expand to be wider than their parent.
I've recreated the issue in CodePen here: http://codepen.io/YM_Industries/pen/GgJBQv
In my actual website I don't have control over this section of the DOM, so I'm a little constrained there.
Here's the code for my recreation in case CodePen is unavailable:
HTML:
<ul class="nav">
<li>
Home
</li>
<li>
v Test1 v
<ul class="submenu">
<li>
Submenu 1
</li>
<li>
Long text wraps and is ugly :/
</li>
</ul>
</li>
<li>
Test2
</li>
</ul>
CSS:
* {
font-family: sans-serif;
}
ul.nav,
ul.nav li,
ul.nav ul {
display: block;
padding: 0;
}
ul.nav li {
position: relative;
}
/* Style each link */
ul.nav li > a {
display: block;
padding: 10px 15px;
line-height: 20px;
height: 20px;
background: rgba(254, 197, 46, 1);
border: none;
}
/* Bring back the first level links */
ul.nav > li {
float: left;
margin-right: 1px;
}
/* Selected/Hover effect */
ul.nav li > a:hover {
color: #004d85;
background: rgb(255, 213, 102);
}
/* Display dropdown in the correct location */
ul.nav li ul.submenu {
position: absolute;
top: 40px !important;
left: 0px !important;
display: none;
}
ul.nav li:hover ul.submenu {
display: block;
}
/* Set font+colour for site links */
ul.nav li a,
ul.nav li a:link,
ul.nav li a:visited {
color: black;
font-size: medium;
text-decoration: none;
}
ul.nav li a:hover,
ul.nav li a:active {
color: blue;
}
If I explicitly set a width on my submenu items (400px for example) they will expand correctly, but for some reason the content isn't making them get wider. I'd really rather not have to hardcode the width.
Thanks,
YM
The solution is rather easy. You just have to add
ul.submenu a {
white-space: nowrap;
}
which prevents the text from wrapping and therefore doesn't stick to the parent container size.
You can check it out here http://codepen.io/anon/pen/QwbYvG
just fixed your pen - upgrade your css classes:
ul.nav li ul.submenu
{
position: absolute;
top: 40px !important;
left: 0px !important;
width:auto;
display: none;
background: rgb(254, 197, 4);
}
ul.nav li ul.submenu > li
{
display:inline-block;
white-space: nowrap;
}
AND IT USES CSS 2 :)
I'm new to css and want to have a simple and clear understand about the css style inheritance. Thanks for help.
The following is a horizontal navigation bar I'm trying to create.
First I did this to reset the global padding and margin (I read some tutorial and believe this is a good practice.
*{
padding: 0px;
margin: 0px;
}
Then I added some padding to my li to add some gap between menu items.
.navi ul li {
float: left;
padding: 0px 10px;
border-right: 1px dashed #770;
position: relative;
}
The following is a sub-menu item. I noticed that a padding-left of 10px was added automatically, which I think I need to add manually.
.navi ul li ul li {
border-right: none;
border-top: 1px dashed #789;
width: 200px;
}
The html:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $app_name ?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="page_title">
<?php
echo "<h1>$app_name</h1>";
?>
</div>
<div class="navi">
<ul>
<li>Home</li>
<li>Sign up</li>
<li>
Menu1
<ul>
<li>Sub-menu1</li>
<li>Sub-menu2</li>
</ul>
</li>
<li>Log in</li>
</ul>
</div>
</div>
<div class="contents">
</div></div></body></html>
Here is a some Explanation. Build a DEMO also.
/*Will remove margin and padding from all the HTML element used in page As you are using `*` Universal Selector*/
*{
padding: 0px;
margin: 0px;
}
/*only affect the first level li*/
.navi ul li {
float: left;
padding: 0px 10px; /*As the padding given to parent `li` so the padding applied to second level `li` as well */
border-right: 1px dashed #770;
position: relative;
color:green;
}
/*only affect the Second Level li*/
.navi ul li ul li {
border-right: none;
border-top: 1px dashed #789;
width: 200px;
color:red;
}
.navi ul li {
float: left;
padding: 0px 10px;
border-right: 1px dashed #770;
position: relative;
}
The above class will apply all the li tag under the navi class div. When you use space between your selector means it will target all the child selectors. Suppose If you want to target only first level child then you need to use > between your selector like below.
.navi > ul > li {
float: left;
padding: 0px 10px;
border-right: 1px dashed #770;
position: relative;
}
So the above code will find first level child of UL from .navi, from that it will check first level child of LI. If you declare like above in your CSS, then you need to explicitly mentioned the padding for second level child as you expected.
Read for Better Understanding of Child Selector
By writing
*{
padding: 0px;
margin: 0px;
}
you are removing margin and padding from all the elements.
Following code
.navi ul li {
float: left;
padding: 0px 10px;
border-right: 1px dashed #770;
position: relative;
}
adds styling to all the lis that have parent ul, which has parent .navi.
Please note, this includes all the lis, irrespective of the level, means it could be .navi ul li, or .navi ul li ul li, or .navi ul li ul li ul li and so on.
Following code
.navi ul li ul li {
border-right: none;
border-top: 1px dashed #789;
width: 200px;
}
adds styling to .navi ul li ul li or .navi ul li ul li ul li and so on.
Probable solution of what you are asking:
Change
.navi ul li
to
.navi > ul > li
This will style only direct children of ul of .navi. i.e first level lis.
And,
Change
.navi ul li ul li
to
.navi li > ul > li
This code will affect to only direct lis of ul of lis in .navi. i.e. second level of lis.
DEMO here.
In my navigation bar, the links to other pages are placed underneath each other.
The links change by background-color when you hover them. Now I want it to hover full screen.
I already tried by setting padding-left and padding-right:auto, but that just doesn't work as I expect.
I don't want to add a fixed measurement(ex. padding-left: 100px; padding-right:100px;) because then it won't be responsive anymore when I minimize or enlarge the browser.
How can I do this?
Sorry I don't want it to hover fullscreen but to hover the size of the <div>.
HTML:
<div id="website">
<nav>
<ul>
<li>wie</li>
<li>hoe</li>
<li>wat</li>
<li>contact</li>
</ul>
</nav>
</div>
CSS:
body {
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#website {
max-width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav {
background-color: white;
}
nav li {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
}
nav a:hover {
background-color: green;
color: white;
}
If I understand your question right, all you need to do is add the display: block attribute to your <a> elements, e.g. like this:
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
display: block; /* <-- add this line */
}
This will cause the links to be rendered as block-level elements, which will, by default, take up the entire width of the <li> element containing them.
Here's a demo of the result on JSFiddle. In the demo, I also added display: block (instead of the default display: list-item) to the <li> elements to get rid of the bullets, and padding: 0 to the <ul> to get rid of the indentation. The result is that all these elements, down to the <a>s, inherit the full width of the enclosing <div>.
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li>home</li>
<li>about</li>
<li>tutors</li>
<li>students</li>
<li>contact us</li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Change the rule on your <a> element from:
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
to
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
jsFiddle example
You have to make the UL inside the div behave like a block. Try adding
.navigation ul {
display: inline-block;
}
I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.
If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.
One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.