I am trying to create a dropdown menu but the text always is dropping down to the right of where the original list item is. I have been messing with different text-align settings but cant seem to get it right. My HTML is available here. My CSS code is as follows:
#navMenu,
#navMenu ul {
list-style: none;
height: 10px;
}
#navMenu {
float: left;
}
#navMenu > li {
float: left;
padding-right: 15px;
}
#navMenu li a {
display: block;
height: 2em;
line-height: .75em;
padding: 0 1.5em;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
text-align: end;
}
#navMenu > li > a {
color: #fff;
align: left;
text-align: left;
font-weight: bold;
}
#navMenu > li:hover > a {
background: #f09d28;
color: #000;
}
#navMenu ul {
position: absolute;
display: none;
align: left;
width: auto;
height: 50px;
background-color: #AAAAAA;
z-index: 999;
}
#navMenu ul li a {`enter code here`
list-style-position:inside;
}
#navMenu li:hover ul {
display: block;
}
The subnav ul creates a padding.
Give the subnav ul a padding: 0. This should help you out.
The browser is adding some left padding to ul by default. You need to remove that padding:
#navMenu ul {
padding: 0;
}
You may also want to consider using a CSS reset to prevent problems like these.
You have some additional padding to the left of the <ul> in the subnav. Fix it by adding this css:
#navMenu ul {
padding: 0;
height: auto;
}
Note: height: auto; fixes the height of the subnavs.
Also consider adding a CSS reset such as this one: http://www.cssreset.com/
Try this:
ul#navMenu ul {
padding-left: 0;
}
That will make sure you only hit your nested ul's and not the top-level ul's
Related
I have been trying to make my navbar responsive. So far I managed to display all li items underneath each other when the screen gets to small. However some li's of my navbar have sub items which normally drops down (Classes has 3 sub li's). When hovering one of the li's which has subitems it renders them through the main li items of the nav bar.
What I want is that the submenus dont get triggered by hovering, but only when the user taps their screen. Afterwards it should display the submenu items underneath the parent li and then continue with the other main li's.
The code underneath is the working part for the fullscreen nav bar.
Demo
.nav a {
text-decoration: none;
color: #fff;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border-bottom: none;
transition: .5s background-color;
}
.nav ul {
list-style: none;
background-color: #522d54;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
.nav li {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
width: auto;
line-height: 40px;
border-bottom: none;
font-size: 1em;
display: inline-block;
text-align: left;
}
.nav a:hover {
background-color: #39203b;
}
.nav a.active {
cursor: default;
background-color: #824885;
box-shadow: inset 0em -.2em #b084b3;
}
.nav ul li {
position: relative;
display: inline-block;
}
.nav ul li ul li {
text-align: center;
padding: 0;
width: 100%;
}
.nav li ul li a {
text-align: left;
font-size: .8em;
white-space: nowrap;
padding-left: 15px;
padding-right: 15px;
display: block;
}
.nav ul li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: inline-block;
}
You need to override your hover display with none, because you no longer want it to show on hover.
#media screen and (max-width: 650px) {
.nav li:hover ul {
display: none;
}
}
Then you will need to use javascript or jquery to add a class to the li on click:
jQuery could be something like (assumes you have class 'sub' on items with sub menus):
$('.nav li.sub').click(function() {
$(this).toggleClass('open-sub-menu');
});
New class is:
.nav li.sub.open-sub-menu ul {
position:relative;
display:block;
}
Thank you so much that truly did the trick. I am a complete jquery/js noob so this was extremely helpful. Somehow it took me 15 minutes to figure out I had not linked to jquery in the head tags.
For those with the same problem as me make sure to put this in between the tags of your html.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
I'm trying to add a space above my navigation bar, however the code I'm using is failing to do so.
My CSS
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
A Fiddle
https://jsfiddle.net/xuk2nk46/
.top-nav {
padding-top: 40px;
}
u have given two values to top-padding
.top-nav a {
padding-top: 40px;
}
and
.
top-nav ul a {
color: #000;
padding: 0 10px;}
the second one is applied which is 0 px
.top-nav{
margin-top: 10px;
}
and remove the padding , or keep only one.
Try adding margin-top to .top-nav:
.top-nav {
margin-top: 20px;
}
Margin adds a space outside the element, while padding adds a space inside the element.
By default <a> in an inline element. So padding with top and bottom values won't apply.
You have to change the default type by inline-block to add top and bottom padding on it.
Also, you can group this two properties .top-nav a and .top-nav ul a together like this :
.top-nav ul li a {
display: inline-block;
color: #000;
padding: 20px 10px;
text-decoration: none;
font-size: 20px;
}
And then, you can set top and bottom padding values with this property : padding: 20px 10px; or use margin property like this margin: 20px 10px;
Just add a margin to your .top-nav :
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.top-nav {
margin: 30px 0 0 0; /* ADD MARGIN HERE */
}
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
<nav class="top-nav">
<ul>
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>Join Us</li>
</ul>
</nav>
(see also this Fiddle)
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
I'm facing a problem using CSS. I've expended the time allotted to complete the target job, but it's too hard for me. Now I'm going ask all of you (webmasters/developers) to solve my problem.
Please review this picture and tell me how I can move the second line of text for the bullets numbered (3, 5, 6, 8) - I want the second line of text to start at the same horizontal position at which the first one starts.
Here is CSS of this sidebar:
.plugins ul{padding-left:0;counter-reset:plugincount;}
.plugins ul li{border-bottom:1px dashed #ddd;line-height:20px}
.plugins ul li:before{content:counter(plugincount);counter-increment:plugincount;margin-left:-10px;margin-right:1px;background:#8FC93E;border-radius:25px;border:1px solid #000;color:#fff;font:bold 16px georgia;padding:.3em .6em}
..plugins ul li{border-bottom:1px dashed #ddd}
.plugins ul li a{margin-left:10px;}
.plugins ul li a:hover{text-decoration:none}
.plugins ul li:hover,.plugins ul li:hover{border-bottom:1px dashed #696969}
Here is the original link of site: Urgentfiles.com
You need to make the bullets be outside the li content:
ul li { list-style-position: outside; margin-left: 1em; }
Here you are http://jsfiddle.net/jhkb5jrb/1/
body {
counter-reset: my-counter; /* REmove this */
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 300px;
counter-reset:plugincount; /* Add this */
}
ul li:before {
background: #8fc93e;
border: 1px solid #000;
border-radius: 100%;
color: #ffffff;
content:counter(plugincount); /* change from my-counter to plugincount*/
counter-increment:plugincount; /* change from my-counter to plugincount*/
float: left;
font-family: Georgia;
font-size: 16px;
font-weight: 700;
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
position: relative;
}
ul li{
padding: 0.7em 0;
}
ul li a{
text-decoration: none;
color: #000000;
}
if you should maintain this markup
set
.plugins ul li {position: relative; padding-left:40px /* set padding bigger then circle */;
.plugins ul li::before {position: absolute; top: 0; left: 0; margin:0 /*clear margin*/
but I think change html markup is better
This is what it should look like:
There is a tab-menu and a dropdown area. This should always have the same position (but different content and the respective tab choosen) as in the picture. Meaning it should always be as wide as the tabs(-menu).
But I can not figure out how:
to get this responsive
how to have the dropdown area stay where it is
how to style the subitems (in the dropdown area)
Here is what I got so far (sorry for the huge css it is not cleaned yet!), the menu starts at line 1559.
http://jsfiddle.net/pxpHw/
How do I do this properly?
THANKS!
code:
// css
nav {
cursor: default;
}
a {
text-decoration: none;
color: #000000;
}
#menu ul {
margin: 0px;
padding: 0px;
left: 0;
list-style-type: none;
background:green;
z-index: 100;
max-width: 60em;
}
#menu li {
float: left;
width: 20%;
text-align: center;
}
#menu li ul {
display: none;
/*display: block;*/
padding-top: 3px;
}
#menu li:hover ul {
display: block;
}
#menu li ul li {
background-color: #2F2D49;
border-bottom: 1px solid #FFFFFF;
width: 100%;
max-width: 60em;
min-height: 30em;
position: absolute;
}
#menu li ul li a {
color: #FFFFFF;
}
#menu li ul li:hover {
background-color: #232323;
}
Use media queries to get the responsive design
Check the following links
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://mediaqueri.es/
Thanks
AB
This is what I was looking for: (Columns and Layout tab)
http://codecanyon.net/item/css3-full-responsive-dropdown-menu/full_screen_preview/4528828